Menüleiste/Navigation fixieren Web-Content relativieren für Scrollbalken(don't work)

Davicito

Erfahrenes Mitglied
Morgen allerseits,
ich benötige mal wieder Eure Hilfe in Sachen CSS. Ich sitze wieder an meinem Webseiten-Menü(vertikales Menü) und würde dieses gerne linksbündig, an der Seite meiner Webseite fixieren, so dass ein Content - was nicht in eine Seite passt - mit dem Scrollbalken nach oben geschoben werden kann ohne das dabei das Menü mit nach oben wandert. Es soll sich immer an der selben Stelle befinden.
Leider klappt das mal wieder nicht so, wie ich mir das so, im nachfolgendem Code, geschrieben habe.
In der Parent-Klasse ".menu ul{}" habe ich position:fixed angegeben, um das gesamte menü-fixieren zu können und es bleib auch an der selben Stelle. Nur so klappt sich mein PopUp-Menü nicht mehr so auf (vertikal nach unten), wie es vorher war, ohne das ich position:fixed angegeben hatte. Da funktionierte alles gut, wenn ich in den Child-KLasse ".menu ul li a{}" und im "Menu ul ul li a{}" position:relative; angegeben hatte -> nun ausgeklammert.

Hier mein CSS-Code.
CSS:
.MenuContent{	
	position: relative;
	z-index: 1;
	top:170px;
	left:20px;	
	width: 900px;
	height: 25px;
	border: none;	
	margin-left:160px;	
	
}
/*-------------------------------- Features of Main-Menu --------------------------------*/
/*Basic properties for the hole menu*/
.menu ul{
        position:fixed;
	z-index: 2;
	top: 180px;	
	padding: 0;
	width: 140px; 
	list-style-type: none;	
}
.menu ul li a{
	/*position:relative;
	z-index: 4;*/
	margin:none;	
	display: block;
	
	background: #040B66 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; 
	
	width: 132px;	
	padding: 10px;
	text-indent: 25px; 
	text-decoration:none;
	border-bottom: 10px solid #8AB0D9;
}
.menu ul li a:visited, .menu ul li a:active{
	color: #BDD6F0;  
}
.menu ul li a:hover{
	background-color:#999; 	
}

/*-------------------------------- Features of Sub-Menu --------------------------------*/
.menu ul ul li a{
	/*position:relative;
	z-index:4;*/	
	margin:none;
	display: block;
	background: #8AB0D9 no-repeat right top;
	font: bold 17px "Lucida Grande", "Trebuchet MS", Verdana; 
	width: 130px;
	padding: 5px; 
	text-indent: 25px;
	text-decoration:none;
	border-bottom: 6px solid #BDD6F0;
}
.menu ul ul li a:visited, .menu ul ul li a:active{
	color:#040B66;  
}
.menu ul ul li a:hover{	
	background-color:#999; 
	border-bottom: 6px solid #BDD6F0 ; 
}
.menu ul li > ul{
	display:none;
}
.menu ul li:hover > ul{
	display:block;	
}
/*-------------------------------- Features of Sub-Menu --------------------------------*/
</style>

Über Hilfe von Euch, wäre ich sehr dankbar, weil ich hier mir die Zähne ausbeiße und nicht so recht weiter komme.

LG.
 

Neue Beiträge

Zurück