Навигация выпадающего меню CSS - PullRequest
Новая
       24

Навигация выпадающего меню CSS

0 голосов
/ 17 ноября 2018

Я пытаюсь расположить навигационную панель с правой стороны в середине области заголовка.как cyberchimps

enter image description here

Кроме того, когда я нахожу курсор мыши на подменю 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>

1 Ответ

0 голосов
/ 17 ноября 2018

Я не думаю, что это возможно с 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 и никогда его не скрывать.Надеюсь, это поможет.

...