Tweet
Hallo zusammen,
hab ein Problem mit folgendem Tab Menü auf zwei Ebenen:
Undzwar muss ich es erreichen das die Zweite Ebene maximal die Breite der ersten Ebene besitzt. Wichtig bei der Lösung ist das die Verschachtelung (UL LI UL) beibehalten werden muss. Ich hoffe ihr könnt mir weiterhelfen.
hab ein Problem mit folgendem Tab Menü auf zwei Ebenen:
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Unbenanntes Dokument</title>
<style type="text/css" >
#header {
clear: none;
float: none;
width: 100%;
display: block;
background-color: #fe812f;
height: 57px;
}
#nav {
clear: both;
float: left;
margin-left: 0;
width: 100%;
display: block;
}
header nav ul {
display:inline-block;
float: left;
width:100%;
margin: 0;
padding: 0;
background-color: #181818;
text-align: justify;
}
header nav ul li {
display: inline;
font-size:1.1em;
}
header nav ul li a {
float: left;
line-height: 50px;
color: #747474;
text-decoration: none;
text-align:center;
background-color: #181818;
width:14.35%; /* Attention !! This value is for exactly six main menu entries*/
box-shadow: inset 0px 0px 1px rgba(255,255,255,0.9);
margin-right:-1px;
}
/* APPLIES THE ACTIVE STATE TO PARENT*/
header nav ul .currentParent a, header nav ul li:hover > a {
color: #ffffff;
text-decoration: none;
}
header nav ul ul {
display: none;
font-size:.8em;
}
header nav ul li.currentParent > ul
{
position: absolute;
display: block;
height: 50px;
margin-top: 50px;
background-color: #fff;
}
</style>
</head>
<body>
<div style="width:60%">
<header>
<nav>
<ul>
<li class="currentParent"><a href="#">Menu1</a>
<ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul>
</li>
<li><a href="#">Menu2</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
<li><a href="#">Menu3</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
<li><a href="#">Menu4</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
<li><a href="#">Menu5</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
<li><a href="#">Menu6</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
<li><a href="#">Menu7</a> <ul>
<li><a href="#">submenu1</a></li>
<li><a href="#">submenu2</a></li>
<li><a href="#">submenu3</a></li>
<li><a href="#">submenu4</a></li>
<li><a href="#">submenu5</a></li>
<li><a href="#">submenu6</a></li>
</ul></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
Comment