zurück zur Startseite
  


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

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 14.09.2011, 12:26
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard Problem mit dynamischem CSS Menü

Hallo liebe Forenmitglieder,
leider komm ich mal wieder nicht weiter und muss um eure Hilfe bitten

es geht um ein dynamisches CSS-Menü, welches in unseren Online-Shop eingebaut werden soll und "eigentlich" auch schon ist! Nur will der Chef es nun anders haben, und da ich nicht soviel Ahnunng von der Materie habe, beiße ich mir nun die Zähne daran aus und finde auch bei Hr. Google keine Lösung, welche einleuchtend genug erklärt ist, daß ich sie als Laie verstehe

Das Menü funktioniert im Moment so, daß man oben über den Menüpunkt "Katalog-Auswahl" fährt damit das restliche Menü aufklappt. Dieser Schritt soll nun weggelassen werden. Es sollen also die fünf Menüpunkte immer zu sehen sein und der "Katalog Auswahl"-Link soll komplett aus dem Menü entfernt werden.

Die dritte (--> das nach rechts aufklappende Menü) Ebene soll in der Funktion bestehen bleiben!

Wäre sehr nett wenn mir hier jemand auf die Sprünge helfen könnte, hab langsam alles durch und komm einfach nicht mehr weiter.

So hier mal die html-datei:
HTML-Code:
<html>

<head>


<link href="file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/navi.css" rel="stylesheet" type="text/css"/>

</head>



<body>

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("nav_pc_dmenue").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "block";
  }

  window.onload=hoverIE;
}
</script>




	<div>



		<ul id="nav_pc_dmenue">
			
			<li class="level_2">
				<a class="kategorie_link" href="ObjectID=4678">

					Katalog Auswahl
				</a>



				<ul class="sub">

				
					 
					 <li class="top new">
					
					
					  <a href="?ObjectID=653495" class="new_child">
						Original Tinte/Toner
					  </a>
						 
						 <ul style="width:750px;"> 
							
							<li class="title">

								<a href="?ObjectID=653495">Original Tinte/Toner:</a>
							
							</li>		 
							
								 <li>
								   <a href="?ObjectID=655189">Brother</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=653977">Canon</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=654443">Epson</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656437">Fujitsu</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=653496">HP</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655433">Konica Minolta</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655742">Kyocera</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=654710">Lexmark</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656051">Mita</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656156">NEC</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656658">Oce</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655032">OKI</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655635">Olivetti</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656173">Panasonic</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655397">QMS</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656304">Ricoh</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656479">Samsung</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656232">Sharp</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=655541">Tally</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656034">Tektronix</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656674">Telekom</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656378">Toshiba</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656692">Utax</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=655913">Xerox</a>	
								 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=656739" class="new_child">
						Kompatibel Tinte/Toner
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">

							<a href="?ObjectID=656739">Kompatibel Tinte/Toner:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=657351">Farblaserdrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=656740">Laserdrucker S/W</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=657112">Kopierer + Fax</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=657536">Tintenstrahldrucker</a>	
							 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=651674" class="new_child">

						Drucker &amp; Co.
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=651674">Drucker &amp; Co.:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=651680">Farblaserdrucker</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651681">Farb-Multifunktion</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651682">S/W-Laserdrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651683">S/W-Multifunktion</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651684">A3-Drucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1562316">A3-Tintenstrahl-Drucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651685">S/W-Kopierer</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651686">Faxgeräte</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1301912">Tintenstrahldrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=4988897">Gel-Drucker</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=652399">Optionen/Zubehör</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1792167">USB/Netzwerk-Kabel</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=4426464">Überspannungsschutz</a>	
							 </li>

							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=4990147" class="new_child">
						Kabel unter Kontrolle
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=4990147">Kabel unter Kontrolle:</a>
						  </li>		 
							
							 <li>

							   <a href="?ObjectID=4990308">LTC Basic / LTC Basic + Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003158">LTC Roll / LTC Roll + Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003353">LTC Flex</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=5003707">LTC Mini</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003720">LTC Wall</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5004136">LTC Original</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=5004302">LTC Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003993">LTC Sticker</a>	
							 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=1537549" class="new_child">

						Papier &amp; Co.
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=1537549">Papier &amp; Co.:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=1730996">A4 Papier weiß</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=1537550">A3 Papier weiß</a>	
							 </li>
							 
						 </ul>	
					</li>
			   



				</ul>
		 
			</li>
		 
		 </ul>
 
	</div>

</body>


</html>
und hier die dazugehörigen Styles

Code:
/* Dynamisches CSS-Menü von PrinterCare */

#nav_pc_dmenue {
    height: 30px;
    list-style: none outside none;
    position: relative;
    text-align: left;
    width: 172px;
    z-index: 500;
}
#nav_pc_dmenue li a.kategorie_link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #222222;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 27px;
    line-height: 27px;
    padding: 0 10px;
    text-decoration: none;
    width: 150px;
}
#nav_pc_dmenue li:hover a.kategorie_link, #nav_pc_dmenue li.hover a.kategorie_link {
    background: none repeat scroll 0 0 #FFFFFF;
    position: relative;
}
#nav_pc_dmenue li a.kategorie_link span {
    background: url("") no-repeat scroll -995px -339px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav_pc_dmenue li:hover a.kategorie_link span, #nav_pc_dmenue li.hover a.kategorie_link span {
    background: url("") no-repeat scroll -520px -147px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav_pc_dmenue li.level_2, #nav_pc_dmenue li.new {
    background: url("") repeat-x scroll 0 29px #4B4B4B;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    float: left;
    width: 170px;
}
#nav_pc_dmenue li.new {
    background: url("") no-repeat scroll 100% 100% #4B4B4B;
}
#nav_pc_dmenue li:hover, #nav_pc_dmenue li.hover {
    position: relative;
}
#nav_pc_dmenue li:hover ul.sub, #nav_pc_dmenue li.hover ul.sub {
    background: none repeat scroll 0 0 #424242;
    border-top: 1px solid #FFFFFF;
    left: 0;
    padding: 0;
    top: 30px;
    width: 170px;
}
#nav_pc_dmenue li:hover ul.sub li, #nav_pc_dmenue li.hover ul.sub li {
    color: #000000;
    display: block;
    float: left;
    font-weight: normal;
    height: 29px;
    position: relative;
    width: 170px;
}
#nav_pc_dmenue li:hover ul.sub li li, #nav_pc_dmenue li.hover ul.sub li li {
    border-top: 1px solid #DDDDDD;
    height: 29px;
    margin: 0 10px;
}
#nav_pc_dmenue li ul.sub li li.title {
    color: #333333;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 42px;
    margin: 0;
    width: 100%;
}
#nav_pc_dmenue li:hover ul.sub li.title, #nav_pc_dmenue li.hover ul.sub li.title {
    border: 0 none;
}
#nav_pc_dmenue li:hover ul.sub li a, #nav_pc_dmenue li.hover ul.sub li a {
    color: #323232;
    display: block;
    font-size: 12px;
    height: 29px;
    line-height: 29px;
    overflow: hidden;
    padding: 0 10px;
    text-decoration: none;
    width: 170px;
}
#nav_pc_dmenue li ul.sub li a.new_child {
    background: none repeat scroll 0 0 #transparent;
    border-bottom: 1px solid #ffffff;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    overflow: visible;
}
#nav_pc_dmenue li:hover ul.sub li a:hover, #nav_pc_dmenue li.hover ul.sub li a.hover {
    background: none repeat scroll 0 0 #transparent;
    font-size: 12px;
	color: #eb6909;
    text-decoration: underline;
    z-index: 1;
}
#nav_pc_dmenue li:hover ul.sub li a.new_child:hover, #nav_pc_dmenue li.hover ul.sub li a.new_child:hover {
    background: url("file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/arrow_nav_neu.gif") no-repeat scroll 0 0px transparent;
    color: #ffffff;
	border-bottom: none;
    text-decoration: none;
    width: 185px;
    z-index: 9999;
}
#nav_pc_dmenue li:hover li:hover ul, #nav_pc_dmenue li.hover li.hover ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #eb6909;
    left: 170px;
    padding: 20px;
    position: absolute;
    top: -35px;
    width: 1px;
}
#nav_pc_dmenue ul, #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul {
    left: -9999px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -9999px;
    z-index: 1;
}
#nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul {
    position: relative;
}
#nav_pc_dmenue li:hover li:hover a.new_child, #nav_pc_dmenue li.hover li.hover a.new_child {
    background: url("") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    position: absolute;
    width: 150px;
    z-index: 99999;
}
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 14.09.2011, 12:33
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Naja. Ganz banal ist das nicht und man braucht schon ein wenig Grundwissen um das zu machen. Vorallem muss man wissen wie Selektoren funktionieren und was passiert wenn man sie verkettet.

Wenn du das weißt, dann kannst du auch das Menü umbauen. Du musst "nur" die erste Ebene rauslassen, was zur Folge hat, dass die zweite Ebene die erste wird. Dem entsprechend fällt also die Liste .sub raus und du musst das gesamte CSS überarbeiten. Die Klasse .sub darf nicht mehr vorkommen.

Wenn du dir das nicht zutraust, dann empfehle ich dir ein Menü zu suchen, welches deinen bzw. den Anforderungen deines Chefs entspricht.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 14.09.2011, 13:00
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

Danke für deine schnelle Antwort,

ja das mit den Selektoren versteh ich im Ansatz und komm auch langsam rein!
Den Ansatz, daß die zweite Ebene nun die erste werden soll hab ich mir auch schon durch Logik erarbeitet^^

Vielen Dank für den Denkanstoß! Ich fang mal mit dem Umbau an, wenns nicht klappt wird wohl doch noch was von meinem etat verbraten
Mit Zitat antworten
  #4 (permalink)  
Alt 14.09.2011, 18:22
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard weitergekommen :)

So, hab es soweit umgebaut, war eigentlich gar nicht sooo schwer.
Auf jeden Fall danke fürs auf den richtigen Weg bringen

Jetzt hab ich nur noch zwei kleinere Probleme, die ich bis jetzt nicht gelöst bekomme und auch nicht ganz durchsteige, woran es liegt!

Das wäre zum einen die Tatsache, daß in der ursprünglichen Version, das Bild arrow_nav_neu.gif, das rechte flyout-Menü beim überfahren der einzelnen Links überlappt. Und zum zweiten, wenn ich den aktiven Link in der linken Menüleiste verlasse sich die Schriftfarbe in #333333 ändert???

Vielleicht hat ja jemand schnell Zeit sich das kurz anzuschauen.

Vielen Dank schonmal im Vorraus

HTML-Code:
<html>

<head>


<link href="file:///C:/Dokumente%20und%20Einstellungen/mre.PRINTINGGROUP/Desktop/navi.css" rel="stylesheet" type="text/css"/>

</head>



<body>

<script type="text/javascript">
if(window.navigator.systemLanguage && !window.navigator.language) {
  function hoverIE() {
    var LI = document.getElementById("nav_pc_dmenue").firstChild;
    do {
      if (sucheUL(LI.firstChild)) {
        LI.onmouseover=einblenden; LI.onmouseout=ausblenden;
      }
      LI = LI.nextSibling;
    }
    while(LI);
  }

  function sucheUL(UL) {
    do {
      if(UL) UL = UL.nextSibling;
      if(UL && UL.nodeName == "UL") return UL;
    }
    while(UL);
    return false;
  }

  function einblenden() {
    var UL = sucheUL(this.firstChild);
    UL.style.display = "block"; UL.style.backgroundColor = "silver";
  }
  function ausblenden() {
    sucheUL(this.firstChild).style.display = "block";
  }

  window.onload=hoverIE;
}
</script>




	<div>



		<ul id="nav_pc_dmenue">
			
			<li class="level_2">
					
					
					  <a href="?ObjectID=653495" class="new_child">
						Original Tinte/Toner
					  </a>
					  
						 <ul style="width:750px;"> 
							
							<li class="title">

								<a href="?ObjectID=653495">Original Tinte/Toner:</a>
							</li>
							
								<li>
								   <a href="?ObjectID=653977">Canon</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=654443">Epson</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656437">Fujitsu</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=653496">HP</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655433">Konica Minolta</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655742">Kyocera</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=654710">Lexmark</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656051">Mita</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656156">NEC</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656658">Oce</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655032">OKI</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655635">Olivetti</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=656173">Panasonic</a>	
								 </li>
								
								 <li>
								   <a href="?ObjectID=655397">QMS</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656304">Ricoh</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656479">Samsung</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656232">Sharp</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=655541">Tally</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656034">Tektronix</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656674">Telekom</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656378">Toshiba</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=656692">Utax</a>	
								 </li>
								
								 <li>
									<a href="?ObjectID=655913">Xerox</a>	
								 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=656739" class="new_child">
						Kompatibel Tinte/Toner
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">

							<a href="?ObjectID=656739">Kompatibel Tinte/Toner:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=657351">Farblaserdrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=656740">Laserdrucker S/W</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=657112">Kopierer + Fax</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=657536">Tintenstrahldrucker</a>	
							 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=651674" class="new_child">

						Drucker &amp; Co.
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=651674">Drucker &amp; Co.:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=651680">Farblaserdrucker</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651681">Farb-Multifunktion</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651682">S/W-Laserdrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651683">S/W-Multifunktion</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651684">A3-Drucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1562316">A3-Tintenstrahl-Drucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=651685">S/W-Kopierer</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=651686">Faxgeräte</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1301912">Tintenstrahldrucker</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=4988897">Gel-Drucker</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=652399">Optionen/Zubehör</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=1792167">USB/Netzwerk-Kabel</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=4426464">Überspannungsschutz</a>	
							 </li>

							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=4990147" class="new_child">
						Kabel unter Kontrolle
					  </a>
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=4990147">Kabel unter Kontrolle:</a>
						  </li>		 
							
							 <li>

							   <a href="?ObjectID=4990308">LTC Basic / LTC Basic + Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003158">LTC Roll / LTC Roll + Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003353">LTC Flex</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=5003707">LTC Mini</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003720">LTC Wall</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5004136">LTC Original</a>	
							 </li>
							
							 <li>

							   <a href="?ObjectID=5004302">LTC Label</a>	
							 </li>
							
							 <li>
							   <a href="?ObjectID=5003993">LTC Sticker</a>	
							 </li>
							 
						 </ul>	
					</li>
			   



				
					
					<li class="level_2">
					
					
					  <a href="?ObjectID=1537549" class="new_child">

						Papier &amp; Co.
					  </a>
						 
						 <ul style="width:750px;"> 
						  <li class="title">
							<a href="?ObjectID=1537549">Papier &amp; Co.:</a>
						  </li>		 
							
							 <li>
							   <a href="?ObjectID=1730996">A4 Papier weiß</a>	
							 </li>

							
							 <li>
							   <a href="?ObjectID=1537550">A3 Papier weiß</a>	
							 </li>
							 
						 </ul>	
					</li>
			   
				</li>
		 
		 </ul>
 
	</div>

</body>


</html>
Code:
/* Dynamisches CSS-Menü von PrinterCare */

#nav_pc_dmenue {
    height: 30px;
    list-style: none outside none;
    position: relative;
    text-align: left;
    width: 172px;
    z-index: 500;
}
#nav_pc_dmenue li a.kategorie_link {
    background: none repeat scroll 0 0 #FFFFFF;
    color: #ffffff;
    cursor: pointer;
    display: block;
    float: left;
    font-size: 12px;
    font-weight: bold;
    height: 29px;
    line-height: 29px;
    padding: 0 10px;
    text-decoration: none;
    width: 150px;
}
#nav_pc_dmenue li:hover a.kategorie_link, #nav_pc_dmenue li.hover a.kategorie_link {
    background: none repeat scroll 0 0 #transparent;
    position: relative;
}
#nav_pc_dmenue li a.kategorie_link span {
    background: url("") no-repeat scroll -995px -339px transparent;
    display: block;
    float: left;
    height: 29px;
    width: 15px;
}
#nav_pc_dmenue li:hover a.kategorie_link span, #nav_pc_dmenue li.hover a.kategorie_link span {
    background: url("") no-repeat scroll -520px -147px transparent;
    display: block;
	color:ffffff;
    float: left;
    height: 29px;
    width: 15px;
}
#nav_pc_dmenue li.level_2, #nav_pc_dmenue li.new {
    background: url("") repeat-x scroll 0 29px #4B4B4B;
    border-bottom: 1px solid #FFFFFF;
    display: block;
    float: left;
    width: 170px;
	line-height: 29px;
	height: 29px;
}
#nav_pc_dmenue li.new {
    background: url("") no-repeat scroll 100% 100% #4B4B4B;
	line-height: 29px;
	height: 29px;

}

#nav_pc_dmenue li:hover, #nav_pc_dmenue li.hover {
    position: relative;
}
#nav_pc_dmenue li:hover ul, #nav_pc_dmenue li.hover ul {
    background: none repeat scroll 0 0 #ffffff;
    border: 1px solid #eb6909;
    left: 170px;
    padding: 20;
    top: -35px;
    width: 170px;
	line-height: 29px;
}
#nav_pc_dmenue li:hover ul li, #nav_pc_dmenue li.hover ul li {
    color: #000000;
    display: block;
    float: left;
    font-weight: normal;
    height: 29px;
    position: relative;
    width: 170px;
}
#nav_pc_dmenue li:hover ul li, #nav_pc_dmenue li.hover ul li {
    border-top: 1px solid #DDDDDD;
    height: 29px;
    margin: 0 10px;
}
#nav_pc_dmenue li ul li.title {
    color: #333333;
    display: block;
    font-size: 12px;
    font-weight: bold;
    height: 42px;
    margin: 0;
    width: 100%;
}
#nav_pc_dmenue li:hover li.title, #nav_pc_dmenue li.hover li.title {
    border: 0 none;
}
#nav_pc_dmenue li:hover a, #nav_pc_dmenue li.hover a {
    color: #323232;
    display: block;
    font-size: 12px;
    height: 29px;
    line-height: 29px;
    overflow: hidden;
	padding: 0 10px;
    text-decoration: none;
    width: 170px;
}
#nav_pc_dmenue a.new_child {
    background: none repeat scroll 0 0 #transparent;
    color: #FFFFFF;
    font-size: 12px;
    font-weight: normal;
    overflow: visible;
	text-decoration: none;
	padding-left: 10px;

}
#nav_pc_dmenue li:hover a:hover, #nav_pc_dmenue li.hover a.hover ul {
    background: none repeat scroll 0 0 #transparent;
    font-size: 12px;
	color: #eb6909;
    text-decoration: underline;
}
#nav_pc_dmenue li:hover a.new_child:hover, #nav_pc_dmenue li.hover a.new_child:hover {
    background: url("http://www.printer-care.de/logos/menue_test/arrow_nav_neu.gif") no-repeat scroll 0 0px transparent;
    color: #ffffff;
	border-bottom: none;
    text-decoration: none;
    width: 185px;
    z-index: 9999;
}
#nav_pc_dmenue li:hover li:hover ul, #nav_pc_dmenue li.hover li.hover ul {
    background: none repeat scroll 0 0 #FFFFFF;
    border: 1px solid #eb6909;
    left: 170px;
    padding: 20px;
    position: absolute;
    top: -35px;
}
#nav_pc_dmenue ul, #nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul {
    left: -9999px;
    list-style: none outside none;
    margin: 0;
    padding: 0;
    position: absolute;
    top: -9999px;
    z-index: 1;
	color:ffffff;
}
#nav_pc_dmenue li:hover ul ul, #nav_pc_dmenue li.hover ul ul {
    position: relative;
}
#nav_pc_dmenue li:hover li:hover a.new_child, #nav_pc_dmenue li.hover li.hover a.new_child {
    background: url("") no-repeat scroll 0 -1px transparent;
    color: #FFFFFF;
    position: absolute;
    width: 150px;
    z-index: 99999;
}
Mit Zitat antworten
  #5 (permalink)  
Alt 14.09.2011, 18:35
Benutzerbild von Praktikant
Semantikbremse.
XHTMLforum-Kenner
 
Registriert seit: 22.04.2008
Beiträge: 4.985
Praktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz seinPraktikant kann auf vieles stolz sein
Standard

Kannst du bitte einen Link posten? Falls du es nicht hochgeladen hast, dann mach es über einen "Freehoster".

Denke aber daran den Pfad zum Stylesheet an den Server anzupassen.
__________________
Rettet die Erde.... sie ist der einzige Planet mit Schokolade!
Mit Zitat antworten
  #6 (permalink)  
Alt 15.09.2011, 09:02
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

So habs mal hochgeladen.

http://www.printer-care.de/logos/menue_test/test.html
Mit Zitat antworten
  #7 (permalink)  
Alt 15.09.2011, 09:57
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 21.07.2011
Beiträge: 9
riseup befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
Zitat von riseup Beitrag anzeigen
Hab das alte Menü auch hochgeladen:

http://www.printer-care.de/logos/men.../test_alt.html
Mit Zitat antworten
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 09:57 Uhr.