顯示子菜單的懸停問題

我有2個單獨的菜單。當鼠標懸停在菜單＃1上的某些按鈕上時，我想顯示菜單＃2中的鏈接。如果可能的話，我想嘗試用CSS來做到這一點。下面是我使用的一些CSS。顯示子菜單的懸停問題

HTML：

<nav> 
    <ul> 
     <li><a href="http://www.xecforce.com">HOME</a></li> 
     <li><a href="#">NEWS</a></li> 
     <li><a href="#">FORUMS</a></li> 
       <li><a href="#">GAMES</a></li> 
       <li><a href="#">XECOM</a></li> 
    </ul> 
</nav> 

<div id="sub-menu-items"> 
<ul> 
    <li><a href="#">Test 1</a></li> 
    <li><a href="#">Test 2</a></li> 
</ul> 
</div>

CSS：

#sub-menu-items ul li { 
list-style-type: none; 
z-index: 99999; 
margin-right: 15px; 
padding-bottom: 8px; 
padding-top: 8px; 
display: none; 
text-shadow: 2px 3px 3px #080808; 
} 

nav ul li:first-child:hover #sub-menu-items ul li { 
display: inline; 
}

這是怎麼不工作？

來源

2013-02-28 Josh Woelfel

子菜單項需要是您懸停的li的子項。那是什麼這個選擇意味着：

nav ul li:first-child:hover #sub-menu-items ul li

CSS下拉菜單都是這樣完成的：

HTML

<ul> 
<li>Parent Item 
    <ul> 
     <li>Sub item</li> 
     <li>Sub item</li> 
    </ul> 
</li> 
<li>Parent Item 
    <ul> 
     <li>Sub item</li> 
     <li>Sub item</li> 
    </ul> 
</li> 
</ul>

CSS

ul ul { 
display: none; 
} 

ul > li:hover ul { 
display: block; 
}

來源

2013-02-28 04:54:03

您需要巢父母「禮」中子菜單，您的代碼將是這樣的：

<nav> 
    <ul class="parent-menu"> 
     <li><a href="http://www.xecforce.com">HOME</a></li> 
     <li><a href="#">NEWS</a> 
      <ul class="sub-menu"> 
      <li><a href="#">Test 1</a></li> 
      <li><a href="#">Test 2</a></li> 
      </ul> 
     </li> 
     <li><a href="#">FORUMS</a></li> 
     <li><a href="#">GAMES</a></li> 
     <li><a href="#">XECOM</a></li> 
</ul> 
</nav>

然後你就可以風格的子菜單UL &裏（最好的位置是：絕對的）和css可以是： .parent-menu li：懸停.sub-menu {display：block}

來源

2013-02-28 04:52:40 Neeraj

的 '：懸停' 的狀態元素只能影響其子元素。要使用：懸停來影響外部元素，您可以使用JavaScript。

在這一行

nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}

的CSS正在尋找的「導航」，「＃子菜單項UL麗」的第一個「李」裏。

根據您的佈局，只有在第一個菜單中移動第二個菜單時，才能達到所需效果。

來源

2013-02-28 04:55:04 earthdesigner

顯示子菜單的懸停問題

回答

相關問題