Question

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

fffff 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>

Answer 1

使用focus，您可以这样实现：

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

css selectors

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>

Answer 2

另一种解决方案

您也可以使用nav li a:focus ~ ul li来实现此设计。

希望可能会有帮助。

  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>

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

2 个答案: