使用CSS顯示子菜單
[英]Show submenu with css
問題描述
這是我的菜單。 當我將鼠標移到最后一個項目上時，我想顯示子菜單（在最后一個項目中）。 我正在嘗試僅使用CSS來執行此操作，但是它不起作用。 這是代碼
#submenu {
display: block;
position:absolute;
float:right;
right:26px;
background-color:#f1f3f5;
width:21%;
}
#submenu li {
border-bottom: 1px solid #c2c5c9;
padding: 5px 5px;
text-align:right;
}
#submenu li:first-child {
padding-top: 10px;
}
#submenu li:last-child {
border-bottom: none;
}
#submenu li a {
border-right: 0 !important;
padding:5px 2px 0 0;
}
nav .last:hover > #submenu {
display:block;
}
<nav>
<a href="#" target="_self">First item</a>
<a href="#" target="_self">Second item</a>
<a href="#" class="last" target="_self">Third item
<ul id="submenu">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
<li><a href="#">Submenu item 3</a></li>
</ul>
</a>
</nav>
當我將鼠標懸停在上一個導航項上時，是否可以顯示/隱藏子菜單？
3 個解決方案
解決方案1
2 2015-11-25 09:18:13
這是您可以執行的操作：
nav a.last:hover+#submenu { display:block;}
完整的運行示例：
#submenu { display: none; position:absolute; float:right; right:26px; background-color:#f1f3f5; width:21%; } #submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right; } #submenu li:first-child { padding-top: 10px; } #submenu li:last-child { border-bottom: none; } #submenu li a { border-right: 0 !important; padding:5px 2px 0 0; } nav .last:hover > #submenu { display:block; } nav a.last:hover+#submenu { display:block;}
<nav> <a href="#" target="_self">First item</a> <a href="#" target="_self">Second item</a> <a href="#" class="last" target="_self">Third item <ul id="submenu"> <li><a href="#">Submenu item 1</a></li> <li><a href="#">Submenu item 2</a></li> <li><a href="#">Submenu item 3</a></li> </ul> </a> </nav
解決方案2
2 2015-11-25 09:29:26
<a>不能嵌套在另一個<a> 。 您的html應該如下所示。
<a href="#" class="last" target="_self">Third item</a>
<ul id="submenu">
<li><a href="#">Submenu item 1</a></li>
<li><a href="#">Submenu item 2</a></li>
<li><a href="#">Submenu item 3</a></li>
</ul>
和CSS應該是
nav .last:hover + #submenu {
display: block;
}
解決方案3
1 已采納 2015-11-25 09:30:03
#submenu { display:block; position:absolute;float:right;right:26px;background-color:#f1f3f5;width:21%;} #submenu li { border-bottom: 1px solid #c2c5c9; padding: 5px 5px; text-align:right;} #submenu li:first-child { padding-top: 10px;} #submenu li:last-child { border-bottom: none;} #submenu li a {border-right: 0 !important;padding:5px 2px 0 0;} #submenu { display:none;} nav .parent:hover #submenu { display:block;}
<html> <nav> <a href="#" target="_self">First item</a> <a href="#" target="_self">Second item</a> <span class="parent"> <a href="#" class="last" target="_self">Third item</a> <ul id="submenu"> <li><a href="#">Submenu item 1</a></li> <li><a href="#">Submenu item 2</a></li> <li><a href="#">Submenu item 3</a></li> </ul> </span> </nav> </html>
使用CSS顯示子菜單而不使用無序列表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.