gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 19:13:40 25 4
gpt4 key购买 nike

出于某种原因,我的 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;
}

css selectors

div + p selects 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/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com