www.webdeveloper.com
Results 1 to 2 of 2

Thread: CSS Menu Issue

  1. #1
    Join Date
    Mar 2011
    Posts
    6

    CSS Menu Issue

    I have a CSS menu for a site I am working on. In IE7 the drop down menus show up behind the scrolling images. However, the drop downs work fine in IE8, Firefox, Chrome, Safari. Can any please help shine some light on how to fix this issue?

    The website is http://bluemaxtrucking.com/BlueMax/index.html

    CSS code for Navbar

    #pcm{display:none;}
    ul.navbar ul{display:none}
    ul.navbar li:hover>ul{display:block}
    ul.navbar ul{position: absolute;left:-1px;top:98%;}
    ul.navbar ul ul{position: absolute;left:98%;top:-2px;}
    ul.navbar,ul.navbar ul {
    margin:0px;
    list-style:none;
    padding:0px 2px 2px 0px;
    background-color:#06F;
    background-repeat:repeat;
    z-index:auto;
    }
    ul.navbar table {border-collapse:collapse}ul.navbar {
    display:block;
    zoom:1;
    height:21px;
    float: left;
    }
    ul.navbar ul{
    width:161px;
    z-index: 4;
    }
    ul.navbar li{
    display:block;
    margin:2px 0px 0px 2px;
    font-size:0px;
    }
    ul.navbar a:active, ul.navbar a:focus {
    outline-style:none;
    }
    ul.navbar a, ul.navbar li.dis a:hover, ul.navbar li.sep a:hover {
    display:block;
    vertical-align:middle;
    background-color:#06F;
    text-align:center;
    text-decoration:none;
    padding:2px 5px 5px 10px;
    _padding-left:0;
    font:normal 16px Arial, Helvetica, sans-serif;
    color: #FFF;
    text-decoration:none;
    cursor:default;
    }
    ul.navbar span{
    overflow:hidden;
    }
    ul.navbar li {
    float:left;
    }
    ul.navbar ul li {
    float:none;
    }
    ul.navbar ul a {
    text-align: left;
    white-space:nowrap;
    }
    ul.navbar li.sep{
    text-align:left;
    padding:0px;
    line-height:0;
    height:100%;
    }
    ul.navbar li.sep span{
    float:none; padding-right:0;
    width:3px;
    height:100%;
    display:inline-block;
    background-color:#808080; background-image:none;}
    ul.navbar ul li.sep span{
    width:100%;
    height:3px;
    }
    ul.navbar li:hover{
    position:relative;
    }
    ul.navbar li:hover>a{
    background-color:#DBF0F9;
    font:normal 16px Arial, Helvetica, sans-serif;
    color: #444;
    text-decoration:none;
    }
    ul.navbar li a:hover{
    position:relative;
    background-color:#DBF0F9;
    font:normal 16px Arial, Helvetica, sans-serifa;
    color: #444;
    text-decoration:none;
    }
    ul.navbar li.dis a {
    color: #557D4F !important;
    }
    ul.navbar img {border: none;float:left;_float:none;margin-right:2px;width:16px;
    height:16px;
    }
    ul.navbar ul img {width:16px;
    height:16px;
    }
    ul.navbar img.over{display:none}
    ul.navbar li.dis a:hover img.over{display:none !important}
    ul.navbar li.dis a:hover img.def {display:inline !important}
    ul.navbar li:hover > a img.def {display:none}
    ul.navbar li:hover > a img.over {display:inline}
    ul.navbar a:hover img.over,ul.navbar a:hover ul img.def,ul.navbar a:hover a:hover img.over{display:inline}
    ul.navbar a:hover img.def,ul.navbar a:hover ul img.over,ul.navbar a:hover a:hover img.def{display:none}
    ul.navbar a:hover ul{display:block}
    ul.navbar span{
    display:block;
    background-image:url(./images/arrv_white.gif);
    background-position:right center;
    background-repeat: no-repeat;
    padding-right:9px;}
    ul.navbar ul span{background-image:url(./images/arr_black.gif)}
    ul.navbar ul li:hover > a span{ background-image:url(./images/arr_white.gif);}
    ul.navbar table a:hover span{background-image:url(./images/arr_white.gif)}
    ul.navbar li.navbari0 {
    width:161px;
    height:40px;
    }
    ul.navbar li a.navbari0{
    height:100%;
    background-image:url(../images/menu_bar.jpg);

    font:normal 16px Arial, Helvetica, sans-serif;
    color:#fff;
    }
    ul.navbar li a.navbari0:hover{
    background-image:url(../images/hove_button.jpg);
    font:normal 16px Arial, Helvetica, sans-serif;
    color:#eee;
    }
    ul.navbarm0 {
    background-color:transparent;
    padding:0px 0px 0px 0px;
    }
    ul.navbarm0>li>a {
    padding:8px 10px 0px 10px;
    }
    ul.navbarm0 a {
    padding:8px 10px 0px 10px;
    }
    ul.navbarm0 ul a {
    padding:2px 5px 5px 10px;
    }
    ul.navbarm0>li {
    margin:0px 0px 0px 0px;
    }
    ul.navbarm0 li {
    margin:0px 0px 0px 0px;
    }
    ul.navbarm0 li li {
    margin:2px 0px 0px 2px;
    }

  2. #2
    Join Date
    Jan 2011
    Location
    America
    Posts
    32
    Make sure you have z-index correct where needed, and I wouldn't worry too much about IE7 users. Statistics show that not many people are using IE7 and IE7 users are still declining.

    P.S. You should add this property to the menu's links.
    cursor: pointer;
    The next generation image gallery - PicPods

    The future of the web - wcTutorials

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles