Drop Down Menu Issue and Gap in IE7

Hello,

On my site I’m working on…

Brisco Test

I’m having some issues with my dropdown menu. It’s most likely cause I gave my UL a width I’m assuming. I’m using Wordpress and this is the Menubar plugin which has worked perfectly for me in the past. Is there a way I can fix this in the CSS easily without redoing majority of the menu and uninstalling the plugin…

The other issue is a frustrating issue in IE7 the little tab on the mainnav does not lineup nicely with everything you will notice a tad bit of a gab there.

Thanks,

Mike

Hi,

That menu looks pretty broken to me in all browsers so I’m not sure how it is supposed to look. I’m guessing its supposed to be a dropline menu.

I could get something working by making these changes.


------------------------------------------------------*/
#header{
    position:relative;
    height:69px;
    width:685px;
    /*margin:0px 0px 0px 240px;*/
    z-index:100000;
    background:url('http://godfatherrecords.com/briscomusic/wp-content/themes/briscomusic2/images/header-bg-V.png');
    /*top: 0px;
    right: 0px;*/
    margin-left: 240px;
}

#mainnav{
    /*width:450px;*/
    background:url('http://godfatherrecords.com/briscomusic/wp-content/themes/briscomusic2/images/mainnav-bg-v3.png') no-repeat top right;
    height:40px;
    float:right;
    margin-right:-4px;
    z-index:9999;
}

#mainnav ul{
    list-style:none;
    margin:0;
   [B] float:left;[/B]
    background:#b20000;
    width:661px;
    padding-left:27px;
    position: relative;
  [B]  left:-6px;[/B]
[B]margin:0;[/B]
    overflow: visible;
}

#mainnav ul li{
    margin:0px 0px 0px 1px;
    padding:0px;
    float:left;
    overflow: hidden;
}

#mainnav ul li a{
    color:#FFFFFF;
    text-transform:lowercase;
    display:block;
    height:26px;
    padding:5px 15px 0px 15px;
}

#mainnav ul li a:hover,#mainnav ul li.active a{
    text-decoration:none;
    background:#3C3C3C;
    color:#b20000;
}

#mainnav ul li.active ul li a:hover,#mainnav ul li.active ul li.active a{
    color:#2c2d2d;
}

#mainnav ul li ul{
    margin:0px 0px 0px 10px;
    padding:0px;font-size:12px;
}
#mainnav ul li ul{
[B]    position:absolute;
   display:block;
    margin-left:-999em;
    left:0;[/B]
}
#mainnav ul li:hover ul{
    margin:0 0 0 10px;
padding-right:15px
}




/* Subnav


Then removing all the ssf-blue.css as there are conflicts in there.

Of course you may have been trying to do something else and I misunderstood. That menu structure is a bit weird for what it does.

Thanks Paul did these changes and the dropdown menu is still functioning a bit weird… But I must say its better than before, think were almost there :slight_smile:

I’d like it to function like an actual dropdown menu so the child pages would drop below music.

Thank you for the help and hopefully we can get this working correctly must say your a saviour on this forum for many of us :slight_smile:

If you want it as a dropdown and not a dropline then try something like this:

(Changes in bold)


#mainnav ul li ul{
    position:absolute;
    margin-left:-999em;
  [B]  left:auto;[/B]
}
#mainnav ul li:hover ul{
    margin:0;
[B]    width:auto;[/B]
}

[B]#mainnav ul li li{clear:left;width:auto}[/B]


Thanks so much, seems to work nicely just one little bug I notice once you roll over and then roll off on off the childs the red bg expands for a quick second anyway that I can get red of that.

Try setting the nested ul to with:auto and not floating the nested list.
e.g.




#mainnav ul li ul {
  font-size: 12px;
[B]  margin:0;[/B]
  padding: 0;
[B]    width:auto;[/B]
}
[B]#mainnav ul li li {
    margin:0;
    float:none;
display:block;
}[/B]