Niet echt een denderende structuur om het zo aan te pakken.
Dit maak ik er in 10 minuten van...
<style>
/* Resetten van ul (standaard waarden verschillen per browser)*/
body, html{
padding: 0;
margin: 0;
}
.menu ul,
.menu ul li{
list-style: none;
margin: 0;
padding: 0;
}
.menu{
background:#351B00;
padding: 10px;
margin: 10px;
width: 780px;
height: 40px;
}
.menu a{
font-family: Arial, Helvetica, sans-serif;
color: #00CC99;
text-decoration: none;
font-size: 14px;
}
.menu .submenu a{
font-size: 12px;
}
.menu ul li.active,
.menu ul li.inactive{
float: left;
text-align: left;
margin: 0 15px 0 0;
}
.submenu{
display: none;
position: absolute;
left: 0;
padding: 0px 20px 15px; 20px;;
}
.submenu ul li{
float: left;
margin: 0 15px 0 0;
}
li:hover .submenu{
display: block;
}
</style>
<body>
<div class="menu">
<ul>
<li class="active"><a href="#">link1</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1</a></li>
<li><a href="#">Sub link1.2aef</a></li>
<li><a href="#">Sub link1.3eafe</a></li>
</ul>
</div>
</li>
<li class="inactive"><a href="#">link2</a>
<div class="submenu">
<ul>
<li><a href="#">Sub link1.1eafeafe</a></li>
<li><a href="#">Sub link1.2</a></li>
<li><a href="#">Sub link1.3</a></li>
</ul>
</div>
</li>
</ul>
<div style="clear:both;"></div>
</div>
</body>
Link gekopieerd
Link gekopieerd
