The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

Problems with my dropmenu in IE6

  • # February 23, 2010 at 12:43 pm

    I am creating my first fully developed wordpress themed site but i am having problems getting my main navigation to work properly in IE6.
    The primary nav is fine but the sub-nav on :hover (Urban-Fit) does not display in IE6.
    I believe this is an issue with IE6 not recognizing :hover but i dont know how to sort the CSS so it works.

    I am not confident with css menu structure so i used the PureCss Menu generator for speed.

    /*CSS MENU */
    ul.pureCssMenu ul{display:none}
    ul.pureCssMenu li:hover>ul{display:block}
    ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
    ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
    ul.pureCssMenu {margin:0;list-style:none;padding:0px 2px 2px 0px;background:none;}
    ul.pureCssMenu ul { margin:0;list-style:none;padding:0px 2px 2px 0px;background-color: #1B1B19;background-repeat:repeat; border:1px solid #333;}
    ul.pureCssMenu table {border-collapse:collapse}
    ul.pureCssMenu {display:block;zoom:1;float:right; clear:both;position:relative;z-index:200;}
    ul.pureCssMenu ul{width:auto;}
    ul.pureCssMenu li{display:block;margin:2px 0px 0px 2px;font-size:0px;text-shadow:2px 2px 2px #000;}
    ul.pureCssMenu a:active, ul.pureCssMenu a:focus {outline-style:none;}
    ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
    display:block;vertical-align:middle;text-align:left;text-decoration:none;padding:2px 6px 2px 10px;_padding-left:0;font-size:14px;color: #9bc942;text-decoration:none;cursor: pointer;}
    ul.pureCssMenu span{overflow:hidden;}
    ul.pureCssMenu li {float:left;}
    ul.pureCssMenu ul li {float:none;}
    ul.pureCssMenu ul a {padding:6px 10px 4px 10px;text-align:left;white-space:nowrap;}
    ul.pureCssMenu li.sep{text-align:left;padding:0px;line-height:0;height:100%;}
    ul.pureCssMenu li.sep span{float:none; padding-right:0;width:3px;height:100%;display:inline-block;background-color:#cccccc #111111 #111111 #cccccc;background-image:none;}
    ul.pureCssMenu ul li.sep span{width:100%;height:3px;}
    ul.pureCssMenu li:hover{position:relative;}
    ul.pureCssMenu li:hover>a{color: #9bc942;text-decoration:none;}
    ul.pureCssMenu li a:hover{position:relative;color: #FFFFFF;text-decoration:none;}
    ul.pureCssMenu li.dis a {color: #666 !important;}
    ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;height:16px;}
    ul.pureCssMenu ul img {width:16px;height:16px;}
    ul.pureCssMenu img.over{display:none}
    ul.pureCssMenu li.dis a:hover img.over{display:none !important}
    ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
    ul.pureCssMenu li:hover > a img.def {display:none}
    ul.pureCssMenu li:hover > a img.over {display:inline}
    ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
    ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
    ul.pureCssMenu a:hover ul{display:block}
    ul.pureCssMenu span{display:block;background-image:url(./images/arr_white.gif);background-position:right center;background-repeat: no-repeat;padding-right:12px;}
    ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif); overflow:visible}
    ul.pureCssMenu a:hover span{_background-image:url(./images/arrv_white.gif)}
    ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}

    All help is greatly appreciated.


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed