Question

我很难让下拉列表看起来很好，因为它搞乱了CSS

DEMO.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>

DEMO.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，但它们都不起作用。

Answer 1

您的问题在于ul，默认情况下需要一些余量。您可以单独重置它。

尝试添加此

ul.dropDown{
    margin:0px;
}

<强> Fiddle

使用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();
    });

或只是

{{1}}

<强> Fiddle

Answer 2

当您在CSS中使用星号（*）作为选择器时，您正在选择页面上的每个元素！这是很多选择。幸运的是，CSS提供了一种仅选择特定元素的方法。

例如，您要选择的只是页面上的<ul>，对吧？按照此模式选择选择器：parent child{margin:0px;}要实现此目的，您可以执行以下操作：#nav_menu ul.dropDown{margin: 0px;}。

那应该解决你的问题！

CSS边距和填充问题

2 个答案: