<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