Question

所以，我试图为我的第一个网站制作一个漂亮的时尚CSS3菜单，但是我无法让这件事发挥作用:(我已尝试过不同的显示，位置，清晰：两者，所有类型的东西，没有任何事情完成。+我似乎无法使用该东西：

.subnav {
  display: none;
}
li:hover>subnav {
  display: block;
}

因此，我始终将其显示出来，并尝试正确定位，然后我会添加javascript以便在悬停时显示或尝试解决此问题，如果您可以帮助解决这两个问题。大。哦，我没有删除样式，以防其中一些干扰我试图实现的目标。这是html：

<nav>
 <ul>
   <li id="active">Menu1</li>
   <li>Menu2</li>
   <ul class="subnav">
     <li>Submenu</li>
     <li>Submenu</li>
     <li>Submenu</li>
   </ul>
   <li>Menu</li>
 </ul>
</nav>

和css：

nav {
  position: fixed;
  top: 0;
  width: 100%;
  background-color: white;
  height: 35px;
  opacity: 0.9;
}
nav ul {
  float: right;
  margin: 0px 5px 0 0;
}
nav li {
  display: inline-block;
  height: 35px;
  font-family: 'Varela Round', sans-serif;
  font-size: 20px;
  list-style: none;
  line-height: 35px;
  vertical-align: middle;
  padding: 0px 10px;
  background: #3498db;
  color: white;
}
#active {
  background: #34495e;
  color: white;
  opacity: 1;
}
.subnav{
  position: relative;
  top: 35px;
  display: inline-block;
  clear: both;
  top: 40px;
  width: inherit;
}

Answer 1

您需要将子视图放在li内，然后li:hover > .subnav才能正常工作。

li:hover > .subnav表示您正在li

下搜索.subnav

＆＃13;

.subnav {
  display: none;
}
li:hover> .subnav {
  display: block;
}

＆＃13;

<nav>
 <ul>
   <li id="active">Menu1</li>
   <li>Menu2
    <ul class="subnav">
     <li>Submenu</li>
     <li>Submenu</li>
     <li>Submenu</li>
   </ul>
   </li>
  
   <li>Menu</li>
 </ul>
</nav>

＆＃13;

为什么这个下拉菜单没有正确显示？

1 个答案: