Menu com submenu divido em 2 colunas

[Feeeh 0]

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?

[thyquevedo 6]

Dá uma pesquisada por "Mega Menu CSS3", é o que você precisa.

[GustavoDose 1]

Cara teu html ta errado cara :(

 

 

Da uma revisada no teu html