HTML & CSS - Dropdown navigation menu
Dropdown navigation menu code from my 'HTML & CSS Creating a dropdown navigation menu' video.
by Rafael Nepomuceno
HTML
<div id="menu">
<ul>
<li><a href="#">item #1</a>
</li>
<li> <a href="#">item #2</a>
</li>
<li> <a href="#">dropdown #1</a>
<ul>
<li><a href="#">dropdown #1 item #1</a>
</li>
<li><a href="#">dropdown #1 item #2</a>
</li>
<li><a href="#">dropdown #1 item #3</a>
</li>
</ul>
</li>
<li> <a href="#">dropdown #2</a>
<ul>
<li><a href="#">dropdown #2 item #1</a>
</li>
<li><a href="#">dropdown #2 item #2</a>
</li>
<li><a href="#">dropdown #2 item #3</a>
</li>
</ul>
</li>
<li> <a href="#">item #3</a>
</li>
</ul>
</div>
<!-- Nav wrapper end -->
CSS
#body {
padding: 0;
margin: 0;
font-family: Arial;
font-size: 17px;
}
#menu {
width: 600px;
margin: 0 auto;
text-align: left;
background-color: #222;
}
#menu ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
}
#menu ul li {
display: inline-block;
}
#menu ul li:hover {
background-color: #333;
}
#menu ul li a, visited {
color: #CCC;
display: block;
padding: 15px;
text-decoration: none;
}
#menu ul li:hover ul {
display: block;
}
#menu ul ul {
display: none;
position: absolute;
background-color: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#menu ul ul li {
display: block;
}
#menu ul ul li a:hover {
color: #699;
}