时间戳

首页 > 解决方案 > CSS垂直导航菜单下拉在IE11中不起作用

html - CSS垂直导航菜单下拉在IE11中不起作用

问题描述

出于某种原因，我的 CSS 导航菜单在 IE11 中不起作用。它适用于 Chrome 或 Firefox 没问题。它纯粹只是 CSS，根本没有使用 JavaScript。谁能告诉我我错过了什么？我尝试过使用 doctypes 进行试验，但没有得到任何结果。

ffff ffff ffff ffff

呸呸呸

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>

标签： htmlcss

解决方案

另一种解决方案

您也可以使用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>

推荐阅读