I am creating a simple navigation bar with drop down menus. I am using code that I have used before, and has worked perfectly, with a change in some of the colours etc. For some reason the drop down will not appear, I don't know if I am missing something.
The website: http://colour-flow.com/
CSS code:
Code:
/*---------------Nav Bar---------------*/
#menu ul {
margin:0;
padding:0;
height:30px;
width:1000px;
list-style-type:none;
}
#menu ul li
{
position:relative;
background-image:url(../images/navbar.jpg);
margin:0;
padding:0;
display:inline;
height:30px;
width:200px;
text-align:center;
float:left;
line-height:30px;
}
#menu ul ul {
display:none;
}
#menu ul li:hover > ul {
display:block;
}
#menu ul li ul {
width:200px;
text-align:center;
}
#menu ul li ul li ul {
margin-top:-30px;
list-style-type:none;
margin-left:200px;
width:200px;
text-align:center;
}
#menu ul li ul li, #menu ul li ul li a {
height:auto;
padding-bottom:3px;
padding-top:3px;
line-height:25px;
width:200px;
background-color:#CCCCCC;
color:#000000;
border:#000;
font-size:14px;
}
#menu ul li ul li a:hover {
background-color:#8CC63E;
color:#000;
border:#000 thin;
font-size:14px
}
#menu ul li a
{
display:block;
height:30px;
cursor:pointer;
font-family:Tahoma, Geneva, sans-serif;
font-size:16px;
text-decoration:none;
color:#000;
font-weight:bold;
}
#menu ul li a:hover
{
background-image:url(../images/navbarhover.jpg);
}
/*---------------Nav Bar---------------*/
HTML
HTML Code:
<div id="menu">
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a>
<ul>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
<li><a href="#">page</a></li>
</ul>
</li>
<li><a href="contact.php">Contact us</a></li>
</ul>
</div>
Thank you!
Bookmarks