純粹的CSS下拉菜單

我試圖在http://phpbb.com上看到什麼樣的100％CSS和HTML下拉菜單。當你將鼠標懸停在導航鏈接上時，一個新的div出現在你所徘徊的那個下面。純粹的CSS下拉菜單

我想要做的是使.submenu出現在<li>的正下方，它使用#nav li a:hover submenu {嵌套。據我所知，當一個a元素被覆蓋時，這個CSS選擇器應該選擇.submenu DIV？但它不起作用。

#nav { 
 
    list-style-type: none; 
 
    margin: -5px 0px 0px 5px; 
 
} 
 
#nav li { 
 
    display: inline; 
 
} 
 
#nav li a { 
 
    display: block; 
 
    padding: 3px; 
 
    float: left; 
 
    margin: 0px 10px 0px 10px; 
 
    text-decoration: none; 
 
    color: #fff; 
 
    font-weight: bold; 
 
    position: relative; 
 
} 
 
#nav li a:hover { 
 
    text-shadow: 1px 1px #333; 
 
} 
 
#nav li a:hover submenu { 
 
    display: block; 
 
    color: red; 
 
} 
 
.submenu { 
 
    position: absolute; 
 
    display: none; 
 
}

<ul id="nav"> 
 
    <li><a href="/">Home</a> 
 
    </li> 
 
    <li> 
 
    <a href="/">Skins</a> 
 
    <div class="submenu"> 
 
     hello :) 
 
    </div> 
 
    </li> 
 
    <li><a href="/">Guides</a> 
 
    </li> 
 
    <li><a href="/">About</a> 
 
    </li> 
 
</ul>

來源

2011-04-29 Josh

您的意思是'#nav li a：hover .submenu'？ – Neil 2011-04-29 22:36:33

這不工作:( – Josh 2011-04-29 22:37:40

你可以試試這個演示：http://www.themeswild.com/read/horizontally-centering-drop-down-using-pure-css – 2017-01-25 22:16:42

你的倒數第二個選擇是尋找一個「子」元素，你應該糾正這個說「.submenu」

像這樣：

/*#nav li a:hover submenu {*/ 
#nav li a:hover .submenu { 
    display: block; 
    color: red; 
}

編輯：

爲了讓懸停工作時，你還需要調整你的CSS使懸停應用到列表項，而不是錨標記：

#nav li:hover .submenu { 
    display: block; 
    color: red; 
}

來源

2011-04-29 22:37:09

啊，是的，.submenu是一個孩子li，而不是a。 – Neil 2011-04-29 22:45:13

完美，當我將鼠標懸停在列表項上時，它可以工作。謝謝！:) – Josh 2011-04-29 22:45:22

@Josh - 不要忘了標記爲答案，如果它通過點擊綠色勾號幫助： - ） – 2011-04-30 00:59:24

是否缺少一個句點（「」）子菜單前的選擇#nav li a:hover submenu？

來源

2011-04-29 22:38:23

試着編輯下面這個部分。放一個。（點）在子菜單之前，因爲它是一個類。

#nav li a:hover .submenu { 
display: block; 
color: red; 
}

來源

2011-04-29 22:40:51 Aajahid

#nav li:hover .submenu { 
    display: block; 
    color: red; 
}

你想要的子菜單，當你將鼠標懸停在裏，不是在，只是因爲你沒有用一個內部類的子菜單項出現。

你也可以考慮使用s作爲子菜單。

來源

2011-04-29 22:46:15 Arjan

純粹的CSS下拉菜單

回答

相關問題