html-ul不返回垂直

我有这个简单的菜单和子菜单

<div id="menu_footer_bg">
    <div id="menu_line"></div>
    <ul id="menu_footer">
        <li><a href="">About</a></li>
        <li><a href="">Works</a>
            <ul>    
                <li><a href="">Electroacoustic</a></li> 
                <li><a href="">Instrumental</a></li>
            </ul>
        </li>
        <li><a href="">Projects</a></li>
    </ul>
</div>

我希望菜单是水平的，子菜单是垂直的。 到处阅读，我认为这段代码是正确的——在菜单的“li”标记中添加了“display:inline”

---

但是现在，子菜单也是水平的，我不知道如何回到垂直方向。

将此添加到您的

CSS

ul#menu_footer li ul li{
    display: block;
}

阅读

（）css选择器。您的

li

样式适用于所有子项，但我们只需要

\menu\u footer\u bg

#菜单_页脚_bg{
位置：固定；
顶部：计算（100%-50px）；
高度：50px；
宽度：100%；
不透明度：0.99；
左：0；
背景色：rgb（20,20,20）；
}
ul#菜单#页脚{
填充：0；
左缘：18%；
利润率最高：1%；
}
ul#菜单页脚>li{
显示：内联块；
垂直对齐：顶部；
位置：相对位置；
}
ul#菜单#页脚a{
显示：块；
颜色：白色；
填充：5px20px；
文字装饰：无；
字体系列：“漫画无MS”，草书，无衬线；
边界半径：4px4px4px4px；
}
ul#菜单#页脚a：悬停{
背景颜色：橙色；
}
菜单页脚
位置：绝对位置；
背景色：rgb（20,20,20）；
显示：无；
左：0；
底部：100%；
列表样式：无；
填充：0；
}
ul#菜单#页脚li：悬停ul{
显示：块；
}

只需将此添加到您的代码中即可

 ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
display:block; 
}

 ul#menu_footer li ul li {
clear:both;
border-style:none;
padding: 20px;
display:block; 
}