IE Css dropdown menu problem_问答_开发者_运维开发者技术经验分享

So i have an issue with a CSS dropdown menu being displayed wrong in IE. In other browsers it works like it should.

    <body>
<div id="container">
    <header>        
        <div id="hlogo">
            <a href="index.html">title</a>
        </div>
        <nav id="hmenu">
            <ul>
                <li>
                    <a href="menu1.html">menu1</a>
                </li>
                <li>
                    <a href ="menu2.html">menu2</a>
                    <div id="items" class="hiddenMenu">
                        <a href="submenu1.html">submenu1</a>
                        <a href="submenu2.html">submenu2</a>
                        <a href="submenu3.html">submenu3</a>
                        <a href="submenu4.html">submenu4</a>
                    </div>
                </li>
                <li>
                    <a  href ="menu3.html">menu3</a>
                </li>
                <li>
                    <a  href ="menu4.html">menu4</a>
                </li>
            </ul>
            </nav>
    </header>

    <section id="container-body">
        <div id="content">



        </div>
    </section>
</div>

So this is my complete HTML. It has a layout provided by the following css.

    /* layout styles */
*{margin:0;padding:0;font-family:Arial;}
header{overflow:hidden;}
body{background-color:#cc3333;}
a {display: inline-block;font-weight: bold;text-decoration:none;}

footer {
    display:block;
    position:relative;
    width:100%;
}
footer > #disclamer {

    margin-left: auto;
    margin-right: auto;
    width: 200px;
    padding-bottom:5px;
    font-size:small;
    font-weight: bold;
}
#container{
    background-color:#ffffff;
    margin:auto;
    min-width:756px;
    width:60%;
    overflow:hidden;
    border:solid 2px #666666;
    margin-top:10px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.6);
}

#hlogo {float:left;height:105px;width:181px;padding:10px;}
#hlogo a{background-position: 0px 0px;float:left;display:inline;height:105px;text-indent:-999999em;width:181px;}
#hlogo a{background-image:url('../images/logo.png');background-repeat:no-repeat;overflow:hidden;}

#hmenu{margin-top:45px;padding:10px;}

nav {
    list-style:none;
    display:inline;
    float:right;
}
nav ul{
    list-style: none;
    text-align:center;
    background-color:#666666;
    float:left;

}
nav ul li {
    width:128px;
    float:left;
    display:inline-block;
}
nav ul li:hover{
    background-color:#cc3333;
    cursor:pointer;
}
nav ul li a {
    color:#ffffff;
    padding:10px;
}

nav ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer
}

section {margin:10px;}

#container > header {display:block;}

#container-body {
    background-color:#ececec;
    height:600px;
    display:block;
    overflow:auto;
}

#container-body  > #content {
    margin: 10px;
    height:95%;
    position:relative;
}
    .hiddenMenu 
{
    position:absolute;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.25);
    cursor: pointer;
    width: inherit;
}
.hiddenMenu > a
{
    position:relative;
    text-align: left;
    clear:both; 
    font-size:0.75em;   
}


nav li .hiddenMenu > a
{
    display:none;
}
/*nav li:hover .hiddenMenu  > a
{
    display:block;
}*/

nav li .hiddenMenu  > a:hover
{
    background-color:#cc3333;   
    cursor:pointer;
    border: 1px black solid;
}

This is the full CSS.

This is the CSS i use. Now in firefox it works as it should. The menu is show when i hover the menu2 item. On IE it shows the first submenu item (submenu1) and then it is cleared so i can't even click it.

I can't see what i'm doing wrong so if you can help me i would appreciate it. Thanks!

edit: added code.

The header tag has an overflow:hidden attribute; if i set that to visible it will show the complete menu but will mess up my layout completely. Is there a way around it or am开发者_JAVA技巧 i doing something wrong?

Also, i have a jquery script to set the display on the menu to none/block accordingly but in IE if i hover on the submenu items the menu will still be hidden. Why does this happen?

In my experience IE gets a bit buggy when you don't set the positions of an absolute positioned object. Like top: 0 and left: 0 for instance.

Edit: Also, parent of the absolute positioned object should have position: relative; if the position should be using the parent dimensions as a starting point.

Edit2: li:hover doesn't work in IE6 I think. Can't remember about IE7. One of them will only accept a:hover, and browsers below maybe none of them. jQuery solves things like that though.

Edit3: I don't know what the nav stuff is, I haven't jumped to HTML5 so I don't know if it's relevant later. But anyway I've made something that works of your code.

Script (jquery):

$(document).ready(function () { 
  $('#hmenu ul li').hover(function () { 
    $(this).children('div').css('display', 'block'); 
  }, 
  function () { 
    $(this).children('div').css('display', 'none'); 
  }); 
});

CSS:

#hmenu {
    list-style: none;
    display: inline;
    float: right;
}

#hmenu ul {
    list-style: none;
    text-align: center;
    background-color: #666666;
    float: left;
}

#hmenu ul li {
    width: 128px;
    float: left;
    position: relative;
    display: inline-block;
}

#hmenu ul li:hover {
    background-color: #cc3333;
    cursor: pointer;
}

#hmenu ul li a {
    color: #ffffff;
    padding: 10px;
}

#hmenu ul {
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer
}

.hiddenMenu {
    display: none;
    position: absolute;
    top: 60;
    left: 0;
    z-index: 150;
    background: #222 url('../images/overlay.png') repeat-x;
    color: #fff;
    text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.25);
    cursor: pointer;
    width: inherit;
}

(sorry for the formatting, bit new to this, but you can apply source formatting in your editor I guess. I changed the navs to have the id and changed the HTML nav to be div. That's it.

HTML:

<div id="hmenu">
    <ul>
        <li>
            <a href="menu1.html">menu1</a>
        </li>
        <li>
            <a href="menu2.html">menu2</a>
            <div id="items" class="hiddenMenu">
                <a href="submenu1.html">submenu1</a>
                <a href="submenu2.html">submenu2</a>
                <a href="submenu3.html">submenu3</a>
                <a href="submenu4.html">submenu4</a>
            </div>
        </li>
        <li>
            <a href="menu3.html">menu3</a>
        </li>
        <li>
            <a href="menu4.html">menu4</a>
        </li>
    </ul>
</div>

You cannot have a tag named nav change it to div and try again.