Question

我想制作一个导航栏。我想当我悬停在导航栏上时会显示一个大块。但是，它没有用。

这是我的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>

而且，这是我的CSS。

#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;
visibility:hidden;
}

我希望网络如下：

| .selectors | .selectors | 。选民| .selectors |

| navHidden .....（仅在悬停时显示）...... |

我只允许使用html和css，因为这是作业。

感谢。

Answer 1

您的代码已经过调整，现在您已经拥有了所需的布局。但它 NOT PERFECT 我没有删除多余的规则。自己做功课

<强> 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>

<强> CSS

#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;}

Answer 2

尝试这种方式来创建导航。

  <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>

将鼠标悬停在异常导航栏上（仅限CSS）

2 个答案: