Question

我一直在玩试图获得一个下拉导航列表来显示我想要的方式。我已设法让它显示在悬停上，这是我想要的但我想要做的是嵌套悬停下拉列表出现在其父链接下方的中心，两侧有一点点填充。希望这是有道理的，我已经放了一个jsfiddle来向你展示它当下的样子。

＆＃13;

.main-nav {
  background: #718373;
  text-transform: capitalize;
  margin-top: 2%;
}

nav ul {
  list-style: none;
  text-align: center;
}

nav li {
  position: relative;
  display: inline-block;
  margin-right: 5%;
  padding: 2%;
}

nav li a {
  text-decoration: none;
  color: #fff;
}

nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  background: #718373;
}

nav ul ul li {
}

nav li:hover ul {
  display: block;
}

.row {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
  text-align: center;
}

.row {
  zoom: 1; /* For IE 6/7 (trigger hasLayout) */
}

.row:before,
.row:after {
  content:"";
  display:table;
}

.row:after {
  clear:both;
}

＆＃13;

 <div class="main-nav">
   <div class="row">
     <nav>
       <ul>
         <li><a href="#">About</a>
           <ul>
             <li><a href="#">one</a></li>
             <li><a href="#">one</a></li>
             <li><a href="#">one</a></li>
           </ul>
         </li>
         <li><a href="#">Diary</a></li>
         <li><a href="#">Lessons</a></li>
         <li><a href="#">Events</a></li>
         <li><a href="#">Gallary</a></li>
         <li><a href="#">Content</a></li>
       </ul>
     </nav>
   </div>
</div>

＆＃13;

非常感谢

Answer 1

<!DOCTYPE html>
<html>
<head>
<style>
ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

li a:hover, .dropdown:hover .dropbtn {
    background-color: red;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>

<ul>
  <li><a class="active" href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>

<h3>Dropdown Menu inside a Navigation Bar</h3>
<p>Hover over the "Dropdown" link to see the dropdown menu.</p>

</body>
</html>

我在http://www.w3schools.com/css/css_navbar.asp找到了这个。希望它对你有用。

Answer 2

ul个元素上有默认的padding-left（或margin-left）属性集。您必须先清除该属性，然后根据需要在li元素上设置填充。

如果您希望子菜单位于absolute位置relative的父级li，请注意left和right值以使其居中。

Css修改：

nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  background: #718373;
  padding: 0; 
  margin: 0; 
  left: 0; right: 0; 
}

nav ul ul li {
  padding: 8px 10px;
}

Updated fiddle

下拉导航列表

2 个答案: