[css] dwie listy <ul> jak je rozdzielić?, dublują się backgroundy i inne wartości Opcje

[Caw]

Witam
mam chyba prosty problem ale siedze już ponad 2h i nie wychodzi mi rozwiązanie Otóż chodzi o to że mam na stronie dwa menu jedno na górze poziome (składa się z wykazu <ul><li>) ustawiłem w nim wsyztsko backgrpound jako obrazek itp.

Problem się zaczął kiedy zabrałem się za drugie menu pionowe. Mimo że napisałem #lewa ul,li to jednak pobiera on wszytskie dane z #gora ul,li background sam sie wstawia wymiary tez i co najgorsze modyfikując to dolne menu zmienia mi się też górne.

MOJE PYTANIE: JAK ROZDZIELIĆ punkty <UL> i <LI>

Wstawiałem tak <ul class="gora"><li></li></ul> a w drugim <ul class="lewa"><li></li></ul> ale to nic nie daje ponieważ background mam zdefiniowany w li. Wychodzi na to że do każdego punktu <li> mam dodawać klase?? to raczej nie możliwe bo nigdzie nie widziałem czegoś takiego



MENU GÓRNE DZIAŁAJĄCE

Kod

div#menu {
      width:748px;
      height:33px;
      font:12px arial;
      font-weight:bold;
      text-align:center;    
      color:#ffffff;
}
#menu ul, ul li{
      list-style:none;
      margin:0;
      padding:0;
      float:left;
      color:yellow;  
}
#menu li{    
      width:104px;
      height:33px;
      margin:0 2px 0 0;  
}
#menu li a:link, li a:visited{
      text-align:left;
      display:block;
      width:85px;
      height:26px;
      background-color:#000000;
      padding:7px 0 0 20px;
      color:#ffffff;
      text-decoration:none;
      background-image: url(zd/btn.jpg);
}
#menu li a:hover{
      background-color:orange;
      color:#ffffff;
      background-image: url(zd/btn1.jpg);
      font:14px arial;
      font-weight:bold;      
}




<div id="menu">
                        <ul class="gora">
                            <li><a href="#">INDEX</a></li>
                            <li><a href="#">KONTAKT</a></li>
                            <li><a href="#">ADRES</a></li>
                            <li><a href="#">MAPA</a></li>
                            <li><a href="#">DOJAZD</a></li>          
                        </ul>
                  </div>

A TUTAJ MOJ NIEUDOLNY KOD W TRAKCIE ZMIAN:

Kod

div#lewa{
      width:252px;
      border:1px solid red;
      float:left;
      font:11px arial;
      text-align:left;
}
#lewa ul.second, ul.second li.first{
      margin:0px;
      padding:0px;
      display:block;
      border:1px solid green;
}
#lewa li.first{
      height:22px;
      list-style:none;
      padding:5px 0 0 20px;
      margin:2px 0 0 0;
}
#lewa li.first a:link, li.first a:visited{
      display:block;
      background-color:red;
      
}
#lewa li.first a:hover {
      background-color:red;
}





      <div id="lewa">
                        <ul class="second">
                            <li class="first"><a href="#">Placówki opiekuńczo wychowawcze</a></li>
                            <li><a href="#">Rodziny Zastępcze</a></li>
                            <li><a href="#">Rehabilitacja Niepełnosprawnych</a></li>
                            <li><a href="#">Świadczenia Rodzinne</a></li>
                            <li><a href="#">Formularze do pobrania</a></li>
                            <li><a href="#">Przeczytaj Koniecznie</a></li>
                            <li><a href="#">Kadra pracownicza Centrum</a></li>                                        
                            <li><a href="#">Programy szkoleniowe</a></li>
                        </ul>
                  </div>

Bede BARDZO wdzieczny za pomoc.

Ten post edytował Caw 23.03.2008, 18:49:44