Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Como criar um menu semelhante ao do site submarino.com.br?
blz cara, então queria um menu parecido com o do submarino.com.br achei um aqui tri-nivel bem legal
http://www.overpie.com/css/articles/css-vertical-fly-out-menu
só não consegui fazer o efeito de exibir e ocultar do jeito que queria, consigo exibir e ocultar mas so na div que coloquei o texto por exemplo "menu" o restante inicia oculto quando passo o mouse ele aparece só que ele desaparece ao mover o mouse porque o hover está errado, não consigo manter o hover nos <li> e desculpe pelo tamanho do texto rsrs estou tentando explicar detalhadamente pra vcs poderem ajudar
tem como vc postar seu código para poder dar uma olhada?
<html><head><title></title><link href="css_estilo.css" type="text/css" rel="Stylesheet" /></head><body><div id="menu"> <div id="item_menu"> <a href="">Menu</a> </div> <div id="menuwrapper" class="mostrar"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Products</a> <ul> <li><a href="#">Product 1</a> <ul> <li><a href="#">Sub Product 1</a></li> </ul> </li> <li><a href="#">Product 2</a></li> </ul> </li> <li><a href="#">Help</a> </ul> </div></div></body></html>
'
/ Define the body style /
body { font-family:Arial; font-size:12px;} / We remove the margin, padding, and list style of UL and LI components /#menu > div{ display:none;}#menu > div:first-child{ display:block;}#menu > div:hover + div{ display:block;}#menuwrapper ul, #menuwrapper ul li{ margin:0; padding:0; list-style:none;} / We apply background color and border bottom white and width to 150px /#menuwrapper ul li{ background-color:#7f95db; border-bottom:solid 1px white; width:150px; cursor:pointer;} / We apply the background hover color when user hover the mouse over of the li component /#menuwrapper ul li:hover{ background-color:#6679e9; position:relative;} / We apply the link style /#menuwrapper ul li a{ padding:5px 15px; color:#ffffff; display:inline-block; text-decoration:none;} /** SECOND LEVEL MENU **// We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item /#menuwrapper ul li ul{ position:absolute; display:none;} / When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width. /#menuwrapper ul li:hover ul{ left:150px; top:0px; display:block;} / we apply different background color to 2nd level menu items/#menuwrapper ul li ul li{ background-color:#cae25a;} / We change the background color for the level 2 submenu when hovering the menu /#menuwrapper ul li:hover ul li:hover{ background-color:#b1b536;} / We style the color of level 2 links /#menuwrapper ul li ul li a{ color:#454444; display:inline-block; width:120px;} /** THIRD LEVEL MENU **// We need to hide the 3rd menu, when hovering the first level menu /#menuwrapper ul li:hover ul li ul{ position:absolute; display:none;} / We show the third level menu only when they hover the second level menu parent /#menuwrapper ul li:hover ul li:hover ul{ display:block; left:150px; top:0;} / We change the background color for the level 3 submenu/#menuwrapper ul li:hover ul li:hover ul li{ background:#86d3fa;} / We change the background color for the level 3 submenu when hovering the menu / #menuwrapper ul li:hover ul li:hover ul li:hover{ background:#358ebc;} / We change the level 3 link color /#menuwrapper ul li:hover ul li:hover ul li a{ color:#ffffff;} / Clear float /.clear{ clear:both;}
foi mal pela bagunça foi duplicado...
dae fera blz? eu acho que vc quer um menu drop down, é isso?