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

我有一個關於顯示CSS子菜單的問題。我有以下的HTML代碼：使用CSS顯示子菜單而不使用無序列表

<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>格式的任何答案不是我所期待;）

來源

2016-04-14 Rotan075

嘗試'的.navigation .submenu的方式包裝：懸停+ .submenu {顯示：塊;}' – Akshay

您的代碼：

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

你.submenu不是a內。您可以使用兄弟選擇：

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

但是，爲了使子菜單可用，請確保您的.submenu，包裝具有相同的高度，它的內容（通過給它一個固定高度或:after{clear:both;}並做到這一點：

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

由於您.submenu絕對定位，還需要定位其母公司，否則.submenu將脫落的畫面（因爲你top:100%相對於身體給了它）是這樣的：

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

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

來源

2016-04-14 13:55:07 KWeiss

謝謝您的回答！但是這不能正常工作。您無法再選擇任何子菜單項目。每當你想將鼠標懸停在子菜單上時關閉 – Rotan075

這是因爲當你在子菜單上懸停時，你並沒有盤旋在「a」上。如果你給我的第二個解決方案中的子菜單包裝高度，你將能夠懸停在子菜單上。 – KWeiss

感謝您更新小提琴！這正是我想要的。還有一個問題。我更新了你的小提琴，我想知道如何設置白色背景100％懸停在子項目上？ [FIDDLE]（https://jsfiddle.net/xrtjngdr/6/） – Rotan075

只是一些小的改動，你是金色的。

請參閱下面代碼中的註釋以瞭解您的更改。

.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>

來源

2016-04-14 13:57:24 Aaron

你可以通過改變

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

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

實現這一目標還需要添加

.submenu:hover{ 
    display:block; 
}

因爲如果你要點擊你的子菜單，這些鏈接就會消失

來源

2016-04-14 14:04:36

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

回答

相關問題