當鼠標懸停在li class css上時顯示一個ul類

我目前正在研究開發一個僅CSS的下拉菜單。這個想法是當鼠標懸停在ul標籤上時，它將會出現另一個ul類。當鼠標懸停在li class css上時顯示一個ul類

下面是我目前的代碼。

HTML

<head> 
<link href="nav.css" rel="stylesheet" type="text/css"> 
</head> 

<ul class="nav"> 
    <li class="topMenu"><a href="#">Home</a></li> 
    <ul class="subMenu" id="home"> 
     <li><a href="#">Hello</a></li> 
     <li><a href="#">World</a></li>  
    </ul> 
</ul>

CSS

.nav, .topMenu, .subMenu 
{ 
    position: relative; 
    list-style: none; 
} 

.topMenu 
{ 
    position: relative; 
    float: left; 
} 

.subMenu 
{ 
    display: none; 
} 

.topMenu a:hover + li 
{ 
    display: block; 
    background-color: blue; 
}

的想法是，當鼠標懸停在李類= 「頂部菜單」，那麼UL類= 「子菜單」 ID = 「家」應該出現在下面。

理想的情況下，這應該是隻在CSS格式，無需任何JavaScript等

感謝您的幫助，您可以提供。

來源

2011-12-09 Boardy

還有什麼需要完成這個問題？ – Wex

你真正需要做的是巢您<li>元素中的<ul>。

<nav> 
    <ul> 
     <li><a href="#">Link</a></li> 
     <li> 
      <a href="#">Link</a> 
      <ul> 
       <li><a href="#">Submenu</a></li> 
       <li><a href="#">Submenu</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Link</a></li> 
    </ul> 
</nav>

下面是一些CSS，這將幫助你開始：

/* Resets */ 
nav a { 
    text-decoration: none; 
    font: 12px/1 Verdana; 
    color: #000; 
    display: block; } 
nav a:hover { text-decoration: underline; } 
nav ul { 
    list-style: none; 
    margin: 0; 
    padding: 0; } 
nav ul li { margin: 0; padding: 0; } 

/* Top-level menu */ 
nav > ul > li { 
    float: left; 
    position: relative; } 
nav > ul > li > a { 
    padding: 10px 30px; 
    border-left: 1px solid #000; 
    display: block;} 
nav > ul > li:first-child { margin: 0; } 
nav > ul > li:first-child a { border: 0; } 

/* Dropdown Menu */ 
nav ul li ul { 
    position: absolute; 
    background: #ccc; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
    display: none; } 
nav ul li ul li { 
    text-align: center; 
    width: 100%; } 
nav ul li ul a { padding: 10px 0; } 
nav ul li:hover ul { display: block; }

前瞻：http://jsfiddle.net/Wexcode/BEhvQ/

來源

2011-12-09 23:55:18 Wex

這將需要一些調整：

<ul class="nav"> 
    <li class="topMenu"><a href="#">Home</a></li> 
    <li class="subMenu"> 
    <ul id="home"> 
     <li><a href="#">Hello</a></li> 
     <li><a href="#">World</a></li>  
    </ul> 
    </li> 
</ul> 


.topMenu:hover + .subMenu 
{ 
    display: block; 
    background-color: blue; 
}

Demo

來源

2011-12-09 22:41:49 bookcasey

當鼠標懸停在li class css上時顯示一個ul類

回答

相關問題