Placing divs inside li in one line

Question

Well I want to do a drop down menu in one of <li> element of <ul>. Here is what I'm trying to do. 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;
}

I want divs and ul to be in one line. Any suggestions?

Answer 1

Replace your css with this.

.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