Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Problems with my dropmenu in IE6

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
    Posts
  • #28122
    Steven Gardner
    Participant

    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.

    http://www.urbandisturbancefife.com/fitness/

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

    Code:
    /*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.

    Steven

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.