出于某种原因，我的 CSS 导航菜单在 IE11 中不起作用。它在 Chrome 或 Firefox 中工作没问题。它纯粹只是 CSS，根本没有使用 JavaScript。谁能告诉我我错过了什么？我尝试过使用文档类型进行试验，但没有取得任何进展。
呜呜呜 嗯嗯 嗯嗯 好吧
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;
}
div + pselects all<p>elements that are placed immediately after<div>elements.
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>关于html - CSS 垂直导航菜单下拉菜单在 IE11 中不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58834866/