CSS Vertical Nav Menu Drop Down在IE11中不起作用

debugcn 发表于 Dev

聪明人

由于某些原因，我的CSS导航菜单在IE11中不起作用。它可以在Chrome或Firefox中正常运行。纯粹是CSS，根本没有使用JavaScript。谁能告诉我我所缺少的吗？我已经尝试过使用doctype，但是却一无所获。

ffff ffff ffff ffff

fff fff

nav ul {
	margin-top:1px; /* tucks the child ul up close to the parent li */
	border-color: blue;
	border-width: 10px;
	border-style: solid;
	width: 200px;
	overflow: hidden;
}
nav li {
	list-style-type: none;
	border-color: aqua;
	border-width: 10px;
	border-style: solid;
}
nav ul li {
	display: none;
	border-color: lime;
	border-width: 10px;
	border-style: solid;
	margin:1px;
	margin-top:-10px;
	margin-left:-10px;
}
nav {
	background-color: #c8b99c;  /* pale brown */
	width: 220px;
	margin-left:auto;
	margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a {  /* to make the whole box clickable, not just the link text */
	display:block; /* <<< this is the bit that does it */
	line-height:23px;
	text-decoration:none;
	border-color: red;
	border-width: 3px;
	border-style: solid;
}
nav li:focus-within ul li {
	display: block;
}

<!doctype html>
<html lang="en">
<html>
<head>
	<title>My Webpage</title>
	<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
	<nav>
			<li tabindex="1"><a href="#" tabindex="-1">Home</a>
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Skeleton Page 1</a></li>
			<li><a href="#">Skeleton Page 2</a></li>
			</ul>
			</li>
			<li tabindex="1"><a href="#" tabindex="-1">Home</a>
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Skeleton Page 1</a></li>
			<li><a href="#">Skeleton Page 2</a></li>
			</ul>
			</li>			
	</nav>							
</body>
</html>

通过focus您可以实现以下目标：

nav li:focus ul li,
nav li a:focus + ul li{
    display: block;
}

CSS选择器

div + p选择<p>紧随<div>元素之后的所有元素。

nav ul {
	margin-top:1px; /* tucks the child ul up close to the parent li */
	border-color: blue;
	border-width: 10px;
	border-style: solid;
	width: 200px;
	overflow: hidden;
}
nav li {
	list-style-type: none;
	border-color: aqua;
	border-width: 10px;
	border-style: solid;
}
nav ul li {
	display: none;
	border-color: lime;
	border-width: 10px;
	border-style: solid;
	margin:1px;
	margin-top:-10px;
	margin-left:-10px;
}
nav {
	background-color: #c8b99c;  /* pale brown */
	width: 220px;
	margin-left:auto;
	margin-right: auto;
}
nav ul li.selected {
background-color: #c18946;
}
nav li a {  /* to make the whole box clickable, not just the link text */
	display:block; /* <<< this is the bit that does it */
	line-height:23px;
	text-decoration:none;
	border-color: red;
	border-width: 3px;
	border-style: solid;
}
nav li:focus ul li,
nav li a:focus + ul li{
	display: block;
}

<!doctype html>
<html lang="en">
<html>
<head>
	<title>My Webpage</title>
	<link type="text/css" rel="stylesheet" href="nav_style.css">
</head>
<body>
	<nav>
			<li tabindex="1"><a href="#" tabindex="-1">Home</a>
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Skeleton Page 1</a></li>
			<li><a href="#">Skeleton Page 2</a></li>
			</ul>
			</li>
			<li tabindex="1"><a href="#" tabindex="-1">Home</a>
			<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Skeleton Page 1</a></li>
			<li><a href="#">Skeleton Page 2</a></li>
			</ul>
			</li>			
	</nav>							
</body>
</html>

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。