Question

我正在尝试创建一个向下滑动的垂直菜单。我的菜单按照预期的那样按下该部分主要部分中的其他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>

Answer 1

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

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

Demo Fiddle

Answer 2

this是您要找的。

在子菜单中添加一个类，并将其设置为下面的

.sub
{
    padding: 0px;
}

嵌套ul的位置问题

2 个答案:

Demo Fiddle