Я разработал подменю с 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;
}
По умолчанию ul
будет вертикальным. float:left
- это то, что делает все это меню горизонтальным.
Попробуйте удалить это и посмотреть, как работает меню.
#menu ul li
{
display: inline-block;
height:46px;
position: relative;
line-height:46px;
font-weight:300;
}