HTML nav Tag - Learn HTML | W3Docs


<
html
>
<
head
>
<
style
>

nav
ul
ul
 {
display
: none;

      }
nav
ul
li
:hover
 > 
ul
 {
display
: block;

      }
nav
ul
:after {

        content: 
""
;
clear
: both;
display
: block;

      }
nav
ul
li
 {
float
: left;
position
: relative;
list-style-type
: none;

      }
nav
ul
li
:hover
 {
background
: 
rgba
(
19
, 
20
, 
123
, 
0.67
);

      }
nav
ul
li
:hover
a
 {
color
: 
#fff
;

      }
nav
ul
li
a
 {
display
: block;
padding
: 
20px
30px
;
color
: 
#ffffff
;
text-decoration
: none;
background-color
: 
rgba
(
35
, 
17
, 
134
, 
0.8
);
font-family
: sans-serif;

      }
nav
ul
ul
 {
background
: 
#5f6975
;
padding
: 
0
;
position
: absolute;
top
: 
100%
;

      }
nav
ul
ul
li
 {
float
: none;
position
: relative;

      }
nav
ul
ul
li
a
 {
padding
: 
15px
10px
;
color
: 
#ffffff
;
text-transform
: uppercase;

      }
nav
ul
ul
li
a
:hover
 {
background
: 
rgba
(
19
, 
20
, 
123
, 
0.67
);

      }
</
style
>
</
head
>
<
body
>
<
h1
>Dropdown menu with the HTML nav tag:
</
h1
>
<
nav
>
<
ul
>
<
li
>
<
a
href
=
"https://www.w3docs.com/"
>Home
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz/"
>Quizzes
</
a
>
<
ul
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz-start/html-basic"
>HTML Bacis
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz-start/css-basic"
>CSS Bacis
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz-start/javascript-basic"
>JavaScript Bacis
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz-start/php-basic"
>PHP Bacis
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/quiz-start/es6-basic"
>ES6 Bacis
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets"
>Snippets
</
a
>
<
ul
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/angularjs.html"
>Angular JS
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/apache.html"
>Apache
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/git.html"
>Git
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/linux.html"
>Linux
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/nodejs.html"
>Node.Js
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/snippets/symfony.html"
>Symfony
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tool/"
>Tools
</
a
>
<
ul
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/html-encoder/"
>HTML ENCODER/DECODER
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/css3-maker/border-radius"
>CSS MAKER
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/password-generator"
>PASSWORD GENERATOR
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/image-base64"
>Base 64
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/code-diff/"
>CODE DIFF
</
a
>
</
li
>
</
ul
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/string-functions/"
>String Functions
</
a
>
<
ul
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/string-revers"
>STRING REVERSE
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/string-word-count"
>STRING WORD COUNT
</
a
>
</
li
>
<
li
>
<
a
href
=
"https://www.w3docs.com/tools/string-remove-empty-lines"
>EMPTY LINES REMOVER
</
a
>
</
li
>
</
ul
>
</
li
>
</
ul
>
</
nav
>
</
body
>
</
html
>
HTML nav Tag – Learn HTML | W3Docs

mtoplist
