Grow your CSS skills. Land your dream job.

CSS Drop Down Menu IE6 & IE7 issues

  • # January 8, 2010 at 7:29 pm

    Hi I am working on a website I just followed Chris’ tutorial on creating a http://css-tricks.com/simple-jquery-dropdowns/ CSS & jQuery drop down menu its working fine in all browsers except IE6 and IE7.

    In IE7 there seems to be a horizontal scroll bar which is strange. In IE6 the same thing is happening but on the drop down menu links its inheriting some background style. When you hover over the link you get an orange background which I have set the background:none but its still inherting the style I dont know how to get rid of it.

    You can take a look at the site here: [url="http://publishingcomics.cyberpunkstudio.net/"http://publishingcomics.cyberpunkstudio.net//url

    The HTML:

    The CSS:

    Code:
    #menu_wrap {
    height:45px;
    background:url(images/menu-bk.gif) repeat-x scroll center top;
    font-weight:bold;
    font-size:1.5em;
    font-family:Comic Sans MS,Comic Sans, cursive;
    text-transform:uppercase;
    }
    div#menu {
    width:973px;
    min-height:1%;
    margin:0 auto;
    padding:0;
    }
    div#menu:after {
    content:’.’;
    display:block;
    clear:both;
    height:0;
    visibility:hidden;
    }
    div#nav_wrap {
    float:right;
    height:39px;
    padding:0;
    margin:0 0 0 40px;
    }

    /* Level One */
    ul.dropdown{
    position:relative;
    padding:3px 0;
    z-index:1;
    }
    ul.dropdown li{
    float: left;
    zoom: 1;
    padding:8px 0 6px 0;
    background:transparent url(images/ul-li-a-bk.gif) no-repeat scroll right bottom;
    }
    ul.dropdown li a{
    display: block;
    padding: 0 10px;
    color: #222;
    }
    ul.dropdown li.hover,
    ul.dropdown li:hover{
    position: relative;
    color: black;
    background: #F6C66B;
    }
    ul.dropdown li.hover a {
    color: black;
    }

    /* Level Two */
    ul.dropdown ul{
    position:absolute;
    top:100%;
    right:0;
    padding:10px 10px 6px 10px;
    white-space:nowrap;
    visibility:hidden;
    text-align:right;
    background:transparent url(images/ul-li-ul-li-bk.jpg) repeat-x scroll 0 0;
    }
    ul.dropdown ul li{
    float: none;
    display:block;
    padding:0 0 5px 0;
    font-weight: normal;
    color: #000;
    background:none;
    }
    ul.dropdown ul li a{
    width: 100%;
    display: inline-block; /* IE 6 & 7 Needs Inline Block */
    margin:0;
    padding:0;
    font-weight:bold;
    }
    ul.dropdown li ul li:hover {
    position: relative;
    background:none !important;
    }
    ul.dropdown li ul li a:hover{
    background:transparent !important;
    }

    Hope you can help me with the above.

    Thanks

    # January 9, 2010 at 1:26 pm

    I could not see the problem you are describing, the drop down menu looks the same in Firefox and Safari on Mac and on 2 different versions of IE6, IE7, IE8, Firefox and Safari on a PC.

Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".