Jump to content

styling submenu


webwags
 Share

Recommended Posts

<div id="navbar">
<nav id="navbar_text">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="aboutus.html">About</a></li>
<li><a href="products.html">Products</a>
<ul class="submenu">
<li><a href="fireplace.html">Fireplaces & Accessories</a></li>
<li><a href="stoves.html">Stoves</a></li>
<li><a href="outdoorkitchens.html">Outdoor Kitchens</a></li>
<li><a href="gasgrills.html">Gas Grills</a></li>
</ul>
</li>
<li><a href="services.html">Services</a>
<ul class="submenu">
<li><a href="chimney_services.html">Chimney Services</a></li>
<li><a href="gas_services.html">Gas Services</a></li>
<li><a href="custom_design.html">Custom Design</a></li>
</ul>
</li>
</ul>
</nav>
</div> <!--END navbar-->
#navbar_text a:link{
color: #bca380;
}
#navbar_text a:hover{
color: #dccfbd;
}
#navbar_text {
word-spacing: 15px;
}
#navbar_text li{
display:inline;
}
#navbar_text ul li a {
display:inline;
padding: 5px;
background: #663333;
margin-top: 5px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 150%;
color: #bca380;
text-decoration: none;
}
ul.submenu {
display: none;
}
li:hover ul.submenu {
padding: 0;
margin: 0;
list-style: none;
line-height: 25px;
display: list-item;
width: 100px;
font-size: 70%
}
#sidebar ul li a {
display: block;
padding: 10px 10px 10px 15px;
background: #cab69a;
-webkit-border-radius: 8px 0px 0px 8px;
border-radius: 8px 0px 0px 8px;
margin-top: 10px;
font-family:Georgia, "Times New Roman", Times, serif;
font-size: 120%;
font-weight: bold;
color: #663333;
text-decoration: none;
-webkit-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);
-moz-box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);
box-shadow: 4px 4px 5px rgba(181, 154, 115, 0.75);
}
nav ul {
list-style:none;
}
#navbar {
background: #663333;
height: 35px;
width: 940px;
padding: 10px 0px 0px 20px;
}

 

submenu test.html

submenu test.css

Link to comment
Share on other sites

You need to set your parent li to have position: relative and then set your submenu ul to use position: absolute. Add a negative value for top and left position to place it well off the screen (hide it) - top: -9999em will work fine. When you hover over the menu you will need to adjust the top positioning of that submenu ul so that it now positions where you want it.

 

#navbar_text li{
position: relative;
}

 

ul.submenu {
position: absolute;
top: -9999em;
left: 0;
}
li:hover ul.submenu
{ top: 30px;}
Adjust to suite
Edited by newseed
Link to comment
Share on other sites

  • 2 weeks later...

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...