使用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显示子菜单而不使用无序列表

回答

相关问题