Autor | Zpráva | ||
---|---|---|---|
pharaon.jh Profil |
#1 · Zasláno: 16. 12. 2013, 10:07:10
potřeboval bych poradit jak můžu udělat horizontální menu se třema úrovněmi, mám to udělaný se třema ale mám něco špatně v css, ale nevím co
<html> <head> <style> nav ul ul { display: none; } nav ul li: hover > ul { display: block; } nav ul li ul li ul: hover > ul { display: block; } .nav ul { padding: 0 20px; border-radius: 10px; list-style: none; position: relative; display: inline-block; background: #efefef; background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); background: -moz-linear-gardient(top, #efefef 0%, #bbbbbb 100%); background: -webkit-linear-gardient(top, #efefef 0%, #bbbbbb 100%); box-shadow: black 0px 0px 9px; } .nav ul li { float: left; } .nav ul li a { padding: 5px 10px 5px 10px; display: block; color: #757575; text-decoration: none; } .nav ul li:hover { background: #4b545f; background: linear-gradient(top, #4b545f 0%, #5f6975 40%); background: -moz-linear-gradient(top, #4b545f 0%, #5f6975 40%); background: -webkit-linear-gradient(top, #4b545f 0%, #5f6975 40%); } .nav ul li:hover a { color: #fff; } .nav ul li:hover > ul { maergin: 0px; padding: 0px; visibility: visible; } .nav ul li:hover > ul li { float: none; display: block; visibility: visible; } .nav ul li:hover > ul li a { color: #666; min-width: 150px; visibility: visible; } .nav ul li:hover > ul li a:hover { color: #fff; } .nav ul li { position: relative; } .nav ul li ul { position: absolute; top: 30px; left: 0px; visibility: hidden; } .nav ul li ul li ul { position: absolute; top: 30px; left: 0px; visibility: hidden; } </style> </head> <body> <div class="nav"> <ul> <li><a href="home.html">DOMŮ</a></li> <li><a href="aboutus">NÁBOR</a> <li><a href="aboutus">HISTORIE</a> <ul> <li><a href="aboutus.html">1994</a></li> <li><a href="meet.html">1995</a></li> <li><a href="client.html">1996</a></li> <li><a href="news.html">1997<a></li> <li><a href="aboutus.html">1998</a></li> <li><a href="meet.html">2000</a></li> <li><a href="client.html">2001</a></li> <li><a href="news.html">2003</a></li> <li><a href="aboutus.html">2004</a></li> <li><a href="meet.html">2005</a></li> <li><a href="client.html">2006</a></li> <li><a href="news.html">2007</a></li> <li><a href="aboutus.html">2008</a></li> <li><a href="meet.html">2009</a></li> <li><a href="client.html">2011</a></li> <li><a href="news.html">201?</a></li> </ul> </li> <li><a href="solutions.html">KDE NÁS NAJDETE</a></li> <li><a href="contactus.html">TRENÉŘI</a></li> <li><a href="contactus.html">TÝMY</a> <ul> <li><a href="aboutus.html">KADETI</a> <ul> <li><a href="meet.html">HRÁČI</a></li> <li><a href="client.html">ROZPISY ZÁPASŮ</a></li> <li><a href="news.html">GALERIE</a></li> <li><a href="aboutus.html">TABULKY</a></li> </ul> </li> <li><a href="aboutus.html">MUŽI</a> <ul> <li><a href="meet.html">HRÁČI</a></li> <li><a href="client.html">ROZPISY ZÁPASŮ</a></li> <li><a href="news.html">GALERIE</a></li> <li><a href="aboutus.html">TABULKY</a></li> </ul> </li> </ul> <li><a href="contactus.html">VÝSLEDKY</a></li> <li><a href="contactus.html">TABULKY</a></li> <li><a href="contactus.html">GALERIE</a></li> <li><a href="contactus.html">DOWNLOAD</a></li> <li><a href="contactus.html">ODKAZY</a></li> <li><a href="contactus.html">ZÁKLADNÍ PRAVIDLA</a></li> <li><a href="contactus.html">SEZNAM ZKRATEK</a></li> <li><a href="contactus.html">ONLINE KNIHA</a></li> </ul> </div> </body> </html> |
||
anonymní Profil * |
#2 · Zasláno: 16. 12. 2013, 10:36:55
pharaon.jh:
- :hover se píše dohromady
- ul:hover > ul nebude fungovat, ul v ul nikdy přímo zanořeno nebude
Mrkl jsem jen na řádky 4-11, dál jsem to nezkoumal. |
||
pharaon.jh Profil |
#3 · Zasláno: 16. 12. 2013, 11:03:30
opravil jsem to takhle
nav ul li { display:none; } nav ul li ul:hover > { display:block; } nav ul li ul li ul:hover > { display:center; } |
||
anonymní Profil * |
#4 · Zasláno: 16. 12. 2013, 11:08:23
pharaon.jh:
„a furt když mám ze druhé úrovně kde mám odkazy tak ve druhé úrovni když mám pak na třetí tak to píše pod tím, a ani jsem na to nenajel myší“ od zápisu nav ul li ul:hover > si slibuješ co?
A od display: center očekáváš pro změnu co?
|
||
pharaon.jh Profil |
#5 · Zasláno: 16. 12. 2013, 11:32:02
já se v tom až tak moc nevyznám tohle jsem si zkopíroval, takže já ani nevím co je tam za funkce v css
|
||
anonymní Profil * |
#6 · Zasláno: 16. 12. 2013, 12:04:03
|
||
MyShare Profil |
pharaon.jh: Nazdar
Hádam pomôže :) (samozrejme nastylovať to budeš musieť sám je to len hrubý náčrt.) <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } /******* Page *******/ #navigation { float: left; border: 1px solid #000; } #navigation ul li { float: left; position: relative; list-style-type: none; } #navigation ul li a { float: left; text-decoration: none; color: #000; font-size: 14px; padding: 0 5px; } #navigation ul li > ul { display: none; position: absolute; top: 100%; left: 0; } #navigation ul li:hover > ul { display: block; } #navigation ul li:hover > ul li { width: 160px; background-color: #fff; border: 1px solid #000; } #navigation ul li:hover > ul li:hover > ul { left:100%; top:-2px; } </style> </head> <body> <div id="navigation"> <ul> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a> <ul> <li><a href="#">Submenu 4</a></li> <li><a href="#">Submenu 5</a></li> <li><a href="#">Submenu 6</a> <ul> <li><a href="#">Sub-Submenu 7</a></li> <li><a href="#">Sub-Submenu 8</a></li> <li><a href="#">Sub-Submenu 9</a></li> </ul> </li> </ul> </li> </ul> </div> </body> </html> |
||
Časová prodleva: 10 let
|
0