HTML下拉菜单删除LI元素之间的空白答案

【问题标题】：HTML Dropdown Menu remove white space between LI elementHTML下拉菜单删除LI元素之间的空白
【发布时间】：2013-09-24 09:56:08
【问题描述】：

我使用图像作为下拉列表项，发现每个元素之间都有不必要的空白，因此想知道是否可以删除所有空白

<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">
</head>
<body>
    <div id='wrap'>
        <div id="clickable_div">MENU</div>
            <div id="nav_menu">
                <ul class="dropDown">
                    <li><img src="ori_12.png"></li>
                    <li><img src="ori_12.png"></li>
                    <li><img src="ori_12.png"></li>
                    <li><img src="ori_12.png"></li>
                </ul>
            </div>
        </div>
    </div>

</body>
<script>
        $('#wrap').mouseover( function(){
            $('#nav_menu').slideDown();
        })
        $('#wrap').mouseleave( function(){
            $('#nav_menu').slideUp();
        });

    </script>
</html>

下面是我的Demo.css：

#clickable_div {width:166px; background-color:#9c9c9c;}
*{margin:0; padding:0}
#nav_menu{width:166px; height:auto; background-color:#CCC;display:none;}

#wrap{ width:166px }

【问题讨论】：

您的 HTML 是否包含 DOCTYPE？如果不是，您将在“Quirks Mode”下工作，这主要是为了与为 IE5 编写的旧 Web 应用程序兼容，这意味着让 CSS 做一些跨浏览器可预测的事情并不是一项有趣的任务。将 HTML5 <!DOCTYPE html> 放在顶部（在打开的 <html> 标记之前），每个现代浏览器都会以大致相同的方式运行。

标签： jquery html css drop-down-menu

【解决方案1】：

 <style>
    li{
        display: block;
        border: 0px;
    }
</style>

添加此样式希望它会起作用

【讨论】：

我觉得border:0px没必要，谢谢你的回答！

【解决方案2】：

没有 jsfiddle 很难说，但我会添加 display:block;到li..中的图像..

【讨论】：