Question

我正在尝试制作一个水平显示为导航栏的列表，并且产品按钮会有一个下拉菜单。任何帮助将不胜感激，我已经尝试了几个小时不同的方法。我甚至在这个页面上搜索了其他例子，但我无法让它们满足我的需求。

.navbar li{
	list-style:none;
	position:relative;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: #666666;
}

.navbar li{
	float:right;
}

.navbar li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.navbar li a:hover {
	background-color: #000000;
}

<div>
<ul class="navbar">
  <li><a href="contact.html">Contact</a></li>
  <li><a href="#">Products</a>
  <ul>
  	<li><a href="#.html">List 1</a></li>
    <li><a href="#.html">List 2</a></li>
    </ul>
    </li>
  <li><a href="about.html">About</a></li>
  <li><a href="index.html">Home</a></li>
</ul>
</div>

Answer 1

如果你不使用bootstrap，你可以像下面这样实现它：

＆＃13;

.navbar li{
  list-style:none;
  position:relative;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #666666;
}

.navbar li{
  float:right;
}

.navbar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li a:hover {
  background-color: #000000;
}

.dropdown-content {
  display: none;
}

.dropdown:focus + .dropdown-content {
  display: block;
}

＆＃13;

<div>
  <ul class="navbar">
    <li><a href="contact.html">Contact</a></li>
    <li>
      <a href="#" class="dropdown">Products</a>
      <ul class="dropdown-content">
        <li><a href="#.html">List 1</a></li>
        <li><a href="#.html">List 2</a></li>
      </ul>
    </li>
    <li><a href="about.html">About</a></li>
    <li><a href="index.html">Home</a></li>
  </ul>
</div>

＆＃13;

Answer 2

在下面添加以下CSS。您希望确保将display：none设置为包含在下拉列表项中的无序列表。所以我给了它一个课程，以便我可以专门针对它。

然后当悬停在该列表项上时，我将无序列表设置为显示块，使其仅在悬停时出现。

然后我显示已屏蔽，并在无序列表中的列表项上关闭浮动，以便它们显示为已阻止。

.navbar li.dropdown ul {
display: none;
}

.navbar li.dropdown:hover ul {
display: block;
}

.navbar li.dropdown ul li {
display: block;
float: none;
}

嵌套列表下拉菜单HTML＆amp; CSS

2 个答案: