gpt4 book ai didi

html - 嵌套 ul 的位置问题

转载 作者:行者123 更新时间:2023-11-28 17:43:46 25 4
gpt4 key购买 nike

我正在尝试创建一个向下滑动的垂直菜单。我的菜单像它应该的那样下推该部分主要部分中的其他 li。唯一的问题是子菜单移动到了右边,我希望它们与父级对齐。这jsfiddle显示那个问题。源代码在下面,但所有代码都在 jsfiddle 中。

谢谢,桐理惠

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />
<title>DEMO</title>
<style>
div{

width:180px;
}
div ul ul {
display: none;
}

div ul li:hover > ul {
display: block;
}
div ul li {
list-style:none;
background:#F00;
width:180px;
}
div ul ul li {
background:blue;
width:180px;

}
div ul ul li a{
width:180px;
color:white;

}
div ul ul ul li {
background:red;
width:180px;
}
</style>
</head>
<body>


<div>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">Photoshop</a></li>
<li><a href="#">Illustrator</a></li>
<li><a href="#">Web Design</a>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Articles</a>
<ul>
<li><a href="#">Web Design</a></li>
<li><a href="#">User Experience</a></li>
</ul>
</li>
<li><a href="#">Inspiration</a></li>
</ul>

</div>

</body>
</html>

最佳答案

将以下内容添加到您的 CSS:

ul ul{
padding:0; /* stop children from being offset left */
}

Demo Fiddle

关于html - 嵌套 ul 的位置问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23658439/

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