1

水平サブメニューを持つ純粋な html/css メニューに取り組んでいますが、Internet Explorer でホバーが正しく機能しません。サブメニューにカーソルを合わせると消えます... Chrome と Firefox では、すべて正常に動作します。

ここに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;
 }
4

2 に答える 2

4

li は IE で適切な高さを取得していません。削除する必要があります

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

そして試してみてください。

これを試してください： http://jsfiddle.net/te5AU/4/

于 2013-05-03T11:08:47.700 に答える
2

こんにちは私は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;
     }

デモ

于 2013-05-03T11:12:26.263 に答える