CSS垂直下拉菜单，当悬停到其他菜单时子菜单显示
Posted
技术标签:
【中文标题】CSS垂直下拉菜单，当悬停到其他菜单时子菜单显示【英文标题】：CSS Vertical dropdown menu, When Hover to other menu the submenu shows 【发布时间】：2016-02-20 10:49:33 【问题描述】：执行此操作的正确或最佳方法是什么？我无法修复它：3 当您将鼠标悬停到其他菜单时，会显示成员的子菜单 我的代码有什么问题？我想不通：3 你可以在链接中看到我的代码
http://codepen.io/anon/pen/MaxmvO
<html>
<head>
<title>Dashboard</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<header>
<div class="logo"><a href="#">WORKOUT <span>FITNESS CENTER</span></a></div>
</header>
<div id="container">
<nav>
<ul>
<li><a href="#">Walk-In</a></li>
<li><a href="#">Members</a></li>
<ul>
<li><a href="#">List of Members</a>
<li><a href="#">Subscr</a></li>
<li><a href="#">asdasd</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Inventory</a></li>
<li><a href="#">Suppliers</a></li>
<li><a href="#">Reports</a></li>
</ul>
</nav>
<div id="content">
SOME CONTENT YAY
</div>
</div>
</body>
</html>
CSS
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300italic,300);
*
margin: 0;
padding: 0;
body
font-family: 'Open Sans';
a
text-decoration: none;
header
width: 100%;
height: 50px;
border-bottom: 1px solid #858585;
.logo
float: left;
margin-top: 9px;
margin-left: 15px;
.logo a
font-size: 1.3em;
color: #070807;
.logo a span
font-weight: 300;
color: #1AC93A;
nav
width: 250px;
height: calc(100% - 50px);
background-color: #171717;
float: left;
#content
width: :auto;
margin-left: 250px;
height: calc(100% - 50px);
padding: 15px
nav li
list-style: none;
nav li a
color: #ccc;
display: block;
padding: 10px;
font-size: 0.8em;
border-bottom: 1px solid #0a0a0a;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
nav li a:hover
background-color: #030303;
color: #fff;
padding-left: 80px;
nav ul ul
display: none;
nav ul:hover ul
display: block;
【问题讨论】：
你需要这样：codepen.io/anon/pen/xwBdMe 谢谢！只是“>”我被毁了哈哈哈我想我需要学习如何使用它哈哈哈 【参考方案1】：试试这个http://codepen.io/anon/pen/gaEWJw
HTML
<nav>
<ul>
<li><a href="#">Walk-In</a></li>
<li><a href="#">Members</a></li>
<li><a href="#">List of Members</a>
<ul>
<li><a href="#">Subscr</a></li>
<li><a href="#">asdasd</a></li>
</ul>
</li>
<li><a href="#">Sales</a></li>
<li><a href="#">Inventory</a></li>
<li><a href="#">Suppliers</a></li>
<li><a href="#">Reports</a></li>
</ul>
</nav>
CSS
nav ul > li > ul
display: none;
nav ul li:hover ul
display: block;
【讨论】：
【参考方案2】：您需要定位特定元素，然后显示子菜单。我在这个li 中添加了一个id，以便更容易定位并删除</li>，因此ul 在li#members 内。
<li id="members"><a href="#">Members</a>
<ul>
<li><a href="#">List of Members</a></li>
<li><a href="#">Subscr</a></li>
<li><a href="#">asdasd</a></li>
</ul>
</li>
nav #members:hover ul
display: block;
【讨论】：
它不起作用link这是什么问题？我认为这是正确的，但是悬停时子菜单不显示<li id="members"><a href="#">Members</a></li> 你需要摆脱</li> 然后它应该可以工作以上是关于CSS垂直下拉菜单，当悬停到其他菜单时子菜单显示的主要内容，如果未能解决你的问题，请参考以下文章