zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Navi: Eltern-Element verbreitert sich beim hover auf Kind-Element

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 07.12.2010, 19:42
img img ist offline
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.05.2008
Beiträge: 258
img befindet sich auf einem aufstrebenden Ast
Standard Navi: Eltern-Element verbreitert sich beim hover auf Kind-Element

Hi,

ich bin gerade dabei ein Menü zu bauen und bin auf ein Problem gestoßen, dass ich bisher noch nie hatte:

Mein Menü ist eine normale verschachtelte Liste:
HTML-Code:
<div class="mod_navigation block" id="navi">
    <ul class="level_1">
        <li class="submenu first"><a href="#" title="#" class="submenu first">Kurz</a>
            <ul class="level_2">
                <li class="first"><a href="#" title="#" class="first">#</a></li>
                <li class="last"><a href="#-35" title="#" class="last">#</a></li>
            </ul>
        </li>
    </ul>
</div>

Und hierzu mein CSS:
HTML-Code:
#navi {
    	padding-left:20px;
    }

#navi ul{  /* Menü 1. Ebene */
	list-style:none;
	background: #fff;
	font-family:verdana;
	font-size:11px;
	text-transform:uppercase;
	margin:0px;
	padding:0;

	}

#navi ul li { /* Submenü 1. Ebene */
	float:left;
	position:relative;
	line-height:35px;
	}

#navi a, #navi li .active{ /* Links 1. Ebene*/
	display:block; 
	padding:5px;	
	height:36px;
	color: #333939;
	text-decoration:none;
	border:1px solid #efefef;
	}

#navi li .active, #navi li .trail  {
    background:#efefef;
    }

#navi ul li ul { /* Menü 2. Ebene ausblenden */
    display:none;
	top:36px;
	margin:0;
    }
    
#navi ul li:hover ul{ /* Submenü 2. Ebene einblenden */
	display:block;
    }
    
#navi ul li ul li { /* Submenü 2. Ebene */
    padding:0;
    float:none;
    border:1px solid #333;
    }

#navi ul li ul a{ /*  Links 2. Ebene */
    padding:0;
	}
Der Link-Text in der 1. Ebene ist deutlich kürzer als der Link-Text in der 2. Ebene. Klappt nun die 2. Ebene aus, so wird automatisch die 1. Ebene verbreitert und schiebt den Rest des Menüs nach rechts.

Wie kann ich das denn beheben?
Hier der Live-Link: URL entfernt

Es hat wohl damit zu tun, dass die 1. Ebene keine feste Breite hat, aber genau das möchte ich eben nicht. Das Sub-Menü soll einfach nach rechts wachsen und die 1. Ebene ihre Breite beibehalten. Wäre für einen Tip sehr dankbar, dieses Problem hatte ich irgendwie bisher noch nie.

Grüße img


EDIT:
Da war ich etwas voreilig, habe den Fehler gefunden: In #navi ul hatte sich einfach position:absoulte; davongeschlichen.

Geändert von img (07.12.2010 um 20:05 Uhr)
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
FAQ -- Häufig gestellte Fragen und häufig gegebene Antworten mazzo CSS 10 05.04.2012 18:32
grafische Navigation horizontal zentrieren, klappt nicht lila_3 CSS 4 30.11.2010 11:25
IE verschiebt Navi Menü macmensa CSS 7 17.08.2009 17:45
Probleme mit horizontaler Navi rechts lila_3 CSS 2 14.07.2009 22:36
CSS Einsteiger bittet um Hilfe pcklinik CSS 0 06.09.2007 15:40


Alle Zeitangaben in WEZ +2. Es ist jetzt 11:46 Uhr.