Zweite Ebene einer Drop-Down Navigation wird immer zu breit

Widget · 5. März 2008

Hi @ all,

ich habe im Netz eine Drop-Down Navigation gefunden, die 3 navigationsebenen hatte.
Ich benötige jedoch nur 2 und habe sie dementsprechend verkürzt und auf meine gewünschte Größe abgeändert.
Dies hat auch so weit ganz gut geklappt, jedoch werden die Navigationeinträge, der zweiten Ebene etwas breiter, als die der ersten (außer bei der Überschrift 5)
Vielleicht könnt ihr mir ja was weiterhelfen.
Die Schriften der zweiten Ebene sollen gleich der ersten Ebene sein.

Desweiteren würde ich gerne je einen 60px breiten Block links und rechts neben die Überschriften setzen, die eine feste Farbe - in diesem Fall weiß - bekommen sollen und nich über die Navigation ansprechbar sein sollen. Wie mache ich das am besten ?

Hier wäre der Code:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">

<head>
<title>Titel</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
</head>
<body>
    <div class="topnavi">
        <ul>
            <li><a href="#">&Uuml;berschrift 1</a>
                    <ul>
                        <li><a href="#">Punkt 1</a></li>
                        <li><a href="#">Punkt 2</a></li>
                        <li><a href="#">Punkt 3</a></li>
                        <li><a href="#">Punkt 4</a></li>
                    </ul>
            </li>
            <li><a href="#">&Uuml;berschrift 2</a>
                	<ul>
                    	<li><a href="#" >Punkt 1</a></li>
                    	<li><a href="#" >Punkt 2</a></li>
                    	<li><a href="#" >Punkt 3</a></li>
                    	<li><a href="#" >Punkt 4</a></li>
                    </ul>
            </li>
                <li><a href="#">&Uuml;berschrift 3</a>
                    <ul>
                        <li><a href="#">Punkt 1</a></li>
                        <li><a href="#">Punkt 2</a></li>
                        <li><a href="#">Punkt 3</a></li>
                        <li><a href="#">Punkt 4</a></li>
                    </ul>
                </li>
                <li><a href="#">&Uuml;berschrift 4</a>
                    <ul>
                        <li><a href="#">Punkt 1</a></li>
                        <li><a href="#">Punkt 2</a></li>
                        <li><a href="#">Punkt 3</a></li>
                        <li><a href="#">Punkt 4</a></li>
                    </ul>
                </li>
                <li><a href="#">&Uuml;berschrift 5</a>
                    <ul>
                        <li><a href="#">Punkt 1</a></li>
                        <li><a href="#">Punkt 2</a></li>
                        <li><a href="#">Punkt 3</a></li>
                        <li><a href="#">Punkt 4</a></li>
                    </ul>
            	</li>
        </ul>
    </div>
</body>
</html>

und hier die CSS-Datei:

Code:

* {
    margin: 0px;
    padding: 0px;
}
.topnavi {
    width:720px;
    font-size:14px;
    padding-bottom:0px;
}
.topnavi ul {
    list-style-type:none;
}
.topnavi ul ul{
    width: 120px;
}
/* stellt das Menue horizontal dar */
.topnavi li {
    float:left;
    width:120px;      /*Breite der ersten Ebeneneinträge*/
    position:relative;
}
/*Navigationsleiste stylen */
.topnavi a, .topnavi a:visited {
    display:block;                  /*setzt Block um jeden Punkt*/
    font-size:14px;
    text-decoration:none;
    color:#000000;
    width:120px;
    height:24px;
    border:1px solid #000;
    border-width:1px;
    background:#ffffff;
    padding-left:4px;
    line-height:20px;
}
/*Grundfarbe der zweiten Hirarchie, wenn runtergeklappt */
.topnavi ul ul a.drop:hover{
    background:magenta;
}
/* die zweite Ebene verstecken */
.topnavi ul ul {
    visibility:hidden;
    position:absolute;
    height:0;
    top:25px; /* Abstand der zweiten Hirachche zur ersten ACHRTUNG: Boarder beachten*/
    left:0;
    width:120px;
}
.topnavi table {position:absolute; top:0; left:0;}
.topnavi ul ul a, .topnavi ul ul a:visited {     /* Links der zweiten Ebene stylen */
    background:#f0f0f0;                    /* Hintergrund der Menuepunkte */
    color:#000000;                         /* Schriftfarbe der zweiten Hirachchie&nbsp;*/
    height:auto;
    line-height:20px;
    /*padding:5px 0 5px 5px;     /*<<<<< DA KOMMT DER BOESE BREITMACHER HER */
    width:120px
}
/*.topnavi a:hover, .topnavi ul ul a:hover{
/*color:cyan;
/*background:#ffffff;
/*}   */
.topnavi :hover > a, .topnavi ul ul :hover > a {
    color:#ffffff;
    background:magenta;
}
/*zweite Ebene bei einem Hover ueber die erste Ebene sicherbar machen*/
.topnavi ul li:hover ul,
.topnavi ul a:hover ul{
    visibility:visible;
}

Schonmal vielen dank für die - hoffentlich kommende - Hilfe.

Maik · 5. März 2008

Hi und herzlich Willkommen im Forum

Du solltest dich mal mit dem CSS-Boxmodell näher beschäftigen, wie sich die Abmessungen einer Box zusammensetzen, und anschliessend die Breiten-, Rahmen- und Innenabstandangaben der einzelnen Elemente miteinander vergleichen und aufeinander abstimmen.

Zweite Ebene einer Drop-Down Navigation wird immer zu breit

Widget

Maik

Neue Beiträge