I need to add a submenu to this menu which by default the CSS does not have submenu written.
Any help is greatly appreciated!!!
CSS
Code:
#header .topnav ul {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
border: 1px solid #3f3f3f;
background: url(../images/nav-bg.gif) repeat-x left top; height: 40px;
}
#header .topnav ul li:first-child {
-webkit-border-radius: 10px 0 0 10px;
-moz-border-radius: 10px 0 0 10px;
border-radius: 10px 0 0 10px;
}
#header .topnav ul li:last-child {
border: 0;
}
#header .topnav ul li {
border-right: 1px solid #3f3f3f;
float: left;
font: bold 13px/40px Arial, Helvetica, sans-serif;
text-transform: uppercase;
text-shadow: 0 -1px 1px #000;
}
#header .topnav ul li:hover, #header .topnav ul li.on {
-webkit-box-shadow: 0 0 30px #000 inset;
-moz-box-shadow: 0 0 30px #000 inset;
box-shadow: 0 0 30px #000 inset;
background: url(../images/nav-bg.gif) repeat-x left bottom;
}
#header .topnav ul li a {
display: block;
line-height: 40px;
color: #FFF;
width: 123px;
text-align: center;
}
html
Code:
<div class="topnav">
<ul>
<li class="on"><a href="index.php">Home</a></li>
<li><a href="about-us.php">About Us</a></li>
<li><a href="services.php">Our Services</a>
<ul>
<li>submenu 1</li>
<li>submenu 2</li>
</ul>
</li>
<li><a href="products.php">Our Products</a></li>
<li><a href="specials.php">Specials</a></li>
<li><a href="faqs.php">FAQs</a></li>
<li><a href="blog">Blog</a></li>
<li><a href="contact-us.php">Contact Us</a></li>
</ul>
</div>
Bookmarks