• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Brauche dringende Hilfe mit 2 Level Tab Menü

Z

zunrise

Neues Mitglied
Habe hier folgenden Aufbau eines Tab Menüs 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>

Mein Problem hierbei ist das das horizontale Untermenü über den div container geht. Irgendwie muss ich es hinbekommen das die breite des Untermenüs maximal die Breite des Hauptmenüs hat. Wichtig hierbei ist zu erwähnen das ich die Art und Weise wie die Verschachtelung hier ist, so beibehalten muss. Ich hoffe ihr könnt mir helfen.
 
Hallo,

das geht nicht was möchtest, zumindest nicht pauschal.
was bei 4 unterpunkten oder bei 5?

Kommt drauf an wie das menü erstelt wird, wenn es von ein cms kommt haben die meistens eigene classen so das bei 4 oder 5 unterpunkte die unterschietlich breit machen kannst.

machst das noch per Hand dann must die ul der unterpunkte eigene classen geben zb
navi-5-kids
Zum Vergrößern anklicken....

oder das geht natürlich auch per javascript automatisch einfügen.

Cheffchen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben