CSS tworzenie menu

[matriks87]

Witam, mam takie pytanie jak wybrnąć z tej sytuacji bo nie mogę nic znaleźć próbuje zrobić stronkę w której mam jedno menu poziome np

Kod:

<div id="menu">
<ul>
<li><a href='index.php?akcja=mnie'>O MNIE</a></li>
<li><a href='index.php?akcja=galeria'>GALERIA</a></li>
</ul>
</div>

i css do niego

Kod:

#menu ul                {
                    position: absolute;
                  }

#menu ul li             {
                   float: left;
                   border-width: 0 1px 1px 1px;
                   border-style: solid;
                   border-color: transparent #25b #25b #9ce;
                  }

#menu ul a:link, ul a:visited
                  {
                   text-decoration: none;
                   display: block;
                   width: 146px;
                   text-align: center;
                   padding: 5px 0;
                   font-weight: bold;
                   background-color: #27c;
                   color: #def;
                   border-top: 10px solid #25b;
                  }

#menu ul a:hover        {
                   background-color: #28e;
                   color: #fff;
                   border-top: 20px solid #26d;
                  }

i chce zrobić podmenu pionowe dostępne tylko np w O MNIE

Kod:

<div id="menu2">                                                                                                                
<ul><li><a href='index.php?akcja=dane'>DANE</a></li><ul><br />
<ul><li><a href='index.php?cos='>costam</a></li><ul> <br />
</div>

i jego css

Kod:

#menu2 ul, ul li {
   display: block;
   list-style: none;
   margin: 0;
   padding: 0;
}

#menu2 ul li {
   width: 190px;
   padding-left: 10px;
   background: #797 url("punkt.gif") no-repeat left top;
   border-width: 1px;
   border-style: solid;
   border-color: #dfe #365 #365 #dfe;
}

#menu2 ul a:link, ul a:visited {
   display: block;
   width: 169px;
   text-decoration: none;
   padding: 5px 10px;
   font-weight: bold;
   background: #bfb url("tlo.gif") repeat-x top;
   color: #365;
   border-left: 1px solid #797;
}

#menu2 ul a:hover {
   background-color: #797;
   background-image: url("tlo2.gif");
   color: #eff;
}

tyle że dla tego podmenu ustawia mi wszystko z pierwszego cssa niech mi ktoś powie co robie żle, pewnie to jest banalne i czegoś nie doczytałem ale sie mecze już jakiś czas i nie mogę dojść jak to zrobić

[Filuper112]

Ale chcesz zrobic ze jak nacisniesz na "o mnie" to sie wysunie pod menu czy jak wejdziesz w podstrone "o mnie" to pojawi sie to menu

[matriks87]

chce zrobić tak że jak nacisne to się pojawi nowe menu pionowe pod tym istniejącym na wyżej poziomym

[Filuper112]

Pomysl nad tym http://www.forumweb.pl/viewtopic.php?t=48799&sid=a66974bf921d4536b07e4775a65a9566

[matriks87]

no tak ale tam jest jedno menu poziome i z niego się wysuwa pionowe a to nie za bardzo będzie pasowało ja chciałbym żeby było mniej więcej jak na tej stronie
http://www.hurtownia.win.pl/tab.php/tab_id/5
menu główne poziome i poniżej menu pionowe które będzie tylko na jednej podstronie i mniej więcej to już osiągnąłem tylko nie wiem czemu jak ustawiam jakieś ccs dla diva menu2 to przypisuje mi go też do diva menu:/ i mi się wtedy rozjeżdża wszystko:/
da się w ogóle tak zrobić jak chce?

[Kartofelek]

Kolego - zrób to tak jak się powinno robić. Czyli ul w ul. Bez problemu to zrobisz.
Ul normalnie stylujesz tak jak stylowałeś, dajesz dla LI position relative.
Potem w li umieszczasz podmenu UL i jemu dajesz position:absolute; right:0; display:none;

I gotowe. Oczywiście ma to swoje utrudnienia - np gdy menu jest dłuższe niż część strony pod nim. Ale to też jest do ogarnięcia w kilka linijek.

I teraz mały trik. Dodajesz temu menu drugą klasę. Dla tej drugiej klasy dajesz:
ul#druga_klasa li:hover ul {display:block;} dzięki czemu dla tej drugiej klasy po najechaniu na ul pojawi się podmenu.
W JS usuwasz tą klasę i dodajesz funkcjonalność, że pokazujesz to podmenu po kliknięciu.
Dzięki temu zyskujesz swój efekt, ale nie ograniczasz ludzi bez JS.

[matriks87]

zamieszałem się teraz:/ i już nie wiem jak to w ogóle ruszyć:/

[Kartofelek]

Kod:

<ul class="menu menu_hover">
<li><a href=">..</a></li>
<li><a href=">..</a></li>
<li><a href=">..</a></li>
<li><a href=">..</a>
    <ul>
    <li><a href=">..</a></li>
    <li><a href=">..</a>
    </ul>
</li>
</ul>

I potem dla tego menu dajesz:
.menu li {position:relative;}
.menu li ul {display:none; position:absolute; right:0; top:0;}
.menu_hover li:hover ul {display:block;}

Potem w js
kasujesz temu menu klasę menu_hover i dodajesz zdarzenie click dla LI które pokazuje ci podlistę ul - zupełnie jak w hover.

[matriks87]

czy to js to jest java script, jeśli tak to ja tego nie używam, tylko html php i msql to zrobienia strony

[Kartofelek]

Aha. No to nie zrobisz tego co chcesz. Chyba tylko w CSS3, ale to też w najbliższym czasie złe.