I am trying to create a dropdown menu using ONLY css. I am having a problem. I need to get the headings a different color and font than the subheadings. I need the heading to be white and have a hover of black text and white background. I need my subheading to be black, font verdana, size 10 and have a hover of #ace1f1. Right now, everytime I change one, the other changes as well. The list and CSS sheet is below. Thanks for the help!!
Here is my list:
- <ul class="dropdown">
-
<li><a href="about_new.htm" >About Us</a>
-
<ul class="dropdown">
-
<li><a href="corpgov_new.htm">Corporate Governance</a></li>
-
<li><a href="strategy_new.htm">Our Strategy</a></li>
-
<li><a href="strengths_new.htm">Our Strengths</a></li>
-
<li><a href="history_new.htm">Our History</a></li>
-
</ul>
-
</li>
-
<li><a href="caution_new.htm" class="dropdown">Investor Relations</a></li>
-
<li><a href="site_new.htm">Site Map</a></li>
-
<li><a href="info_new.htm">Contact Us</a>
-
<ul>
-
<li><a href="info_new.htm">Information Request</a></li>
-
<li><a href="add_new.htm">Add/Remove Me to E-mail List</a></li>
-
<li class="dropdown"><a href="career_new.htm">Career Opportunities</a></li>
-
</ul>
-
</li>
-
</ul>
Here is my CSS sheet
- ul.dropdown {
-
background-color: #006699;
-
float: none;
-
list-style-image: none;
-
list-style-type: none;
-
position: relative;
-
z-index: 597;
-
width: 826px;
-
vertical-align: middle;
-
word-spacing: normal;
-
visibility: visible;
-
color: #000;
-
font-family: Arial, Helvetica, sans-serif;
-
white-space: nowrap;
-
letter-spacing: normal;
-
text-indent: 0%;
-
font-size: 12px;
-
font-weight: bold;
-
padding: 0px;
-
margin-top: -7px;
-
margin-right: 0px;
-
margin-bottom: 0px;
-
margin-left: -207.75px;
-
page-break-before: auto;
-
page-break-after: auto;
-
}
-
-
ul.dropdown a:link {
-
font-family: Arial, Helvetica, sans-serif;
-
color: #000;
-
text-decoration: none;
-
font-size: 12px;
-
font-style: normal;
-
text-align: left;
-
border-bottom-style: none;
-
border-top-style: none;
-
border-right-style: none;
-
border-left-style: none;
-
}
-
ul.dropdown li:hover {
-
background-color: #ace1f1;
-
position: relative;
-
z-index: 599;
-
color: #000;
-
font-family: Arial, Helvetica, sans-serif;
-
background-position: center;
-
}
-
ul.dropdown a:visited {
-
font-family: Arial, Helvetica, sans-serif;
-
color: #000;
-
text-decoration: none;
-
font-size: 12px;
-
font-style: normal;
-
text-align: left;
-
border-bottom-style: none;
-
}
-
-
-
ul.dropdown a:hover {
-
color: #FFF;
-
text-decoration: none;
-
display: block;
-
font-family: Arial, Helvetica, sans-serif;
-
background-color: #ace1f1;
-
visibility: visible;
-
}
-
ul.dropdown li {
-
line-height: 1.3em;
-
vertical-align: middle;
-
float: left;
-
padding-top: 7px;
-
padding-right: 69px;
-
padding-bottom: 7px;
-
padding-left: 69px;
-
border-right-width: 0px;
-
border-right-style: none;
-
border-right-color: #999999;
-
list-style-image: none;
-
list-style-type: none;
-
color: #FFF;
-
text-align: left;
-
margin: 0px;
-
font-size: 12px;
-
}
-
-
ul.dropdown ul {
-
background-color: #EEEDED;
-
margin: 0px;
-
width: 206.5px;
-
list-style-image: none;
-
list-style-type: none;
-
position: absolute;
-
visibility: hidden;
-
z-index: 598;
-
left: 0%;
-
top: 100%;
-
float: left;
-
text-align: left;
-
padding-top: 0px;
-
padding-right: 10px;
-
padding-bottom: 0px;
-
padding-left: 10px;
-
font-family: Arial, Helvetica, sans-serif;
-
font-size: 12px;
-
color: #000;
-
}
-
ul.dropdown.li {
-
line-height: 1.3em;
-
vertical-align: middle;
-
margin: 0px;
-
float: left;
-
padding-top: 7px;
-
padding-right: 20px;
-
padding-bottom: 7px;
-
padding-left: 10px;
-
border-right-width: 1px;
-
border-right-style: solid;
-
border-right-color: #999999;
-
list-style-image: none;
-
list-style-type: none;
-
border-top-style: none;
-
border-bottom-style: none;
-
border-left-style: none;
-
text-align: right;
-
width: 300px;
-
font-family: Arial, Helvetica, sans-serif;
-
position: relative;
-
font-size: 14px;
-
color: #FFF;
-
}
-
ul dropdown li:hover {
-
background-color: #ace1f1;
-
position: relative;
-
z-index: 599;
-
}
-
ul.dropdown li:hover > ul {
-
visibility: visible;
-
background-color: #eeeded;
-
}
-
ul.dropdown ul li {
-
float: none;
-
border-top-style: none;
-
border-right-style: none;
-
border-bottom-style: solid;
-
border-left-style: none;
-
text-align: left;
-
border-bottom-width: 1px;
-
border-bottom-color: #ace1f1;
-
padding-right: 30px;
-
padding-left: 5px;
-
background-color: #eeeded;
-
font-family: Arial, Helvetica, sans-serif;
-
font-size: 12px;
-
color: #FFF;
-
}
-
ul.dropdown {
-
background-color: #006699;
-
float: left;
-
list-style-image: none;
-
list-style-type: none;
-
position: relative;
-
z-index: 597;
-
color: #FFF;
-
overflow: visible;
-
left: 25%;
-
top: 0px;
-
right: 25%;
-
bottom: 0px;
-
font-size: 12px;
-
background-image: none;
-
}
