Gente eu estou com uma dificuldade sou novo em css e estou criando um menu dropdown de 2 niveis ele está quase pronto mas tem um problema, não consigo criar o nivel 2, ja fiz de tudo se puderem me ajudar. Segue o codigo abaixo.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" >
$(document).ready(function() {
$(".onclick").click(function() {
var X=$(this).attr('id');
if(X==1) {
$(".submenu").hide();
$(this).attr('id', '0');
}
else {
$(".submenu").show();
$(this).attr('id', '1');
}
});
$(".submenu").mouseup(function() {
return false
});
$(".onclick").mouseup(function() {
return false
});
$(document).mouseup(function() {
$(".submenu").hide();
$(".onclick").attr('id', '');
});
});
</script>
</head>
<body>
<div id="top">
<div class="center">
<div class="dropdown">
<a class="onclick" ><span>Menu</span></a>
<div class="submenu" style="display:none;">
<ul class="raiz">
<li><a href="#">Test 1</a>
<ul>
<li><a href="#">Test 1</a>
<li><a href="#">Test 2</a>
</ul>
</li>
<li><a href="#">test 2</a></li>
<li><a href="#">test 3</a></li>
<li><a href="#">test 4</a></li>
<li><a href="#">test 5</a></li>
</ul>
</div>
</div>
</div>
</div>
</body>
</html>
@charset "utf-8";
/* CSS Document */
html, body, li{margin:0;padding:0;list-style: none;}
body { font-family:arial; }
#top{
width:100%;
height:50px;
background:#151412;
}
div.dropdown{
float:left;
background: #741B09;
color: #D6BBB6;
width: 80px;
height:30px;
position: relative;
text-align:center;
line-height:30px;
border-radius:5px;
top:10px;
}
div.submenu {
background: #fff;
position: absolute;
top: 40px;
left: -20px;
z-index: 100;
width: 230px;
display: none;
margin-left: 10px;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
text-align: left;
}
.dropdown li a {
color: #555555;
display: block;
font-family: arial;
font-weight: bold;
padding: 6px 15px;
cursor: pointer;
text-decoration:none;
width:200px;
}
.dropdown li a:hover{
background:#155FB0;
color: #FFFFFF;
text-decoration: none; }
a.onclick {
font-size: 12px;
color: #D6BBB6; position:
absolute; z-index: 110;
display: block;
width:80px;
text-decoration: none;
background: url(../icons/arrow.png) 65px 15px no-repeat;
cursor:pointer;
text-align:center;
}
a.onclick:hover{
background:#D90007;
color:#fff;
border-radius:5px;
}
.raiz { list-style:none; margin:0px; padding:0px; font-size: 11px;padding: 11px 0 0 0px; border-top:1px solid #dedede; }
.center{
width:1200px;
height:100%;
margin:0 auto;
}