导航下拉菜单 CSS答案

【问题标题】：Navigation drop down menu CSS导航下拉菜单 CSS
【发布时间】：2018-11-16 21:55:57
【问题描述】：

我试图将导航定位在标题区域中间的右侧。喜欢cyberchimps

此外，当我将鼠标悬停在 BGA 的子菜单上时，我想为 BGA 保持悬停状态。我不知道如何做到这一点。

我在几个例子中看到了 CSS 中的“*”，这是今天使用的好习惯吗？

我怀疑我的方法是否合理，欢迎提出任何建议。

@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	background-color: #CCC;
}

@font-face{
	src: url(assets/fonts/oswald-v16-latin-regular.ttf);
	font-family: oswald;
}

/* ~~ The header is given a width of 100%.
It will extend the full width of the browser. 
The rest of the layout will be fixed~~ */
header{
	background-color: #004489;
	min-width: 1024px;
	height: 100px;
	clear: both;
}
/*header::after {
  content: '';
  display: block;
  clear: both;
}*/
.navWrapper{
	max-width: 1100px;
	margin: 0 auto; 	
}

nav{
	float:right;
	margin-top: 20px;
	padding-right: 50px;
}

nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
	
}

nav ul li{
	display: inline-block;
	float: left;	
	position: relative;

}

nav ul li a{
	display: block;
	margin: 0;
	padding: 10px 10px;
	text-decoration: none;
	font-family: oswald;
	font-size: 25px;
	color: #fff;
}


nav ul a:hover, nav ul a:active, nav ul a:focus{
	background-color: #065BB0;
}

nav ul ul{
	display: none;/**/
	position: absolute;
}

/* Display Dropdowns on Hover */
nav ul li:hover > ul {
	display:list-item;	
}
nav ul ul li{
	display: block;		
	width: 115px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
nav ul ul li a{
	color:#242323;
	background-color: #8ec6ef;

}
nav ul ul a:hover, nav ul ul a:active, nav ul ul a:focus{
	color:#fff;
	background-color: #065BB0;
}

<body>
	<header>
		<div class="navWrapper">		
			<nav>
				<ul>
					<li><a href="#">HOME</a></li>
					<li><a href="#">BGA</a>
						<ul>
							<li><a href="#">BOOKS</a></li>
							<li><a href="#">COURSES</a></li>
						</ul>
					</li>
					<li><a href="#">CONTACT</a></li>				
				</ul>
			</nav>
		</div>
	</header>
</body>

【问题讨论】：

标签： html css drop-down-menu header navbar

【解决方案1】：

我认为使用 CSS 是不可能的，你可以简单地使用 jQuery mouseenter 事件来做到这一点：

$('#bga-list').mouseenter(() => {
	$('#bga-list > ul').show();
})

@charset "utf-8";
/* CSS Document */
body{
	margin: 0;
	padding: 0;
	background-color: #CCC;
}

@font-face{
	src: url(assets/fonts/oswald-v16-latin-regular.ttf);
	font-family: oswald;
}

/* ~~ The header is given a width of 100%.
It will extend the full width of the browser. 
The rest of the layout will be fixed~~ */
header{
	background-color: #004489;
	min-width: 1024px;
	height: 100px;
	clear: both;
}
/*header::after {
  content: '';
  display: block;
  clear: both;
}*/
.navWrapper{
	max-width: 1100px;
	margin: 0 auto; 	
}

nav{
	float:right;
	margin-top: 20px;
	padding-right: 50px;
}

nav ul{
	list-style: none;
	padding: 0;
	margin: 0;
	
}

nav ul li{
	display: inline-block;
	float: left;	
	position: relative;

}

nav ul li a{
	display: block;
	margin: 0;
	padding: 10px 10px;
	text-decoration: none;
	font-family: oswald;
	font-size: 25px;
	color: #fff;
}


nav ul a:hover, nav ul a:active, nav ul a:focus{
	background-color: #065BB0;
}

nav ul ul{
	display: none;/**/
	position: absolute;
}

/* Display Dropdowns on Hover */

nav ul ul li{
	display: block;		
	width: 115px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
nav ul ul li a{
	color:#242323;
	background-color: #8ec6ef;

}
nav ul ul a:hover, nav ul ul a:active, nav ul ul a:focus{
	color:#fff;
	background-color: #065BB0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
	<header>
		<div class="navWrapper">		
			<nav>
				<ul>
					<li><a href="#">HOME</a></li>
					<li id="bga-list"><a href="#">BGA</a>
						<ul>
							<li><a href="#">BOOKS</a></li>
							<li><a href="#">COURSES</a></li>
						</ul>
					</li>
					<li><a href="#">CONTACT</a></li>				
				</ul>
			</nav>
		</div>
	</header>
</body>

但是，我认为在mouseenter 上显示下拉列表并且永远不要隐藏它不是一个好主意。希望这会有所帮助。

【讨论】：