Problem with Sprite drop down menu

HTML & CSS
1

Hello everyone,
I generally can figure things of this nature out by myself, but in this case I need external help.

I’m using a sprite image for my navigation on Example site. For some reason when I try to create a drop down nav list off this menu it just doubles my images at the top instead of dropping them down. Please someone tell me what Im doing wrong. I don’t have this live just yet, but Im playing around with it in dreamweaver on the liveview.

Any help is appreciated.

Here is my html code.


<ul id="nav">
    <li><a id="nav-home" href="#">Home</a></li>
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
         </ul>
    <li><a id="nav-about" href="#">About</a></li>
    <li><a id="nav-blog" href="#">Blog</a></li>
    <li><a id="nav-contact" href="#">Contact</a></li>
    <img src="images/slices/right_filler.jpg" />
    </ul>

Here is my css


#nav {
    padding: 0px 0px 0px 0px;
    position:relative;
    left:270px;
    margin: 0px 0px 0px 0px;
    list-style: none;
    width: 720px;
    height: 195px;
    overflow: hidden;
    float:right;
}

#nav li {
    float: left;
}

#nav a {
    display: block;
    background-image:url(../images/nav_sprite_full.jpg);
    padding-top: 195px; /* same as height of #example-nav */
    text-decoration: none; /* needed for IE8 beta, otherwise it still shows the underlines */
}

#nav-home {
    width: 87px;
}
#nav-home:hover {
    background-position: -360px 0px;
}

#nav-about {
    width: 95px;
    background-position: -90px 0;
}
#nav-about:hover {
    background-position: -450px 0px;
}
#nav-blog {
    width: 90px;
    background-position: -188px 0;
}
#nav-blog:hover {
    background-position: -548px 0px;
}
#nav-contact {
    width: 76px;
    background-position: -280px 0;
}
#nav-contact:hover {
    background-position: -640px 0px;
}

            
ul#nav li ul li a {
    background-image: none;
    text-indent: 0;
    padding: 0 0 0 25px;
    height: auto;
    width: auto;
}
ul#nav li ul li {
    float: none;
    height: auto;
    display: block;
    margin: 0 0 10px 0;
}
ul#nav li ul li a:hover {
    background-color:#666;
    color:#fff;
    border-top: 1px solid #999;
    border-bottom: 1px solid #999;
}

ul#nav li ul {
    display: none;
    position: absolute;
    width: 179px;
    padding: 15px 10px 0 10px;
    background: url(images/dropdown.png) left bottom no-repeat;
    left: 0;
    margin: 0;
}

ul#nav li>ul {
    top: auto;
    left: auto;
}

ul#nav li:hover ul, ul#menu li.over ul {
    display: block;
    left: auto;
}
*:first-child+html ul#nav li:hover ul,
*:first-child+html ul#nav li.over ul {
    position: static;
}
2

Using liveview may be your only problem. I’m running FF 3.5 and the nav seems to work just fine.

Liveview gives you a “decent approximation” of what your page will look like, therefore it’s useful when you’re writing your XHTML to create your site structure, and it’s also fine after the appearance is all hammered out and you’re simply pushing content to pages. It is pretty useless when you’re designing your CSS though. The only way to do that is to make a change and check it in all your test browsers, make another tweak and check it, etc. The more you understand what you’re doing, you can cheat that a little, but the more work you do in between checks means the more work you have to undo and test piece by piece when something breaks (and it only has to break in one browser to freeze all your CSS development until the issue is resolved.)

3

Hi Welcome to Sitepoint :slight_smile:

Your nav structure is invalid as the nested list needs to be contained within a list pair like this:


<ul id="nav">
    [B]<li><a id="nav-home" href="#">Home</a>[/B]
        <ul>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
            <li><a href="#">Test</a></li>
        </ul>
[B]    </li>[/B]
    <li><a id="nav-about" href="#">About</a></li>
    <li><a id="nav-blog" href="#">Blog</a></li>
    <li><a id="nav-contact" href="#">Contact</a></li>
    <img src="images/slices/right_filler.jpg" />
</ul>

All content in a list (including nested lists) must be between opening and closing li tags.

You also have overflow:hidden on #nav which will most likely hide the dropdown when it pops out so remove it unless you are planning something that requires it.:slight_smile: