Question

一直试图按照指南介绍如何使用html / css / jquery创建一个简单的下拉菜单，但最终结果完全搞砸了，我根本不知道为什么。

出于某种原因，下拉菜单左侧有一个空白区域，我不知道它为什么存在或者我如何摆脱它...帮助将非常感激。

HMTL：

<html>
<head>

<meta charset="UTF-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="test.css">
</head>
<body>



<ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">About</a></li>
   <li><a href="#">Links</a>
      <ul>
         <li><a href="#">First </a></li>
         <li><a href="#">Second</a></li>
         <li><a href="#">Third </a></li>
         <li><a href="#">Fourth</a></li>
         <li><a href="#">Fifth</a>
             <ul>
               <li><a href="#">First</a></li>
               <li><a href="#">Second</a></li>
               <li><a href="#">Third</a></li>
               <li><a href="#">Fourth</a></li>
               <li><a href="#">Fifth</a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href="#">Examples</a></li>
   <li><a href="#">Contact</a></li>
</ul>

<div class="clr"></div>




<script src="jquery.js" type="text/javascript"></script>
<script src="test.js" type="text/javascript"></script>
</body>
</html>

CSS：

.clr {clear: both:}

ul {
   list-style: none;
}
ul li {
   float: left;
   position: relative;
}
ul li a {
   width: 118px;
   display: block;
   border: 1px solid #ddd;
   height: 50px;
   line-height: 30px;
   text-align: center;
   text-decoration: none;
   color: #1787cf;
   background: #fff;
}
ul li a:hover {
   background: #1787cf;
   color: #fff;
}
li ul {
   display: none;
}
li ul li {
   float: left;
}

li:hover > ul {

   position: absolute;
   top: 52px;
   left: 0;
   box-shadow: 0 2px 2px rgba(0,0,0,.2);
}
li ul li:hover > ul {

   position: absolute;
   top: 0;
   left: 120px;
   box-shadow: 0 2px 2px rgba(0,0,0,.2);
}

JQuery的：

(function(){


$('ul li').hover(function() {
    $(this).children('ul').slideDown();
    }, function() {
    $(this).children('ul').slideUp().css('display', 'none');
});
})();

Answer 1

UL和LI有default margin and padding您尚未删除。我假设你不想要父母或孩子。

ul, li{
    margin: 0;
    padding: 0;
}

Answer 2

删除子项目上的边距和填充。试试这个：

ul li ul,
ul li ul li {
    margin: 0;
    padding: 0;
}

Answer 3

尝试如下

    ul li ul, ul li ul li{
       margin: 0;
       padding: 0;
    }

在这里，是你的最新小提琴......

http://jsfiddle.net/5Z2QV/23/

CSS / Jquery下拉菜单无法正常工作

3 个答案: