SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    647
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,382
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

    Code:
    ------------------------------------------------------*/
    #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;
        float:left;
        background:#b20000;
        width:661px;
        padding-left:27px;
        position: relative;
        left:-6px;
    margin:0;
        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{
        position:absolute;
       display:block;
        margin-left:-999em;
        left:0;
    }
    #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.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    647
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

    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

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,382
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    If you want it as a dropdown and not a dropline then try something like this:

    (Changes in bold)
    Code:
    #mainnav ul li ul{
        position:absolute;
        margin-left:-999em;
        left:auto;
    }
    #mainnav ul li:hover ul{
        margin:0;
        width:auto;
    }
    
    #mainnav ul li li{clear:left;width:auto}

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    647
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,382
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Try setting the nested ul to with:auto and not floating the nested list.
    e.g.
    Code:
    
    #mainnav ul li ul {
      font-size: 12px;
      margin:0;
      padding: 0;
        width:auto;
    }
    #mainnav ul li li {
        margin:0;
        float:none;
    display:block;
    }


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •