下拉菜單

我創建了一個包含子類別的下拉菜單，每個子類別都有另一個子類別。例如，當用戶將鼠標懸停在圖像上時，會出現一個下拉菜單，當鼠標放置在「顏色」層上時，另一個下拉菜單應顯示3種顏色。但是，我無法看到帶有3種顏色的下拉菜單。我懷疑這是因爲我沒有在我的CSS文件中正確追蹤標籤。有人能告訴我我做錯了什麼嗎？謝謝。下拉菜單

這裏是我的HTML代碼：

<body> 
    <ul id="coolMenu"> 
     <li> 
      <a href="#"> <img src = "gear_icon.png" 
        class = "nav" height = "20px" width = "20px"> 
      </a> 
      <ul> 
       <li> 
        <a href = "#"> Colors </a> 
        <ul> 
         <li><a href = "#"> Blue </a></li> 
         <li><a href = "#"> Green </a></li> 
         <li><a href = "#"> Red </a></li> 
        </ul> 

       </li> 
       <li><a href="#">Background</a></li> 
       <li><a href="#">Indulgentia</a></li> 
      </ul> 
     </li> 
    </ul> 
</body>

這是我的CSS代碼：

#coolMenu, #coolMenu ul { 
list-style:none; 
} 

#coolMenu { 
float:left; 
} 
#coolMenu > li { 
float:left; 
} 

#coolMenu li a { 
display:block; 
height: 2em; 
line-height:2em; 
padding: 0 1.5em; 
text-decoration:none; 
} 

    #coolMenu ul { 
    position:absolute; 
    display:none; 
    z-index: 999; 
    } 

    #coolMenu li:hover ul { 
display:block; 
    } 

    #coolMenu ul li ul li{ 
    position:absolute; 
    display:none; 
    z-index:999; 
    } 

#coolMenu li ul li:hover a { 
     display:block; 
}

來源

2014-06-10 user1923

你的意思是這種風格

#coolMenu li > ul > li:hover > ul { 
    display: block; 
    position: absolute; 
    left: 110px; 
    top: 0px; 
}

例如：http://jsfiddle.net/kisspa/2bqQL/ enter image description here

來源

2014-06-10 02:54:16 Kisspa

@meagar：謝謝。這實際上更接近我正在尋找的建議。還有一個問題，當我將鼠標懸停在特定的盒子上時，是否有方法來改變文本的顏色？「顏色：價值」似乎並不奏效。 – user1923

@ user1923這不是我的答案，你是在問錯人 – meagar

看一看這個例子：jsfiddle。它只是使用HTML & CSS。

HTML

項目＃1
- 子項＃1
- 子項＃2
- 子項＃3
項目＃2
- 子項＃4
- 子項＃5
- 子項＃6
項目＃3
- 子項＃7
- 子項＃8
- 子項＃9

CSS

ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em} 
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0} 
ul ul > li {float: none;} 
ul > li:hover > ul, 
ul > a:hover + ul {display: block}

來源

2014-06-10 01:51:05 manosim

@馬諾利斯。謝謝！我會修改它以適應我的需求。 – user1923

太棒了！祝你好運！希望它有幫助.. – manosim

回答

相關問題