在谷歌上搜索堆栈溢出没有返回任何我能识别的结果，所以如果以前有人问过我，请原谅。。。
我有下拉式主菜单，它以列表为基础。问题是，列表非常宽，并且在展开时缩进得不够远。所以，这是我的问题！如何通过CSS使列表上的缩进量更大？
padding-left控制ul的缩进，而不是margin-left的缩进。
比较：这里将padding-left设置为0，注意所有缩进都消失了。
ul {
padding-left: 0;
}<ul>
<li>section a
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
<ul>
<li>section b
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>这里将CCD_ 6设置为CCD_。请注意，缩进没有更改。
ul {
margin-left: 0;
}<ul>
<li>section a
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>
<ul>
<li>section b
<ul>
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
</li>
</ul>要缩进ul下拉菜单，请使用
/* Main Level */
ul{
margin-left:10px;
}
/* Second Level */
ul ul{
margin-left:15px;
}
/* Third Level */
ul ul ul{
margin-left:20px;
}
/* and so on... */
您还可以缩进li s和（如果适用）a s（或您拥有的任何内容元素），每个元素都有不同的效果。您也可以使用padding-left而不是margin-left，这同样取决于您想要的效果。
更新
默认情况下，许多浏览器使用padding-left来设置初始缩进。如果你想摆脱它，设置padding-left: 0px;
尽管如此，margin-left和padding-left设置都以不同的方式影响列表的缩进特别是：margin-left影响元素边界外侧的缩进，而padding-left影响元素边界内侧的间距。（点击此处了解有关CSS框模型的更多信息）
设置padding-left: 0;会使li的项目符号图标挂在元素边界的边缘（至少在Chrome中是这样），这可能是你想要的，也可能不是你想要的。
左填充与左边距的示例，以及它们如何在ul上协同工作：https://jsfiddle.net/daCrosby/bb7kj8cr/1/
同时尝试：
ul {
list-style-position: inside;
}
li{
margin-left:50px;
}
或者用你想要的任何东西替换50px。
我发现用两个相对简单的步骤做这件事似乎效果很好。ul的第一个css定义设置了整个列表所需的基本缩进。第二个定义为其中的每个嵌套列表项设置缩进值。在我的情况下，它们是相同的，但你显然可以选择你想要的任何内容。
ul {
margin-left: 1.5em;
}
ul > ul {
margin-left: 1.5em;
}
使用chrome dev工具并查看user agent stylesheet（在撰写本文时）应用于ul元素的样式，chrome中的默认样式为：
ul {
display: block;
list-style-type: disc;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
padding-inline-start: 40px;
}
padding-inline-start属性用于设置项目符号（以及子列表的项目符号）的缩进。
padding-inline-startCSS属性定义元素的逻辑内联起始填充，根据元素的写入模式、方向性和文本方向，该属性映射到物理填充。
（其他默认属性也可能帮助人们获得他们想要的外观）
请注意，@preferred_anon早些时候在另一个答案的评论中提到了这一点，但我第一次看的时候错过了，所以我添加了这个答案。