Menu com submenu divido em 2 colunas
Boa tarde pessoal!
Estou com uma duvida, gostaria de saber como colunas 2 colunas em um submenu
Segue exemplo
www.cemafil.com.br na aba produtos.
O que tenho agora é um menu com o submenu, porém não estou conseguindo acrescentar no submenu as opções em 2 colunas
HTML
<div id="menuEsticado">
<div id="menuInterno">
<ul>
<li><a href="index.html">Home</a></li>
<li><a href="quemsomos.html">Quem Somos</a></li>
<li><a href="">Produtos</a>
<ul>
<li><a href="">Produto 1</a>
<ul>
<li><a href="">Item 01</a></li>
<li><a href="">Item 02 </a></li>
<li><a href="">Item 03</a></li>
<li><a href="">Item 04</a></li>
<li><a href="">Item 05</a></li>
<li><a href="">Item 06</a></li>
<li><a href="">Item 07</a></li>
<li><a href="">Item 08</a></li>
</ul>
<ul>
<li><a href="">Item 09</a></li>
<li><a href="">Item 10</a></li>
<li><a href="">Item 11</a></li>
</ul>
</li>
<li><a href="">Produto 02</a>
<ul>
<li><a href="">Item 01</a></li>
<li><a href="">Item 02</a></li>
<li><a href="">Item 03</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="contato.php">Contato</a></li>
<li><a href="localizacao.html">Localização</a></li>
</ul>
</div>
</div>
CSS
#menuEsticado {width: 100%; background:url(/Imagens/menu.jpg) repeat-x; height: 35px;}
#menuInterno {width: 1024px; background:url(/Imagens/menu.jpg) repeat-x; height: 35px; margin: 0 auto;}
#menuInterno ul {list-style: none;}
#menuInterno li {position: relative; float: left;}
#menuInterno li a {background:url(/Imagens/menu.jpg) ; display: block; float: left; padding: 0 67px; height: 35px; line-height: 35px; color:#ccf; text-decoration: none;}
#menuInterno li a:hover {background:url(/Imagens/menu-on.jpg) repeat-x;}
#menuInterno li ul {display:none; position:absolute; top: 35px; left: -40px;}
#menuInterno li:hover ul {display: block;}
#menuInterno li ul li{width:258px;cursor: pointer;}
#menuInterno li ul li:hover > a{background:url(/Imagens/menu-on.jpg) repeat-x;color:#FFFFFF;}
#menuInterno li ul li ul li{display:none;}
#menuInterno li ul li ul{top:0;left: 45px; / para deixar o sub-menu na mesma linha do menu pai /}
#menuInterno li ul li:hover ul li{display:block;width:170px;left:100%; / para deixar o sub-menu ao lado do menu pai /}
#menuInterno li ul a {width: 120px; border-bottom: 1px solid #fff;}
Grato!
Alguém?
Discussão (2)
Carregando comentários...