Html 悬停在非常用导航栏上（仅CSS）

我想做一个导航栏。我想当我在导航栏上悬停时会显示一个大的方块。然而，它没有起作用

这是我的html代码

<div id="outerContainer">
    <div id="header">
        <a id="logo" href="#"><img src="#"></a>
        <div id="nav">
            <div class="selectors"><a href="#">aaa</a></div>
            <div class="selectors"><a href="#">bbb</a></div>
            <div class="selectors"><a href="#">ccc</a></div>
            <div class="selectors"><a href="#">ddd</a></div>
        </div>
        
    </div>

    <div id="innerContainer">
        <div class="navHidden"></div>
        <div class="navHidden"></div>
        <div class="navHidden"></div>
        <div class="navHidden"></div>

        <div id="content"></div>
        
    </div>

我希望网络变得如下：

|.选择器|.选择器|.选择器|.选择器|

|导航隐藏…（仅在悬停时显示）|

我只能使用html和css，因为这是家庭作业

---

谢谢。

您的代码已经过修改，因此现在您已经拥有了所需的布局。但它并不完美我没有删除多余的规则。你自己做作业

HTML

<div id="header">
        <a id="logo" href="#"><img src="#"></a>
        <div id="nav">
            <div class="selectors">
                <a href="#">aaa</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">bbb</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">ccc</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
            <div class="selectors">
                <a href="#">ddd</a>
                <div class="navHidden">Lorem ipsum text</div>
            </div>
        </div>

    </div>

---

尝试用这种方法创建导航

  <style>
  ul, li {list-style: none; padding: 0; margin: 0; float: left;}
  li a{display: block; width: 100px; height: 40px;}
  li a:hover{display: block; width: 100px; height: 40px; background: red;}
  li ul {display: none;}
  li:hover ul {display: block;}
  </style>
  </head>
   <ul id="nav">
       <li class="selectors"><a href="#">aaa</a></li>
       <li class="selectors"><a href="#">bbbb</a>
            <ul id="innerContainer">
                <li class="navHidden">222</li>
                </li>
            </ul>
       </li>
  </ul>

ul，li{列表样式：无；填充：0；边距：0；浮点：左；}
LIA{显示：块；宽度：100px；高度：40px；}
LIA:悬停{显示：块；宽度：100px；高度：40px；背景：红色；}
li ul{显示：无；}
li：悬停ul{display:block；}




222

你所说的“大块”是什么意思？只要你的内部容器放在.selector之外，你就不能这样做。我假设您还希望为不同的.选择器显示不同的子导航。因此，您可以在每个.selectors元素中放置一个.innerContainer，然后在css中使用类似的内容：

.selectors:hover.innerContainer{display:block；}

#nav{
    position:relative;
    float:left;
    width:600px;
    padding-left:30px;
    padding-top:25px;
}

.selectors{
    width:150px;
    position:relative;
    float:left;
    margin:0;
    z-index:10px;
}

.selectors:hover{
    border-bottom-color:silver;
    background-color:silver;
}
.navHidden{
    width:760px;
    height:100px;
    background-color:silver;
    position:absolute;
    z-index:10;
    display:none;
    top: 100%;
    left: 0;
}
.selectors:hover .navHidden {display: block;}

  <style>
  ul, li {list-style: none; padding: 0; margin: 0; float: left;}
  li a{display: block; width: 100px; height: 40px;}
  li a:hover{display: block; width: 100px; height: 40px; background: red;}
  li ul {display: none;}
  li:hover ul {display: block;}
  </style>
  </head>
   <ul id="nav">
       <li class="selectors"><a href="#">aaa</a></li>
       <li class="selectors"><a href="#">bbbb</a>
            <ul id="innerContainer">
                <li class="navHidden">222</li>
                </li>
            </ul>
       </li>
  </ul>