CSS Formatierung von <ul> und <il> Tags (verschachtelt im Menu)?!

[nascituruz]

kann mir jemand helfen ich will für jedes Listen element ne eigene Formatirung haben UNABHÄNGIG von den anderen drum rum wie muss ich das machen, habs probiert will aber nicht funktionieren... hier mal der code

<ul id="treemenu1" class="treeview">
<li ><a class="menu" href="../index.php" title="Startseite">Startseite</a></li>
<li>LHS Gruppe 
 <ul ><li class="submenul1">Hebe- und Zurrtechnik
  <ul ><li ><a class="menu" href="../huz/profilhuz.php" title="Profil der LHS Hebe- und Zurrtechnik GmbH">Profil</a></li>
   <li><a class="menu" href="../huz/produkthuz.php" title="Produkte der LHS Hebe- und Zurrtechnik GmbH">Produkte &amp; Leistungen</a></li>
   <li><a class="menu" href="../huz/kontakthuz.php" title="Kontaktinformationen der LHS Hebe- und Zurrtechnik GmbH">Kontakt</a></li>
  </ul></li></ul>

und hier die formatierung geht das überhaupt?!

ul.treeview li:hover {
 color:darkblue;
 font-size:12,5px;
 font-style: strong;
}
ul.treeview li.submenu:hover {
 color:red;
 font-size:12,5px;
 font-style: strong;
}
ul.treeview li.submenu ul:hover {
 color:black;
 font-size:12,5px;
 font-style: strong;
}
ul.treeview li.submenu ul li:hover {
 color:white;
 font-size:12,5px;
 font-style: strong;
}

 

[neuroleptika]

Verschachtele Listen formatieren

Gehen wir mal von folgender Liste aus
html:

<ul id="treemenu">
  <li id="list1"><a href="#>Startseite</a></li>
  <li>LHS Gruppe 
   <ul >
    <li>Hebe- und Zurrtechnik
     <ul >
     <li id="list2">
       <a href="#" >Profil</a></li>
     <li id="list3"><a href="#" >Produkte &amp; Leistungen</a></li>
     <li id="list4"><a href="#" >Kontakt</a></li>
    </ul>
   </li> 
  </ul>
 </li>
 <li id="list5"><a href="#">Weiterer Link</a></li>
</ul>

css:

  #treemenu, #treemenu ul { 
  /* betrifft das ganze Menü*/
  background-color: #116FAE; 
  list-style: none;
  }
  #treemenu li { 
  /* betrifft alle li im Menü*/
  background-color: #5D8F99;
  }

  #treemenu li a { 
  /* betrifft alle links im a-Tag*/
  background-color: #9D4443; 
  display: block;
  text-decoration: none;
  }

  #treemenu li a:hover { 
  /* betrifft alle links im a-Tag beim überfahren mit der Maus*/
   text-decoration: underline;
  }

  #treemenu li ul li a {  
  /* betrifft alle a-Tags im Untermenü*/
   background-color: #FF2B0A;
  }

  #treemenu li ul li a:hover {  
  /* betrifft alle a-Tags im Untermenü beim  überfahren mit der Maus*/
   background-color: #58ABAE;
  }

  #treemenu #list3 a { 
  /* betrifft nur den a-Tag in li mit id="list3"*/
  text-decoration: none;
  font-weight: bold;
  color: #000000;
  background-color: #ffffff;
  }

Der letzte Eintrag "#treemenu #list3 a" ist wohl der, den du meinst.

 

[koslowski]

Moin,

vielleicht noch zur Ergänzung:

Der IE6 kennt :hover nur in Verbindung mit a, mit li:hover kann er deshalb nix anfangen.

koslowski

 

[nascituruz]

so habs nu so gemacht und es funktioniert im "ie7" und "firefox2" hier mal der code für die css:

ul { /*<ul>*/
margin-top:5px;
margin-left: 3px;
margin: 0;
padding: 0;
}
.treeview {/*<class="treeview">*/
color:black;
}
.treeview ul{ /*<ul class="treeview">*/
color:black;
}
.treeview li:hover { /*<il class="treeview"> Hover*/
color:#564b47;
}

HTML:

<ul id="treemenu1" class="treeview">
<li>Link1</li>
<li>Submenu 
    <ul><li>Submenu
         <ul><li>Slink1</li>
               <li>Slink2</li>
               <li>Slink3</li>
         </ul>
         </li>
    </ul>
 </li>
</ul>

Jetzt scheint es zu funktionieren, danke an die Hilfe hat mich auf den richtigen Weg gebracht ;)

Grüße Nascituruz

 

[neuroleptika]

margin-top und margin-left überschreibst du mit margin:0

ul { 
margin-top:5px;
margin-left: 3px;
margin: 0;
padding: 0;
}

Du müsstest es andersherum schreiben:

ul { 
margin: 0;
margin-top:5px;
margin-left: 3px;
padding: 0;
}

oder so:

ul { 
 margin: 5px 0px 0px 3px;
padding: 0;
 }

Das funktioniert so nicht im Internet Explorer 6:

.treeview li:hover { 
color:#564b47;
}

Wie koslowski schon schrieb, wendet der IE bis einschließlich Vers6 :hover nur auf den a-Tag an:

.treeview li a:hover { 
color:#564b47;
}

So wird es in allen wichtigen Browsern gehen.
Wenn auch die li ohne a-Elemente ein :hover bekommen sollen,
Hilft dir das Javascript auf
A List Apart: Articles: Suckerfish Dropdowns
weiter.
Es gibt auch viele deutsche Anleitungen zu solchen Menüs.
Auch ich habe eine geschrieben:
css | Spalten :: Ausklappmenü