Question ab my CSS menu? STUCK!

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • michelle5613
    New Member
    • Oct 2009
    • 1

    Question ab my CSS menu? STUCK!

    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:

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

    Code:
    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;
    }
    Last edited by acoder; Oct 26 '09, 10:30 AM. Reason: Please use [code] tags
Working...