Question

好吧，我想在<li> <ul>元素之一中执行下拉菜单。这就是我想要做的事情。 HTML：

<ul class="navigationTable">
<li>1</li>
<li>2</li>
<li><div id="comittee">
        <div id="comiteesName">here should be dropdown menu name</div>
        <div class="arrow-down"></div>
        <ul class="comiteeDropdown">
           <li></li>
           <li></li>
           <li></li>
...
           <li></li>
        </ul>
    </div>
</li>
<li>3</li>
<li>4</li>
</ul>

CSS：

.comiteeDropdown li{
    display: inline-block;
    position: relative;
    vertical-align:middle;
    margin: 0;
    padding:0;
    border-width: 0;
}
#comiteesName{
    float:left;
}
.comiteeDropdown{
    float:left;
}
.navigationTable li{
    display: inline-block;
    position: relative;
    vertical-align:middle;
    margin: 0;
    padding:0;
    border-width: 0;
}
.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-top: 5px solid #f00;
    float: left;
    position:relative;
}

我希望div和ul在一行中。有什么建议吗？

Answer 1

用这个替换你的css。

.arrow-down {
    width: 0; 
    height: 0; 
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;    
    border-top: 5px solid #f00;
    float: left;
    position:relative;
}

<强> DEMO

将div放在li中的一行

1 个答案: