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()，还请注意配对事件mouseleave不是mouseenter所以mouseover尝试

   $('#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 回答