PDA

View Full Version : Resolved Add submenu to menu without submenu in CSS



igotregistered
02-14-2013, 10:01 PM
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


#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

<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>

igotregistered
02-18-2013, 02:09 PM
Working thanks!