使用CSS顯示子菜單而不使用無序列表

Question

我有一個關於顯示CSS子菜單的問題。 我有以下HTML代碼：

<div class="navigation">
    <a class="active" href="/">Home</a>
    <a href="/">Test1</a>
    <a href="/">Test2</a>
    <div class="submenu-wrapper">
      <a href="/">Test3</a>
      <div class="submenu">
        <a href="/">Submenu1</a>
        <a href="/">Submenu2</a>
      </div>      
    </div>
    <a href="/">Test4</a>
</div>

由於實施限制，我無法將結構更改為例如<ul>格式。

我在網上做了一些研究，以了解如何使用CSS來顯示子菜單。 我嘗試了以下操作：

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

關於我當前的實現，誰能告訴我為什么這行不通以及如何解決這個問題。

完整代碼在這里： JSFIDDLE

PS。 任何使用引導程序或將菜單轉換為<ul>格式的答案都不是我想要的；）

Answer 1

您的代碼：

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

您的.submenu不在a 。 您可以使用兄弟選擇器：

.navigation .submenu-wrapper a:hover + .submenu{display:block;}

但是要使子菜單可用，請確保您的.submenu-wrapper高度與其內容高度相同（通過為其設置固定高度或:after{clear:both;}進行設置）：

.navigation .submenu-wrapper:hover .submenu{display:block;}

由於您的.submenu是絕對定位的，因此您還需要定位其父級，否則.submenu會從屏幕上掉落（因為您將top:100%相對於正文的top:100% ）。 像這樣：

.navigation .submenu-wrapper {position: relative;}

更新小提琴： https : //jsfiddle.net/xrtjngdr/4/

Answer 2

您可以通過更改來實現

.navigation .submenu-wrapper a:hover > .submenu{display:block;}

.navigation .submenu-wrapper a:hover + .submenu{display:block;}

您還必須添加

.submenu:hover{
  display:block;
}

因為如果您想單擊子菜單，鏈接將消失

Answer 3

只需進行一些小更改，您便會變得很黃金。

有關更改，請參見下面的代碼中的注釋。

 .navigation { margin: 0; padding-left: 0; list-style: none; float: left; } .navigation .submenu-wrapper { float: left; display: block; position: relative; /* add relative position */ } .navigation > a, .navigation .submenu-wrapper a { float: left; position: relative; display: block; font-size: 20px; padding-right: 14px; padding-left: 14px; padding-top: 5.5px; padding-bottom: 8.5px; color: #000; text-decoration: none; } .submenu { position: absolute; display: none; /* display none */ top: 100%; left: 0; z-index: 1000; float: left; min-width: 160px; list-style: none; font-size: 18px; text-align: left; background-color: #245d94; border: 1px solid #fff; border-radius: 0; box-shadow: none; border-left: none; border-right: none; } .navigation a:hover { color: #fff; background-color: #245d94; } .navigation a.active { color: #fff; background-color: #e36c0a; } .navigation .submenu-wrapper:hover .submenu { /* As you want the menu to remain open when you move to the submenu */ display: block; } 

 <div class="navigation"> <a class="active" href="/">Home</a> <a href="/">Test1</a> <a href="/">Test2</a> <div class="submenu-wrapper"> <a href="/">Test3</a> <div class="submenu"> <a href="/">Submenu1</a> <a href="/">Submenu2</a> </div> </div> <a href="/">Test4</a> </div>