Poziome menu z dwoma poziomami. Opcje

[linx]

Witam,

jestem w trakcie przebudowy swojej strony i ma problem. Na swojej stronie mam dwupoziomowe menu.
Na chwilę obecną kod o niego wygląda miej więcej tak:

[HTML] pobierz, plaintext 
<div>
     <ul>
     <li>poziom 1</li>
     <li>poziom 1</li>
     <li>poziom 1</li>
     </ul>
</div>
<div>
     <ul>
     <li>poziom 2</li>
     <li>poziom 2</li>
     <li>poziom 2</li>
     </ul>
</div>
[HTML] pobierz, plaintext 

Do zobaczenia na stronie Moja strona.

Teraz chce je przerobić aby wyglądało dla klienta identycznie, ale z takim kodem.

[HTML] pobierz, plaintext 
<div>
     <ul>
     <li>poziom 1</li>
     <li>poziom 1
          <ul>
          <li>poziom 2</li>
          <li>poziom 2</li>
          <li>poziom 2</li>
          </ul>
     </li>
     <li>poziom 1</li>
     </ul>
</div>
 
[HTML] pobierz, plaintext 

I niestety nic mi nie wychodzi nie mam już pomysłów jak to zrobić.
Co zresztą widać http://linx.vipserv.org/

Css wygląda na chwilę obecną tak:

[HTML] pobierz, plaintext 
div#menu {
     width: 880px;
	height: 160px;
}
 
ul#menu_up {
     border-right: 10px solid #353535;
	border-left: 10px solid #353535;
	border-top: 1px solid #353535;
     background-image: url('img/ul-tlo-1.jpg');
	background-color: #40749C;
     float: left;
     text-align: center;
     width: 880px;
	height: 60px;
     margin: 0;
     padding: 0;
 
}
ul#menu_up li {
     display: inline;
	margin: 0;
     padding: 0;
 
}
ul#menu_up li a{
     padding: 25px 24px 22px 24px;
	color: #fff;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
	background-image: url('img/ul-tlo-1.jpg');    
 
 
}
ul#menu_up li a:hover {
	background-image: url('img/ul-tlo-2.jpg');
	color: #fff;
}
ul#menu_up li a#active {
	background: #CACACA;
	border-bottom: 2px solid white;
	color: #840204;
 
}
 
ul#menu_up_pod2{
 
	width: 880px;
	height: 120px;
	border-right: 10px solid #353535;
	border-left: 10px solid #353535;
	border-bottom: 1px solid #353535;
	border-top: 1px solid #353535;
     float: left;
     background-image:none;
     display: block
}
ul#menu_up_pod2 li{
 
     float: left;
     text-align: center;
     background-image:none;
     margin: 9px 14px 0px 14px;
 
}
ul#menu_up_pod2 li a {
	padding: 2px 10px 2px 10px;
	color: #000;
	text-decoration: none;
	border-right: 1px solid #fff;
	border-left: 1px solid #fff;
     text-align: center;
     float: left;
}
ul#menu_up_pod2 li a:hover {
	background-color: #dfdfdf;
	color: #840204;
}
ul#menu_up_pod2 li a#active {
	background: #dfdfdf;
	color: #840204;
       }
[HTML] pobierz, plaintext 

Jakiś pomysł?

[mathijas]

Najprościej głównemu ul nadać position relative i height obejmujący obydwie listy. Li w głównej ULce zostawić w spokoju (może ewentualnie margin-bottom zapewniający miejsce dla dolnej listy), a wewnętrzną ULkę dać na position absolute z left i bottom na 0px i width 100%.

Czyli tak:
ul.top_level { position: relative; height: 100px; width: 1024px; text-align: center }
ul.top_level > li { display: inline; width: 180px; height: 80px; margin-bottom: 20px }

ul.top_level ul.bottom_level { position: absolute; left: 0px; bottom: 0px; width: 1024px; height: 20px; text-align: center }
ul.top_level ul.bottom_level li { display: inline }

(sorry że nie stosuję Twojego nazewnictwa i całości stylu ale jest długi a mi dzisiaj nieco oczka szwankują, a idea chyba wydaje się jasna)

Jeszcze ewentualnie zamiast dawać kontenerowi za dużą wysokość można zrobić inny myk:
ul.top_level { height: 80px; margin-bottom: 20px; }
ul.bottom_level { position: absolute; top: 80px; height: 20px }

(chodzi mi o pozostawienie wolnej przestrzeni pod główną ULką i spozycjonowanie absolutne od topa, żeby dolna ULka wyszła poza swój kontener)

To tak najprościej. Tyle, że pozycjonowanie absolutne nie jest najszczęśliwsze, zwłaszcza jeśli chcesz żeby Twoja strona się ładnie zwijała na mniejszych ekranach.

Ten post edytował mathijas 15.02.2013, 21:22:20