Html 基础<；ul>；子菜单在页面上不可见

我有一个基本的水平html菜单，其结构类似于：

<ul>
    <li>
       Menu item 1
       <ul class="sub-menu">
            <li>Sub item 1</li>
       </ul>
    </li>
    <li>Menu item 2</li>
</ul>

菜单项1

分项目1


菜单项2

请参阅完整示例。（相关菜单包含文本Bernalillo）

问题：

。子菜单

完全隐藏。我可以看到它的位置是正确的（使用inspect元素），并且我还使用了z索引和容器高度，但是没有用

约束：我只能更改css。HTML（这可能会让你哭泣）被锁定在Sharepoint中，直到时间结束。编辑Javascript也被淘汰了

关于如何显示子菜单，您有什么想法吗？

您在两个父元素上有一些溢出：隐藏。我已经更新了你的css

.customNav {
    /*overflow: hidden;*/
    height: 30px;
    background: #5e5e5e;
}

.s4-tn {
    margin-left: 0px;
    /*overflow: hidden; */
    height: 30px;
}

---

我不知道您可以对css进行多少更改，但这里有一个我刚刚编写的快速示例：

菜单项1

分项目1


菜单项2

ul{margin:0；padding:0；}
.菜单>李
{
浮动：左；
列表样式类型：无；
左边距：15px；
}
.子菜单
{
显示：无；
}
.子菜单li
{
浮动：左；
列表样式类型：无；
}
.菜单li：悬停.子菜单
{
显示：块；
}

---

我知道这并不多，但希望它能为你指明正确的方向……

我希望所有的问题都像这样。简单的代码示例，约束和问题容易区分。我觉得我必须自己和SharePoint一起工作。祝你好运我非常感谢您的努力，虽然我确信这是一个很好的解决方案，但我的问题的答案是错误的

溢出
样式。干杯
<ul class="menu">
    <li>
       Menu item 1
       <ul class="sub-menu">
            <li>Sub item 1</li>
       </ul>
    </li>
    <li>Menu item 2</li>
</ul>


ul{margin:0;padding:0;}

.menu > li
{
    float:left;
    list-style-type:none;
    margin-left:15px;
}

.sub-menu
{
    display:none;
}

.sub-menu li
{
    float:left;
    list-style-type:none;
}

.menu li:hover .sub-menu
{
    display:block;
}