Autor Zpráva
Fuzena
Profil *
Dobrý den, potřebuji udělat menu, které se rozbalí, ale ne do sloupečku pod sebe, ale vše na jeden řádek ->

Menu
něco něco něco něco

Zkoušel jsem googlit, ale nic kloudného mi to nevyhodilo, mám vytvořené menu, které vyskakuje pod sebe, ale nevím jak to přehodit, aby se vše rozbalilo na druhém řádku... Poradí mi prosím někdo?

css styl
.menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; width: 100%; white-space: nowrap;}
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; display: block; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li.hover ul { visibility: visible;}
.menu li li {float: none; border: none; padding: 0; margin: 0;}

a zapsané menu

<table>
<tr>
<td>
<ul class="menu">
<li><a href="">rozbal menu</a>
<ul>
<li><a href="">něco1</a></li>
<li><a href="">něco2</a></li>
<li><a href="">něco3</a></li>
<li><a href="">něco4</a></li>
</ul>
</li>
</ul>
</td>
</tr></table>
Sir Tom
Profil
Fuzena:
Také dobrý den.

<style>
.menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;} //nesmí zde být width: 100%
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li:hover { visibility: visible;} //opravena deklarace prvků, které mají viditelnou viditelnost
.menu li li {border: none; padding: 0; margin: 0;} //odstranit float
</style>

<ul class="menu"> 
<li><a href="">rozbal menu</a> 
<ul> 
<li><a href="">něco1</a></li> 
<li><a href="">něco2</a></li> 
<li><a href="">něco3</a></li> 
<li><a href="">něco4</a></li> 
</ul> 
</li> 
</ul>

BTW - proč to máš v tabulce?
rurij
Profil
Sir Tom:
Sir Tom:
Rád bych se zeptal, že v případe, že chci na miesto rozbalovania menu na jeden riadok, nechať menu rozbalovať pod seba.... čo musím zmeniť?
Ďekuju.
Sir Tom
Profil
rurij:
Zkusím:

<style>
.menu {color: black; padding: 0; margin: 0; list-style-type: none; display:block}
.menu ul {margin-top: 0px; position: absolute; visibility: hidden; margin: 0; padding: 0; list-style-type: none;}
.menu li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;} //nesmí zde být width: 100%
.menu a {padding: 2px; text-align: left; padding-left: 15px; color: black; text-decoration: none; font-weight: bold;}
.menu ul a:link {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:visited {color: black; border-bottom: none; padding-left: 15px; _padding-left: 19px;}
.menu ul a:hover {color: black;}
.menu li:hover ul, ul.menu li:hover { visibility: visible;} //opravena deklarace prvků, které mají viditelnou viditelnost
.menu li li {border: none; padding: 0; margin: 0; display: block;} //odstranit float
</style>
 
<ul class="menu"> 
<li><a href="">rozbal menu</a> 
<ul> 
<li><a href="">něco1</a></li> 
<li><a href="">něco2</a></li> 
<li><a href="">něco3</a></li> 
<li><a href="">něco4</a></li> 
</ul> 
</li> 
</ul>

Netestoval jsem to, kdyby to nešlo, napiš.
margin
Profil *
Sir Tom:
V CSS používej CSS komentáře, jsem se divil, proč mi to nefungovalo, takovou zradu jsem nečekal ;-)

.menu li li {border: none; padding: 0; margin: 0; display: block;} //odstranit float
Delkarovat blokové položky jako blokové je zbytečné.
Float se všem položkám LI nastavuje na 4. řádku, takže je nutné float zrušit: float: none;
.menu li li {border: none; padding: 0; margin: 0; float: none;} /* zrušit float */

Jiná možnost je použít na 4. řádku selektor >
.menu > li {float: left; padding: 2px 2px 0 2px; white-space: nowrap;}
Diky tomu je 10. řádek zbytečný a může se vypustit, smazat.
Sir Tom
Profil
margin:
Jo, pravdu díš :)
Promiň za zradu.
rurij
Profil
Děkuju moc :)
Dan612
Profil
rurij:
Prosím Vás, nemohl by někdo dát živou ukázku? Já to nerozchodim ale hodilo byse mi to do krámu, teda do webky? Děkují.
Tomáš123
Profil
Dan612:
Internet je plný ukážok, hľadaj dropdown menu, vysúvacie menu a iné.

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: