Проблемы с выпадающим списком меню - PullRequest
Новая
       22

Проблемы с выпадающим списком меню

0 голосов
/ 30 ноября 2010

Я пытаюсь, чтобы выпадающие списки меню отображались встроенными (по горизонтали), но в конечном итоге по вертикали. Если я установлю ширину ul_dropdown равной 600px или около того, получится желаемый результат. Тем не менее, я хочу, чтобы это делалось без установки ширины. Вот мой упрощенный HTML / CSS: 

<style type="text/css">
#menu {
 list-style:none; 
}

#menu .item{
 display:inline;
 position:relative;
 float:left; 
 width:100px;
 height:20px;
 text-align:center;
}

#menu .item .ul_dropdown{
    position:absolute;
 float:left;
    left:-999em;
 list-style:none;
 margin:0px;
 padding:0px;
 border:2px solid red;

}

#menu .item .ul_dropdown li h3{
 margin:0px;
 padding:0px;
}

#menu .item .ul_dropdown li{
 display:inline;
 position:relative;
 float:left;
 list-style:none; 
 margin-right:1px;
}

#menu .item .ul_dropdown li ul{
 display:inline!important;
 position:relative;
 float:left;
 padding:0px;
 margin:0px;
 width:200px;
}

#menu .item .ul_dropdown li ul li{
 border:1px solid blue;
 width:200px;
 height:22px;
}

#menu .item:hover{
 background-color:red; 
}

#menu .item:hover .ul_dropdown {
 left:0px;
 top:auto;
}

#menu .item:hover .ul_dropdown li
{
 display:inline;
 width:200px;
}

</style>
<ul id="menu">
 <li class="item">Main
    <ul class="ul_dropdown">
     <li><h3>Sales</h3>
         <ul>
             <li>Sales Sample 1</li>
                <li>Sales Sample 2</li>
                <li>Sales Sample 3</li>
            </ul>
        </li>
     <li><h3>Invoice</h3>
         <ul>
             <li>Invoice Sample 1</li>
                <li>Invoice Sample 2</li>
            </ul>
     </li>
     <li><h3>Deal</h3>
         <ul>
             <li>Deal Sample 1</li>
                <li>Deal Sample 2</li>
                <li>Deal Sample 3</li>
            </ul>
     </li>        
    </ul>

    <li class="item">1st Menu
    </li>

    <li class="item">2nd Menu
    </li>

    <li class="item">3rd Menu
    </li>
</ul>

Ответы [ 2 ]

1 голос
/ 30 ноября 2010

Используйте display:inline-block; и / или float:left; для ваших li. Должен работать!

0 голосов
/ 30 ноября 2010

Попробуйте просмотреть несколько учебных пособий, в которых рассказывается, как это сделать.

http://www.cssnewbie.com/horizontal-dropdown-menus/

...