CSS horizontální rozbalovací menu – HTML / XHTML – Fórum – Programujte.com

Ahoj, potřebuju na stránkách, které právě kutím vytvořit rozbalovací menu, tak abych měl xhtml v následujícím tvaru:

<ul class="menu">

<li><a href="#">Položka</a>

<ul>

<li><a href="#">Položka1</a></li>

<li><a href="#">Položka2</a></li>

<li><a href="#">Položka3</a></li>

<li><a href="#">Položka4</a></li>

</ul>

</li>

</ul>

Na stránce mám takové to menu:

<ul class="menu">

                        <li><a href="#" class="nav1">DOMU</a></li>                

                        <li class="divider"></li>                    

                        <li><a href="#" class="nav3">AKCE</a>

                        </li>

                        <li class="divider"></li>

                        <li><a href="#" class="nav4">PROFIL</a></li>

                        <li class="divider"></li>

                        <li><a href="#" class="nav4">REGISTRACE</a></li>

                        <li class="divider"></li>

                        <li><a href="index.php?co=obchod" class="nav5">Informace</a>

                        <ul class="uroven2"> 

                          <li><a href="../html/text.php">Položka 1</a></li>

                          <li><a href="../html/seznamy.php">Položka 2</a></li>

                          <li><a href="../html/odkazy.php">Položka 3</a></li>

                        </ul></li>                           

                        <li class="divider"></li>

                        <li><a href="contact.html" class="nav6">KONTAKT</a></li>

                        <li class="divider"></li>

                    </ul> 

ul.menu {

list-style-type:none; float:left; display:block; width:982px; 

margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;}



ul.menu li {

display:inline;

font-size:11px;

font-weight:bold;

line-height:50px;

}

ul.menu li.divider {

display:inline;

width:2px;

height:50px;

float:left;

background:url(images/menu_divider.gif) no-repeat center;

}



.menu li ul{

display: none;

}

.menu li:hover ul{

display: block;

position: absolute;

}      

Tak jsem to vyřešil, css jsem upravil na:

ul.menu {

list-style-type:none; float:left; display:inline; width:982px; 

margin:0px; padding:0px;background:url(images/menu_bg.gif) repeat-x;

}



.menu li{

float:left;

font-size:11px;

font-weight:bold;

line-height:50px;

}



ul.menu li.divider {

display:inline;

width:2px;

height:50px;

float:left;

background:url(images/menu_divider.gif) no-repeat center;

}



.menu li ul{

display: none;

}



.uroven2 li{

clear: both;

display: block;

}



.menu li:hover ul{

display: block;

list-style-type:none;

position: absolute;

background-color: rgb(224,224,224);

margin-top: 50px;

padding: 5px 5px 5px 10px;

}



.uroven2 li{

font: 12px ;

line-height: 15px;

}



.uroven2 li a{

color:#676d77;

text-decoration:none;

}



.uroven2 li a:hover{

color:#676d77;

color:#333333;

}

Ahoj, tak menu chodi jak má, jen mám problém s IEčkama, v IE7 to uskakuje a v IE6 to nedělá radši nic :smile5:

Firefox: [IMG]http://sdilej.net/pics/16210384ce6ba6559ce2eed6719270c4.png[/IMG]

IE7:[IMG]http://sdilej.net/pics/67b3466c97e03bcc754fe3dfa33182ad.png[/IMG]

To menu mi uskakuje v IE7 pod kontakty misto aby bylo pod informacemi :smile10:

1) Dělat z blokových prvků inline prvky mi přijde docela odvážné.
2) Používat jako oddělovač prvek seznamu (který simbolizuje obsahový význam) je návrhová chyba.
3) IE se většinou zblázní, pokud má víc plovoucích prvků a zde jimi šetřeno nebylo.
4) Jsou zbytečně nastavovány defaultní hodnoty - je to méně přehledné.
5) Pokud je "float" nastaven pro všechny vnořené elementy, tak se nevypíná vlastností "clear". Jde o chybné pochopení principů CSS.
6) Absolutní pozicování bez zadání pozice by mělo způsobit vykreslení prvku na pozici, kde by byl při statickém pozicování. Nikdy bych se na to nespoléhal.
7) Nastavením "position: relative;" pro prvky vnějšího seznamu, přidáním "top: 50px; left: 0;" vnitřnímu seznamu a záměnou "clear: both;" za "float: none;" v prvcích vnitřního seznamu možná docílíte toho, co jste chtěl :).

Děkuji za analýzu mého řešení, stránku jsem nekódoval já, pouze jsem do ni doplňoval menu. Ale ještě jednou děkuji, Vyřešil jsem to nakonec zápisem stylu pro IE:

.menu li:hover ul

{position:absolute; left:-40px; min-width: 120px; max-width: 200px;}

Jestli to chceš v css,tak to zkus na http://www.grsites.com

Na webu máme rozbalovací menu CSS drop-down.

http://www.predskolaci.cz

Parádní kluci, moc mi to pomohlo, bez Java Scriptu mám funkční rozbalovací horizontální menu v CSS.

Super!!