悬停在不寻常的导航栏上（仅限CSS）

-3

我想制作一个导航栏。当我将鼠标悬停在导航栏上时，我认为会显示一个大块。但是，它没有工作。悬停在不寻常的导航栏上（仅限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>

而且，这是我的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 | .selectors |

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

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

谢谢。

来源

2014-04-16 user3540818

“做功课” ...... – PlantTheIdea

你说的大块是什么意思？ –

只要innerContainer放在.selectors之外，就不能这样做。我假设你也想为不同的.selector显示不同的子导航。所以你可以在每个.selectors元素中放置一个.innerContainer，并在你的css中使用类似的东西：'.selectors：hover .innerContainer {display：block; }' –

您的代码已经过修改，所以现在您已经有了期望的布局。但它是不完美我没有删除多余的规则。自己做功课

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

来源

2014-04-16 11:35:50 AlexPrinceton

试试这个方法来创建你的导航。

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

来源

2014-04-16 11:35:54 user3240923

悬停在不寻常的导航栏上（仅限CSS）

回答

相关问题