Suckerfish Menu Not Working. Nested UL not displaying block

Posted by Brett on Stack Overflow See other posts from Stack Overflow or by Brett
Published on 2011-11-13T01:48:17Z Indexed on 2011/11/13 1:50 UTC
Read the original article Hit count: 348

Filed under:
|
|
|

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">&#x2C5;</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>

© Stack Overflow or respective owner

Related posts about css

Related posts about html5