gpt4 book ai didi

html - 悬停时显示子菜单内容的下拉菜单

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

我一直在尝试弄清楚如何制作带有下拉菜单的导航栏。我觉得我非常接近,但出于某种原因,当我将鼠标悬停在我的主列表元素上时,它也显示了子菜单的全部内容。

这是我一直卡住的地方,我尝试在我的 CSS 中添加、切换 li 和 ul,但它就是不起作用。

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}

body {
background-color: pink;
}

h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height: 2em;
width: 100%;
}

nav {
background: red;
margin: auto;
padding: 10px;
line-height: 1.6em;
width: 100%;
}

nav>ul>li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}

nav>ul>li>ul {
background-color: blue;
list-style: none;
position: absolute;
/*display: none;*/
width: 100%;
}

nav>ul>li:hover ul li {
display: block;
}

nav>ul>li>ul>li>ul {
list-style: none;
background-color: black;
position: absolute;
left: 100%;
top: 0px;
width: 40%;
display: none;
}

nav>ul>li>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>

<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>

<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing 1
</li>
<li>Thing 2
</li>
<li>Thing 3
</li>
<li>Thing 4
</li>
<li>Thing 5
</li>
<li>Thing 6
</li>

</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>

</body>

</html>

第一个下拉项应以导航栏元素(音乐)为中心。之后的每个子菜单都应该出现在顶部 0px;剩下 100% 的列表项(在本例中为歌曲 1)。您可以在我的 CSS 中看到预期的结果。

最佳答案

* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}

body {
background-color: pink;
}

h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
}

nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}

nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}

/* i added only following codes */

nav ul li ul li ul {
display:none;
}

nav ul li ul li:hover ul {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css"
href="C:\Users\geek\Desktop\positions\styles.css">

</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing
1</li>
<li>Thing
2</li>
<li>Thing
3</li>
<li>Thing
4</li>
<li>Thing
5</li>
<li>Thing
6</li>

</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>

</body>
</html>

关于html - 悬停时显示子菜单内容的下拉菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53906663/

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