Autor Zpráva
pharaon.jh
Profil
#1 · Zasláno: 16. 12. 2013, 10:07:10
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
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;
}
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ší
anonymní
Profil *
#4 · Zasláno: 16. 12. 2013, 11:08:23
Odpovědět Citovat
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
Odpovědět Citovat
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
Odpovědět Citovat
pharaon.jh:
„takže já ani nevím co je tam za funkce v css“
vlastnosti, ne funkce.

CSS vlastnosti
MyShare
Profil
#7 · Zasláno: 16. 12. 2013, 14:56:21 · Upravil/a: MyShare o okamžik později
Odpovědět Citovat
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: 12 let

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

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

0