0

ドロップダウンメニューに問題があります。開いたときにドロップダウンメニューが右に拡大します。マージン、パディング、白の値を確認しましたが、解決策が見つかりません。ここにライブサンプルがあります。

デモ

HTML：

<div id="header">  
   <div class="nav">
        <ul>
            <li><span class="home"></span><a href="#index.html">Lorem ipsum</a></li>
            <li><span class="department"></span><a href="#department.html" class="drop_down">Lorem ipsum</a>
                <ul id="submenu">
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Lorem ipsum</a></li>
                    <li><a href="#">Lorem ipsum</a></li>
                </ul>
            </li>
            <li><span class="index"></span><a href="#">Lorem ipsum</a></li>
        </ul>
    </div>
</div>

CSS：

#header .nav{background:green; height:42px;font-family:Arial;}
#header .nav ul{margin:0;padding:0;list-style:none;}
#header .nav ul li{float:left;padding:10px 20px 0 20px;border-right:solid 1px #ccc;height:32px;}
#header .nav ul li a{color:#fff;text-decoration:none;font-size:0.8em;}
#header .nav ul li span{height:17px;margin:3px 10px 0 0;float:left;}
#header .nav ul li span.home{background:url('../image/home.png') no-repeat left top;width:18px;}
#header .nav ul li span.department{background:url('../image/department.png') no-repeat left top;width:18px;}
#header .nav ul li span.index{background:url('../image/index.png') no-repeat left top;width:17px;}
#header .nav ul li span.recipe{background:url('../image/recipe.png') no-repeat left top;width:14px;}
#header .nav ul li span.car{background:url('../image/car.png') no-repeat left top;width:17px;}
#header .nav ul li a.drop_down{background:url('../image/arrow_down.png') no-repeat 50px 4px;width:17px;padding-right:14px;}
#header .nav ul li ul#submenu{position:absolute;display:none;margin:13px 0 0 -20px;border-top:solid 1px #ccc;}
#header .nav ul li ul#submenu li{clear:both;background:blue; height:42px;font-family:Arial;border-bottom:solid 1px #ccc;margin:0;padding:5px;width:100%;display:inline-block;}​

JS：

    $(function(){
        $(".drop_down").hover(
            function(){
                $("ul#submenu").stop(true,true).slideDown("slow",function(e){
                    $(this).hover(
                        function(){
                            $(this).show();
                        },
                        function(){
                            $(this).slideDown();
                        }
                    );
                });
            },
            function(){
                $("ul#submenu").stop(true,true).slideUp("slow");
            }
        );
    });​

</ p>

4

2 に答える 2

1

width: 100%;in#header .nav ul li ul#submenu liがこれを引き起こしているので、次のような修正幅を100px;指定します。これにより、拡張幅のバグが解決されます。

私のフィドル

于 2012-07-30T05:36:08.183 に答える
0

幅の値をパーセントではなく修正すると問題が解決しました。エイリアンさん、ありがとうございます。

于 2012-07-30T05:45:39.863 に答える