Question

我正在尝试将导航栏定位在标题区域中间的右侧。像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>

Answer 1

我认为CSS不可能实现，您可以通过使用jQuery inject.js事件来实现：

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>上显示下拉列表并且永远不要隐藏它不是一个好主意。希望这会有所帮助。

导航下拉菜单CSS

1 个答案: