zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden Problem mit CSS Dropline menü

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 11.08.2009, 19:19
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2009
Beiträge: 2
horst77 befindet sich auf einem aufstrebenden Ast
Standard Problem mit CSS Dropline menü

Hallo lieber CSS Experten,

ich möchte gerne ein Droplinemenü mit CSS realisieren. Leider versuche ich seit mehreren Tagen vergeblich das Problem zu lösen, aber ohne Erfolg.

Mein Menü soll folgende Darstellung haben.
Das obere Menü soll beim aktivierten Zustand eine andere Hintergrundfarbe haben (in der CSS => class="current"). Das klappt auch soweit. Nur das Submenu macht mir sehr viele Probleme. Da mein HTML eine verschachtelte Form hat, übernimmt das Submenu alle Formatierungen vom Hauptmenü.
Ich hab den Verdacht, dass das Submenü vom Hauptmenü die Formatierungen vererbt. Ich kann es aber irgendwie nicht vermeiden, da ich den Fehler nicht finden kann. Bitte hilft mir, ich bin sehr am verzweifeln

Hier ist mein HTML-Code
HTML-Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
     <head>
          <meta http-equiv="content-type" content="text/html; charset=utf-8" />
          <title>Navigationsmenü mit zwei Ebenen</title>
          <link rel="stylesheet" href="top_navi.css" type="text/css" media="screen" />
     </head>
<body>
<div id="naviWrapper">
	<div id="Navigation">
		<ul class="menu">
			<li><a href="#">Home</a></li>

			<li><a href="#">Menüpunkt_1</a></li>
		
	
			<li><a href="#">Menüpunkt_2</a>
				<!--Untermenü von Menüpunkt_2-->
					<ul class="sub_menu">
						<li><a href="#">Menüpunkt_2.1</a></li>
						<li class="sub_current"><a href="#">Menüpunkt_2.2</a></li>
						<li><a href="#">Menüpunkt_2.3</a></li>
						<li><a href="#">Menüpunkt_2.4</a></li>
					</ul>
				<!--Ende Untermenü-->
			</li>
	
			<li><a href="#">Menüpunkt_3</a></li>
		
			<!--Untermenü von Menüpunkt_4-->
			<li><a href="#">Menüpunkt_4</a>
				<ul class="sub">
					<li><a href="#">Menüpunkt_4.1</a></li>
					<li><a href="#">Menüpunkt_4.2</a></li>
					<li><a href="#">Menüpunkt_4.3</a></li>
					<li><a href="#">Menüpunkt_4.4</a></li>
				</ul>
			</li>
			<!--Ende Untermenü-->
					
				<li><a href="#">Menüpunkt_5</a></li>
				<li><a href="#">Menüpunkt_6</a></li>
			</ul>
	</div>
</div>
</body>
</html>

/*CSS*/
Code:
/*Navigation*/

body{
	font-size:62.5%;
}
#naviWrapper {
	background-color:#fff1e6;
	border-left:1px solid #666666; /*äußere Rahmen f&uuml;r die Navigation*/
	border-right:1px solid #666666;
	border-bottom:2px solid #9e131c;
	clear: left;
	margin:50px auto; /*nur hier, ansonsten 0*/
	overflow:hidden;
	width:80%;
	height:4.8em; 
}

#Navigation {
	background:#fff1e6 url(Navi.gif) repeat-x scroll 0 0;
	float:left;
	height:2.3em;
	width: 100%;
	position: relative; 
}

#Navigation ul li {
	display: inline; 
	float: left;
	margin: 0;
	width: auto; 
	padding:0;
 	height:auto; 
	/*border: 1px dashed #FFFF00;*/
	
}

#Navigation  .menu, #Navigation  .current {
	margin:0; 
	padding:0; 
	list-style:none; 
	display:block;
	
}
#Navigation .menu a, #Navigation .current a {
	color:#EAEAEA;
	display: block;
	float:left;
	font-family: Arial;
	font-size: 1.2em;
	font-weight: bold;
	font: Arial, Helvetica, sans-serif;
	height: 100%;
	margin: 0 auto; 
	position: relative;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	padding: 3px 10px 10px 10px;/*richtet den oberen Menüzeile auf dem Hintergrundbild*/ 
	}
	
#Navigation .current a{
	background-color: #fff1e6;
	border-top: 3px solid #9e131c;
	color: #000000;
	padding-top: 1px; 
}
	
#Navigation .menu a:hover, 
#Navigation .menu li:hover a {
	background-position:0 -75px;
	cursor:pointer;
	background-color: #fff1e6;
	border-top: 3px solid #9e131c;
	color: #000000;
	padding-top: 1px;
	}
/*-----------------------------------------------------------------------------
	Untermenü
-------------------------------------------------------------------------------*/
#Navigation ul li ul li{
	display: inline; 
	float: left;
	margin: 0;
	width: ; 
	padding:1px;
 	height:auto; 
	/*border: 1px dashed #00FF00;*/
}
#Navigation .sub{
	position:absolute;
	left:-1000px;
	top:-1000px;
	width:0;
	height:0;
	overflow:hidden;
	display:inline;
/*	display: none;*/
}

#Navigation .sub_menu {
	list-style-image:none;
	list-style-position:outside;
	list-style-type:none;
	margin:0;
	padding:0;
}
#Navigation .sub_menu{
	/*background:##fff1e6 none repeat scroll 0 0;*/
	color:#000000;
	display:block;
	left:0;
	padding:0;
	position:absolute;
	top:25px;
	width: 100%;
	/*height:13px;*/
	z-index:10;
	margin: 0;
	


}

#Navigation .sub_menu a {

	background:#fff1e6 url(http://www.stunicholls.com/menu/pro_dropline_4/diamond.gif) no-repeat scroll right 35%;
	border:0 none;
	color:#818080;
	display:block;
	float:left;
	font-size:1.1em;
	font-family:arial;
	/*height:23.5px;*/
	line-height:20px;
	margin:0;
	padding:1px 10px 10px;
	text-decoration:none;
	white-space:nowrap;

}

#Navigation .sub_menu a:hover {
	color:#000000;
	text-decoration: underline;
	
}

#Navigation .sub_current a{
color:#000000;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 12.08.2009, 12:49
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 11.08.2009
Beiträge: 2
horst77 befindet sich auf einem aufstrebenden Ast
Standard

Hallo Leute!!

Problem gelöst und sehr glücklich
Es war doch noch eine Vererbungsproblem.

LG
Horst
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
Redesign für Steiner Cycling Team pkipper Site- und Layoutcheck 11 09.02.2011 13:25
Einbindung von frei erhältlichen Scripten - CSS Problem DonL CSS 1 22.01.2011 17:09
Problem mit CSS Menü SMundt CSS 9 07.01.2009 20:12
Tab Menü Problem BloodHunger CSS 6 22.12.2008 17:04
Menue Css Problem AKraisser CSS 11 27.11.2008 17:40


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