Question

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

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

有关完整示例，请参阅http://jsfiddle.net/4EmJ9/。（有问题的菜单包含文字Bernalillo）

问题：.sub-menu完全隐藏。我可以看到它被正确定位（使用inspect元素），我也玩过z-index和容器高度，但无济于事。

约束：我可以改变 ONLY css。 HTML（可能会让你哭泣）在Sharepoint中被锁定，直到时间结束。编辑Javascript也是。

有关如何显示子菜单的任何想法？

Answer 1

http://jsfiddle.net/4EmJ9/2/

你在2个父元素上有一些overflow: hidden。我已经更新了你的CSS。

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

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

Answer 2

我不知道你能改变多少css但这是我刚写的一个简单例子：

JSFidle

<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;
}

我知道这并不多，但希望它会指出你正确的方向......

基本的<ul>子菜单在页面上不可见</ul>

2 个答案: