使用CSS水平显示下拉菜单

Question

我正在尝试在SharePoint的Web部件中使用水平列表。 我已经遍历了这段代码，却找不到问题。 由于某些原因，列表仍然垂直显示。 有任何想法吗？

CSS

ul{
        padding: 0;
        list-style: none;
        width:100%;
        text-align:center;
        height: 100px;
        background: #ffffff no-repeat center;
    }
    ul li{
        display:inline-block;
        float: left;    padding: 25px 25px 0 125px;
        margin: 0;
        position: relative;
        font-size: 25px;    font-weight: bold;  color: #FFFFFF; 
        text-align: center;
    }
    ul li a{
        display: block;
        color: #FFF;    padding: 10px 5px;
        text-decoration: none;
    }
    ul li a:hover{

    }
    ul li ul.dropdown{
        min-width: 150px; /* Set width of the dropdown */
        width: 100%;
        display: none;
        position: absolute;
        z-index: 999;
        left: 0;
        float: left;
    }
    ul li:hover ul.dropdown{
        display: inline;    /* Display the dropdown */
        background: #FFFFFF;
        left: 0;
        width:100%;
        margin:0;
        padding:0;

    }
    ul li ul.dropdown li{
        display: inline;
        float: left;
        background: #FFFFFF;
    }

HTML列表（仍在进行中；在修复所有文本/链接之前只是进行测试）

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li>
        <a href="#">Current Performance &#9662;</a>
        <ul class="dropdown">
            <li><a href="#">Grafenwoehr</a></li>
            <li><a href="#">Hohenfels</a></li>
            <li><a href="#">Katterbach</a></li>
    <li><a href="#">Stuttgart</a></li>
    <li><a href="#">Vilseck</a></li>
        </ul>
    </li>
    <li><a href="#">Contact</a></li>
</ul>

我好几年都没有做过这些工作，但老板希望我尝试并完成这项工作。 -_-

Answer 1

您在这里有一个下拉菜单

ul li ul.dropdown {
    width: 100%;
}

相对于100％的宽度

ul li {
    position: relative; 
}

这是罪魁祸首。 删除上面的“ Position：relative”可以解决您的问题。

Answer 2

尝试display:block上UL.dropdown和display:inline-block上UL.dropdown LI 。

Answer 3

您的ul.dropdown确实水平浮动，但是其width迫使元素垂直排列。 要对此进行测试，可以将其min-width设置为900px： DEMO

由于您的ul.dropdown是其父li的子代，因此将其设置为display: inline-block; position: relative; display: inline-block; position: relative; ，则使用width: 100%绑定到其边界。

要解决此问题，您可以删除position: relative li元素的position: relative以删除此边框。 现在它的width: 100%与您的body 。

工作演示

Answer 4

只需从“ ul li”列表中删除（位置：相对；）即可。 代码将类似于：

ul li{
    display:inline-block;
    float: left;    
    padding: 25px 25px 0 125px;
    margin: 0;
    font-size: 25px;    
    font-weight: bold;  color: #FFFFFF; 
    text-align: center;
}

只需将此代码替换为您的代码即可。 谢谢