Autor | Zpráva | ||
---|---|---|---|
Routh Profil * |
#1 · Zasláno: 10. 7. 2008, 12:21:19
Dobrý den, už jsem psal do JS kategorie o dropdown menu ale od jednoho kodera mi bylo sděleno že JS někdy uživatel nemusí mít zaplý tak pak nevidí vlastně nic, a dal mi odkaz na stránku CSS play, podle které jsem udělal dropdown menu pomocí CSS, jenže já potřebuju mít toto:
Nadpis 1 - pododkaz 1 - pododkaz 2 - pododkaz 3 Nadpis 2 - pododkaz 1 - pododkaz 2 - pododkaz 3 pod najetí na Nadpis 1/2 se zobrazí pododkazy 1-3, jenže Nadpis 2 pokud umístím pod Nadpis 1 tak jakmile najedu na Nadpis 1 tak se mi vše překrývá, prootže v CSS je pevné umístění. Proto jsem se chtěl zeptat jestli na to existuje některé řešení, nebo už pouze JS, Děkuji a přikládám CSS a PHP kód. CSS kód: /* Counter Strike - nadpis */ .cs {font-family: arial, sans-serif; width:158px; height:60px; position:relative; padding-left:0px; font-size:11px; margin:0px 0;} .cs ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFA500; width:158px; height:16px; text-align:center; border:1px solid #FFC600; border-width:0 0 1px 0; background:#444; line-height:16px; font-size:11px;} .cs ul {padding:0; margin:0;list-style-type: none; } .cs ul li {float:left; margin-right:1px; position:relative;} .cs ul li ul {display: none;} /* Counter Strike - pododkazy */ .cs ul li:hover a {color:#FFC600; background:#555;} .cs ul li:hover ul {display:block; position:absolute; top:17px; left:0px; width:158px;} .cs ul li:hover ul li a.hide {background:#555; color:#000;} .cs ul li:hover ul li:hover a.hide {width:158px;} .cs ul li:hover ul li ul {display: none;} .cs ul li:hover ul li a {display:block; background:#444; color:#FFA500; width:158px;} .cs ul li:hover ul li a:hover {background:#444; color:#FFC600;} .cs ul li:hover ul li:hover ul {display:block; position:absolute; left:0px; top:0; color:#000;} .cs ul li:hover ul li:hover ul li a {display:block; width:158px; background:#444; color:#000;} .cs ul li:hover ul li:hover ul li a:hover {background:#555; color:#fff;} /* Track Mania - nadpis */ .tm {font-family: arial, sans-serif; width:158px; height:150px; position:relative; padding-left:0px; font-size:11px; margin:0px 0;} .tm ul li a, .menu ul li a:visited {display:block; text-decoration:none; color:#FFA500; width:158px; height:16px; text-align:center; border:1px solid #FFC600; border-width:0 0 1px 0; background:#444; line-height:16px; font-size:11px;} .tm ul {padding:0; margin:0;list-style-type: none; } .tm ul li {float:left; margin-right:1px; position:relative;} .tm ul li ul {display: none;} /* Track Mania - pododkazy */ .tm ul li:hover a {color:#FFC600; background:#555;} .tm ul li:hover ul {display:block; position:absolute; top:17px; left:0px; width:158px;} .tm ul li:hover ul li a.hide2 {background:#555; color:#000;} .tm ul li:hover ul li:hover a.hide2 {width:158px;} .tm ul li:hover ul li ul {display: none;} .tm ul li:hover ul li a {display:block; background:#444; color:#FFA500; width:158px;} .tm ul li:hover ul li a:hover {background:#444; color:#FFC600;} .tm ul li:hover ul li:hover ul {display:block; position:absolute; left:0px; top:0; color:#000;} .tm ul li:hover ul li:hover ul li a {display:block; width:158px; background:#444; color:#000;} .tm ul li:hover ul li:hover ul li a:hover {background:#555; color:#fff;} PHP kód: <?php echo " <div class='cs'> <ul> <li><a class='hide' href='#'>Counter Strike</a> <!--[if lte IE 6]> <a href='news.php'>Counter Strike <table><tr><td> <![endif]--> <ul> <li><a href='http://www.game-league.cz/news_cats.php?cat_id=17' title='CS novinky'>Novinky</a></li> <li><a href='http://www.game-league.cz/servers.php' title='CS servery'>Servery</a></li> </li> </ul> </div <div class='tm'> <ul> <li><a class='hide2' href='#'>Track Mania</a> <!--[if lte IE 6]> <a href='news.php'>Track Mania <table><tr><td> <![endif]--> <ul> <li><a href='http://www.game-league.cz/news_cats.php?cat_id=17' title='TM novinky'>Novinky</a></li> <li><a href='http://www.game-league.cz/servers.php' title='TM servery'>Servery</a></li> </li> </ul> </div>"; ?> |
||
habendorf Profil |
#2 · Zasláno: 10. 7. 2008, 12:47:34
Máš to nějak zbytečně složité. Vyházej všechny position, skryj zanořené ul a na hover ho odkryj.
li ul {display:none;} li:hover ul {display:block;} Nicméně tato menu nemám rád. Mám rozbalenou položku 1 a chci jít na položku 2, jedu tedy kurzorem dolů až k položce 2 a ... ta mi ustřelí do háje, protože když na ni najedu, položka 1 se sbalí a celé to vyjede nahoru. |
||
Routh Profil * |
#3 · Zasláno: 10. 7. 2008, 14:18:43
habendorf
Díky moc, funguje to :) |
||
Časová prodleva: 16 let
|
0