帶有橫向子菜單的純html css菜單。將鼠標懸停不是在IE正常工作

蔭正與水平子純HTML/CSS菜單，但懸停沒有在Internet Explorer中正常工作。當您將鼠標懸停在子菜單上時，它會消失... 在Chrome和Firefox中，一切正常。帶有橫向子菜單的純html css菜單。將鼠標懸停不是在IE正常工作

這裏是一個jfiddle：

http://jsfiddle.net/te5AU/2/

這裏是代碼：

<div class="wrapper"> 
    <div class="menu-holder"> 
     <ul class="menu"> 
      <li><a href="#">item 1</a> 
      </li> 
      <li class="active"><a class="test" href="#">This is the one</a> 

       <ul class="submenu"> 
        <li><a href="#">Submenu item 1</a> 
        </li> 
        <li><a href="#">Submenu item 2</a> 
        </li> 
       </ul> 
      </li> 
      <li><a href="#">menu item 3</a> 
      </li> 
      <li><a href="#">menu item 4</a> 
      </li> 
     </ul> 
    </div> 
    <!-- menu-holder end --> 
</div>

這裏是CSS：

.wrapper { 
    width:500px; 
    height:500px; 
    background:grey; 
} 
.menu-holder ul { 
    margin: 2px 0 0px 25px; 
    padding: 0; 
    list-style-type: none; 
} 
.menu-holder ul li { 
    position: relative; 
    float: left; 
    padding: 0px 10px 0 10px; 
    margin: 0px 0px 100px 0px; 
    border-left: 1px dotted white; 
    line-height: 0px; 
} 
.menu-holder ul li:hover > a { 
    background-color: #025179; 
} 
.menu-holder ul li:hover ul { 
    display: block; 
} 
.menu-holder ul li a { 
    font-family: arial, sans-serif; 
    font-size: 12px; 
    font-weight: bold; 
    display: block; 
    color: white; 
    text-decoration: none; 
    padding: 15px 10px 15px 10px; 
    -webkit-border-radius: 5px 5px 0px 0px; 
    border-radius: 5px 5px 0px 0px; 
} 
.menu-holder ul li ul { 
    float: none; 
    display: none; 
    position: absolute; 
    top: 40px; 
    left: 0px; 
    margin: -1px 0 0px 10px; 
    padding: 5px 10px 5px 10px; 
    white-space: nowrap; 
} 
.menu-holder ul li ul:hover { 
    display: block; 
} 
.menu-holder ul li ul li { 
    position: static; 
    float: none; 
    display: inline; 
    padding: 5px 10px 5px 10px; 
    margin: 0px 0px 0px -10px; 
    background-color: #025179; 
} 
.menu-holder ul li ul li a { 
    display: inline; 
    margin: 0 0px 0 0px; 
    padding: 0px 10px 0px 10px; 
    font-weight: normal; 
    -webkit-border-radius: 0; 
    border-radius: 0; 
} 
.menu-holder ul li ul li:first-of-type { 
    -webkit-border-radius: 0px 0px 0px 5px; 
    border-radius: 0px 0px 0px 5px; 
} 
.menu-holder ul li ul li:last-of-type { 
    -webkit-border-radius: 0px 5px 5px 0px; 
    border-radius: 0px 5px 5px 0px; 
} 
.menu-holder ul li:first-of-type { 
    border-left: none; 
}

來源

2013-05-03 user1386906

IE的哪些版本的？ – 2013-05-03 10:56:59

IE – user1386906 2013-05-03 10:59:34

（使用小提琴）上IE9，8和7測試的每一個版本，無法重現您所描述的（儘管它有其他問題） – cernunnos 2013-05-03 11:06:24

李未得到適當的高度IE瀏覽器。 U應刪除

.menu-holder ul li { line-height: 0} //remove the css line-height: 0;

然後嘗試。

試試這個： http://jsfiddle.net/te5AU/4/

來源

2013-05-03 11:08:47 sven

是的！謝謝。就是這樣:)你怎麼這麼快找到解決方案？ :) – user1386906 2013-05-03 11:12:25

沒什麼快，我只是嘗試正常的調試，以檢查是否有高度或沒有李。很高興我可以幫助你。 :) – sven 2013-05-03 11:13:50

您好我有一些changing你CSS

.menu-holder > ul > li:hover > a { 
     background-color: #025179; 
    } 


    .menu-holder ul li ul { 
     float: none; 
     display: none; 
     position: absolute; 
    margin:0;  top: 30px;padding:0; 
     left: 10; 
     white-space: nowrap;font-size:0; 
    } 

    .menu-holder ul li ul li { 
     position: static; 
     float: none; 
     display: inline-block; 
     padding:0; 
     margin:0px;font-size:14px; 
     background-color: #025179; 
    } 
    .menu-holder ul li ul li a { 
     display:block; 
     margin: 0 0px 0 0px; 
     padding: 0 10px; 
     line-height:30px; 
     font-weight: normal; 
     -webkit-border-radius: 0; 
     border-radius: 0; 
    }

Demo

來源

2013-05-03 11:12:26

帶有橫向子菜單的純html css菜單。將鼠標懸停不是在IE正常工作

回答

相關問題