I'm going out of my mind with this one. I'm trying to build a suckerfish css drop down menu. I have the first level working ok but I can't get the nested
ul (under the Glossary tab) to display in block format and show my a background color.
I've been at this for three days and I'm about to go crazy. If anyone can help I'd really appreciate it. You can see it here: www.brettlockhart.com/blast/
body {
min-width:640px;
margin:0px;
padding:0px 40px 0px 40px;
background-color:#eee;
}
/*Nav One styles*/
nav#navOne
ul {
width:100%;
min-width:640px;
height:25px;
margin:0px auto;
padding:0px;
background-image:url(/blast/images/navOneBg.png);
border-radius:0px 0px 8px 8px;
text-align:right;
float:right;
}
nav#navOne
ul li {
position:relative;
display:inline;
margin: 0px 0px 0px 10px auto;
padding:3px 0px;
border-left:1px #0b4c8f solid;
line-height:23px;
}
nav#navOne
ul li:last-child {
margin-right:10px;
}
.arrowDown {
margin: auto;
font-family:Tahoma, Geneva, sans-serif;
font-size:.7em;
color:#FFF;
padding: 0px 5px 0px 0px;
}
nav#navOne
ul li a {
margin: 0px auto;
padding: 4px 10px 4px 15px;
font-family:Tahoma, Geneva, sans-serif;
font-size:.7em;
color:#FFF;
border-left:1px #5d9ee0 solid;
text-decoration:none;
line-height:23px;
}
/*Nav One rollover*/
nav#navOne
ul li ul {
display:none;
background-image:none;
}
nav#navOne
ul li:hover
ul {
display:block !important;
}
nav#navOne
ul li:hover nav#navOne
ul li ul li {
background-color:#69C !important;
left:0px;
top:26px;
z-index:10;
}
h1 {
float:left;
width:158px;
text-indent:-9999px;
background-image:url(/blast/images/logo.png);
background-repeat:no-repeat;
}
#search {
float:right;
width:280px;
margin:0px;
padding:0px;
}
/*Nav Two styles*/
nav#navTwo h3 {
display:inline;
}
nav#navTwo
ul {
width:100%;
height:50px;
margin:0 auto;
padding:0px;
border:1px solid red;
clear:both;
}
nav#navTwo
ul li {
display:inline;
border: 1px solid green;
margin-top:20px;
}
<header>
<nav id="navOne">
<ul>
<li><a href="#">Sign In</a></li>
<li><a href="#">Register</a></li>
<li><a href="#">Print Page</a></li>
<li id="glossary"><a href="#">Glossary</a>
<ul>
<li><a href="#">Item Placeholder</a></li>
<li><a href="#">Item Placeholder</a></li>
<li><a href="#">Item Placeholder</a></li>
<li><a href="#">Item Placeholder</a></li>
<li><a href="#">Item Placeholder</a></li>
<li><a href="#">Item Placeholder</a></li>
</ul>
</li>
<li><a href="#">Text Size: A A A</a></li>
<li><a href="#">Select Your Location</a> <span class="arrowDown">˅</span></li>
</ul>
</nav><!--/navOne-->
<h1>Logo</h1>
<div id="search">
<form action="?" method="get">
<fieldset>
<input type="text" id="searchField">
<input type="submit" id="searchSubmit" value="Submit">
Search:<label for="radioHere">here</label>
<input type="radio" id="radioHere" name="here" value="here">
<label for="radioWeb">the web</label>
<input type="radio" id="radioWeb" name="the web" value="the web">
</fieldset>
</form>
</div><!--/search-->
<nav id="navTwo">
<ul>
<li><h3>Residential:</h3></li>
<li>TV</li>
<li>Internet</li>
<li>Phone</li>
<li>Pricing</li>
<li class="navTwoSelected">Music</li>
<li>Order</li>
<li>Billing</li>
<li>Support</li>
<li>|</li>
<li>Business</li>
<li>About Us</li>
</ul>
</nav><!--/navTwo-->
<nav id="navThree">
<ul>
<li>Today</li>
<li>Watch</li>
<li>Surf</li>
<li>Play</li>
<li class="navThreeSelected">Listen</li>
<li>Learn</li>
<li>Local</li>
</ul>
<h3>Tools:</h3>
<ul>
<li>Webmail</li>
<li>Account</li>
<li>Billing</li>
<li>Order Services</li>
</ul>
</nav><!--/navThree-->
<nav id="navFour">
<h3>Your are here:</h3>
<ul id="breadcrumbs">
<li>Residential ></li>
<li>My Place ></li>
<li>Listen ></li>
<li class="currentPage">Music</li>
</ul>
</nav><!--/navFour-->
</header>
