Suckerfish drop-down submenu not aligned with main menu

Question

I'm quite new with CSS so any help greatly appreciated. I'm currently using the Suckerfish script for my CSS menu, only because IE still exists. However, I can't get the second level menu to align directly under the first level -- not just IE, but Chrome and Safari as well.

I looked up solutions on this website, but I can't get them to work for my code...

Here's my CSS code (I'm sorry if it's messy):

#navbar {
 width: 900px;
 color: #a26868;
 font-size: 10px;
 padding: 10px 10px 10px 10px;
 float: left;
 background: #fff ; 
 }

#nav, #nav ul { 
    padding: 0px 15px 0px 15px;
    margin: 0;
    list-style: none;
    line-height: 18px;
}

#nav a {
    display: block;
    width: 140px;
}
#navbar li { 
   list-style: none;
   float: left; 
   padding: 0px 15px 0px 15px;
    display: block;
    width: 140px;
    text-align: center;
    height: 18px;
    background-image: url(line-nav.gif);
    background-repeat: no-repeat;
    background-position: center;
    text-decoration: none;
}
#navbar li a {
    text-decoration: none;
    color: #a26868;
}
#navbar li ul {  
    list-style: none;
    color: #5e0505;
    background-image: url(line-nav.gif);
    background-repeat: no-repeat;
    background-position: center;
    background: rgba(255,255,255,0.8);
    border-bottom: solid 1px #88c657;
    width: 140px;
    display: block;
    position: relative;
    left:-999em;
}

#navbar li:hover ul, #navbar li.sfhover ul { 
    left: 0;
}

And this is the HTML code:

<ul id="navbar">
    <li><a href="#">ABOUT</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">SHOWCASE</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">PORTFOLIO</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
    <li><a href="#">MEDIA</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
        <li><a href="#">CONTACT</a><ul>
        <li><a href="#">SUBITEM ONE</a></li>
        <li><a href="#">SUBITEM TWO</a></li>
        <li><a href="#">SUBITEM THREE</a></li></ul>
    </li>
</ul>

Please, any help greatly appreciated. Thank you so much!

score 0 · Answer 1 · answered Nov 11 '13 at 07:46

0

try this one,

#navbar li:hover ul, #navbar li.sfhover ul { 
    left:-50px;
}

http://jsfiddle.net/Yt66E/

answered Nov 11 '13 at 07:46

radha

782
4
8

Thanks for your reply, but I preferred not to adjust the left spacing with the -50px as it seems less flexible. – jade Nov 13 '13 at 04:54

score 0 · Answer 2 · answered Nov 11 '13 at 07:53

0

your sub menu ul has padding and li too so you need to remove these paddings like this:

edit this CSS:

#navbar li:hover ul, #navbar li.sfhover ul { 
    left: 0;
    padding:0;  /*  added  */
}

and add this CSS:

#navbar li li{
    padding:0;
}

jsFiddle is here

answered Nov 11 '13 at 07:53

Mohsen Safari

6,669
5
42
58

Thank you very much, this worked better than the first answer. – jade Nov 13 '13 at 04:53

Suckerfish drop-down submenu not aligned with main menu

2 Answers2