My HTML code:
CODE
<div id="navigation">
<nav>
<ul>
<!-- This is the base level navigation -->
<li><a href="#">January</a></li>
<ul>
<!--This is a second level drop down menu -->
<li><a href="#">Weel 1</a></li>
<ul>
<!--This is a third level pop out menu -->
<li><a href="#">Homework 1</a></li>
<li><a href="#">Lists 1</a></li>
<li><a href="#">Sample 1</a></li>
</ul>
<li><a href="#">Week 2</a></li>
</ul>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
</ul>
</nav>
</div>
<nav>
<ul>
<!-- This is the base level navigation -->
<li><a href="#">January</a></li>
<ul>
<!--This is a second level drop down menu -->
<li><a href="#">Weel 1</a></li>
<ul>
<!--This is a third level pop out menu -->
<li><a href="#">Homework 1</a></li>
<li><a href="#">Lists 1</a></li>
<li><a href="#">Sample 1</a></li>
</ul>
<li><a href="#">Week 2</a></li>
</ul>
<li><a href="#">February</a></li>
<li><a href="#">March</a></li>
</ul>
</nav>
</div>
My CSS code:
CODE
#navigation {
background-color: #00FF77;
width: 80%;
height: 60px;
margin: 0px auto;
}
nav {
margin: 0px auto;
width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: block;
}
nav ul li {
float: left;
display: list-item;
list-style: none;
background-color: #6600FF;
}
nav ul li a {
display: block;
padding: 10px 10px;
color: black;
font-size: 20px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
/* Hide the drop down and pop up menu levels by default */
nav ul ul {
display: none;
position: absolute;
top: 58px;
}
/* Show the drop down and pop out menus on hover */
nav ul li:hover > ul {
display: list-item;
}
/* First level drop down */
nav ul ul li {
width: 170px;
float: none;
position: relative;
border-bottom: none;
}
/* Secont level pop out menu */
nav ul ul ul li {
position: relative;
top: -58px;
left: 170px;
}
background-color: #00FF77;
width: 80%;
height: 60px;
margin: 0px auto;
}
nav {
margin: 0px auto;
width: 100%;
}
nav ul {
padding: 0;
margin: 0;
list-style: none;
position: relative;
display: block;
}
nav ul li {
float: left;
display: list-item;
list-style: none;
background-color: #6600FF;
}
nav ul li a {
display: block;
padding: 10px 10px;
color: black;
font-size: 20px;
text-decoration: none;
}
li a:hover {
background-color: red;
}
/* Hide the drop down and pop up menu levels by default */
nav ul ul {
display: none;
position: absolute;
top: 58px;
}
/* Show the drop down and pop out menus on hover */
nav ul li:hover > ul {
display: list-item;
}
/* First level drop down */
nav ul ul li {
width: 170px;
float: none;
position: relative;
border-bottom: none;
}
/* Secont level pop out menu */
nav ul ul ul li {
position: relative;
top: -58px;
left: 170px;
}