dropdown under a nav button css/html
- by MannfromReno
I have a navcontainer with buttons in the container. I need to make a dropdown list for only one of the buttons. How would this be accomplished with CSS/HTML. Here is my code:
HTML:
<div id="navcontainer">
<a href="/home.html" class="button" style="width: 115px">About Us</a>
<a href="/quote.html" class="button" style="width: 170px">Request a Quote</a>
<a href="/affiliates.html" class="button" style="width: 115px">Affiliates</a>
<a href="/pricing.html" class="button" style="width: 170px">Pricing & Plans</a>
<a href="/addservices.html" class="button" style="width: 190px">Additional Services</a>
<a href="/service.html" class="button" style="width: 165px">Service Details</a>
<a href="/watering.html" class="button" style="width: 108px">Watering</a>
</div>
CSS:
#navcontainer {
float: right;
width: 1040px;
height: 45px;
text-align: center;
line-height: 45px;
color: #fff;
margin-bottom: 6px;
}
.button {
text-align: center;
background: #226426;
color: #fff;
width: 100px;
height: 45px;
float: left;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
border-right: solid 1px #91b293;
border-top: solid 1px #91b293;
border-bottom: solid 1px #91b293;
}
Do I need to make this into a ul or can I keep it as is, and just add a dropdown to the Services button? Thanks for your help.
