Как получить вертикальное подменю вместо горизонтального?

0

Я разработал подменю с CSS & jQuery, и я решил, что это вертикальное подменю, но я получаю горизонтальное меню.

Я уже пытался "играть" с отображением в CSS, но не работал, как #menu ul li ul li a {display: inline-block;}.

Кто-нибудь знает трюк, чтобы поместить это подменю в вертикальное положение?

Мой jsfiddle с полным примером:

http://jsfiddle.net/jcak/9EcnL/7/

Мой html:

<section id="menu-container">

    <nav id="menu">
        <ul>    
            <li><a href="index.html">Home</a>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </li>
            <li><a href="procuts.html">Procuts</a>
                <ul>
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                    <li><a href="#">Link 3</a></li>
                    <li><a href="#">Link 4</a></li>
                </ul>
            </li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contacts</a></li> 
       </ul>
    </nav>   
</section>

Мой css:

#menu ul li ul li {display: none;}

#menu-container
{

    background:green;
    width:100%; 
    height:46px; 
    float:left;  
    z-index:7;
}

#menu
{
    width:960px; 
    height:auto; 
    margin:0 auto 0 auto;
}

#menu ul
{
    list-style-type:none;
}

#menu ul li 
{
    display: inline-block;
    float:left; 
    height:46px;
    position: relative;
    line-height:46px; 
    font-weight:300;

}

#menu ul li a
{
    text-decoration:none;
    color:#ccc;  
    display:block; 
    margin-right:5px; 
    height:46px; 
    line-height:46px; 
    padding:0 5px 0 5px;
    font-size:20px; 

}

#menu ul li a:hover
{
    color:#fff;
}
#menu ul li ul {
    position: absolute;
    left: 0;
    -webkit-padding-start: 0;
    width: 300px;
}
#menu ul li ul li
{
    color:#fff;

}
Теги:

2 ответа

2
Лучший ответ

По умолчанию ul будет вертикальным. float:left - это то, что делает все это меню горизонтальным.

Попробуйте удалить это и посмотреть, как работает меню.

1

Рабочий скрипт

#menu ul li 
{
  display: inline-block;
  height:46px;
  position: relative;
  line-height:46px; 
  font-weight:300;
}

Ещё вопросы

Сообщество Overcoder
Наверх
Меню