0

ドロップダウン リストが CSS で台無しになっているため、見栄えを良くするのに苦労しています。

デモ.HTML :

<html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="demo.css">
<style>
li{
    display: block;
}
</style>
</head>

<body>
    <div id='wrap'>
        <div id="clickable_div">MENU</div>
            <div id="nav_menu">
                <ul class="dropDown">
                    <li id="li_1"><img src="images/ori_12.png"></li>
                    <li id="li_2"><img src="images/ori_14.png"></li>
                    <li id="li_3"><img src="images/ori_15.png"></li>
                    <li id="li_4"><img src="images/ori_16.png"></li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>

        $('#wrap').mouseover( function(){
            $('#nav_menu').slideDown();
        });
        $('#wrap').mouseleave( function(){
            $('#nav_menu').slideUp();
        });
        $('#nav_menu li img')
        .mouseover(function () {
            this.src = this.src.replace('/ori_', '/hover_');
        })
        .mouseout(function () {
            this.src = this.src.replace('/hover_', '/ori_');
        });

    </script>
</html>

デモ.CSS :

#clickable_div {
    width: 166px; 
    background-color: #9c9c9c;
    display: block;
}
#nav_menu {
    width: 166px; 
    height: auto; 
    background-color: #CCC; 
    display: none
}
//*{padding:0;margin:0} This will achieve what I want but eventually all my other elements on the same page will have no padding and margin
#wrap { 
    width: 166px;
}

コードをコピーすると、ドロップダウン メニューが台無しになっていることがわかります。を使用して修正できますが*{padding:0;margin:0}、同じページの他のすべての要素にはパディングとマージンがなく、これは明らかに望ましい出力ではありません。などのすべての要素のパディングとマージンを 0 に設定しようとしましたが#wrap、#nav_menuどれも機能しません。

4

2 に答える 2

1

あなたの問題は、ulデフォルトでいくらかのマージンを取ることにあります。個別にリセットできます。

これを追加してみてください

ul.dropDown{
    margin:0px;
}

フィドル

さらに、マウスをホバリングしたり外したりしている間のメニューの遷移の問題は、を使用して解決できstop()ます。mouseleavemouseentermouseover

   $('#wrap').mouseenter( function(){
        $('#nav_menu').stop(true, true).slideDown();
    }).mouseleave( function(){
        $('#nav_menu').stop(true, true).slideUp();
    });

あるいは単に

     $('#wrap').on( 'mouseenter mouseleave', function(){
        $('#nav_menu').stop(true, true).slideToggle();
    });

フィドル

于 2013-09-26T02:19:05.197 に答える
1

アスタリスク (*) を CSS のセレクターとして使用すると、ページ上のすべての要素が選択されます! それは選択することがたくさんあります。幸いなことに、CSS には特定の要素のみを選択する方法が用意されています。

たとえば、選択したい<ul>のはページ上の だけですよね? セレクターについては、次のパターンに従います。parent child{margin:0px;}これを希望どおりにするには、次のようにします#nav_menu ul.dropDown{margin: 0px;}。

それはあなたの問題を解決するはずです！

于 2013-09-26T02:25:41.797 に答える