Question

我是CSS的新手，HTML并试图理解lists.however让我感到困惑。你可以在下面看到我的HTML我正在尝试创建一个下拉导航栏。我不明白为什么会显示属性不适用于单个li元素。

 
.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden {display:none;}
.home:hover .hidden{display:block;}
.hidden a:hover{background-color: #f1f1f1;}

 
<body>
<ul class="block1">  
  <li class="home"><a href="#">Home</a>
 
   <li class="hidden">
  <a  href="#">contact us</a>
    </li>
  
  <li><a href="#">about</a><li>
  <li><a href="#">Investor</a></li>
  <li> <a href="#">what we do</a></li>
  </li>
   </ul> 

</body>

Answer 1

以下是您应该使用的新css：

.block1{background-color:#736570;margin:0px;}
ul a {color:white;}
ul li{list-style-type: none; padding:5px;}

.hidden{display:none;}
.home:hover + .hidden{display:block;}
li:hover{background-color: #f1f1f1;}

然后你的HTML应该是这样的：

<body>
<ul class="block1">  
<li class="home"><a href="#">Home</a></li>

   <li class="hidden" >
  <a  href="#">contact us</a>
    </li>

  <li><a href="#">about</a></li>
  <li><a href="#">Investor</a></li>
  <li> <a href="#">what we do</a></li>
   </ul> 

</body>

你的html没有错，只是一个不匹配<li>，以及你要查看此帖子的CSS：Using only CSS, show div on hover over <a>

这是JSFiddle：Example of OP Code

Answer 2

我不明白为什么显示属性不会起作用单一元素。

类.home的div不是类hidden的li标记的父级。因此，它永远不会触发悬停。每当你在一个父容器上触发一个悬停时，它就会涓涓细流并找到它的子节点并做一些样式。

在您的情况下，您尝试使用display:none隐藏li并通过悬停显示它。

考虑下面的代码段，每当您将鼠标悬停在父容器上时，都会显示li标记。（下面的方法不会为您提供下拉菜单，但它会让您了解如何在悬停时更改显示属性）

.block1 {
  background-color: #736570;
  margin: 0px;
}

ul a {
  color: white;
}

ul li {
  list-style-type: none;
  padding: 5px;
}

.hidden {
  display: none;
}

.block1:hover .hidden {
  display: block;
}

.hidden a:hover {
  background-color: #f1f1f1;
}

.home

<html>

<body>
  <ul class="block1">
    <li class="home"><a href="#">Home</a>

      <li class="hidden">
        <a href="#">contact us</a>
      </li>

      <li><a href="#">about</a>
        <li>
          <li><a href="#">Investor</a></li>
          <li> <a href="#">what we do</a></li>
        </li>
  </ul>

</body>

</html>

无法在li元素上应用显示属性

2 个答案: