Autor Zpráva
tojehnus
Profil
Ahoj,
Prosím o radu. Nemůžu přijít na to kde je chyba.
Vytvořil jsem si menu, jelikož budou stránky pro seniory velikost písma je velká.
Problém je, že když se pohybuji kurzorem po stránce a najedu na místo, kde se nachází skrytý odkaz, zobrazí si mi podmenu jak kdybych najel kurzorem na něj. :/

CODEPEN

<nav>
        <ul id="trans-nav">
            <li><a href="#">O svátku</a>
                <ul>
                    <li><a href="#">O slevách</a></li>
                </ul>
            </li>
            <li><a href="#">Program oslav</a>
                <ul>
                    <li><a href="#">Doprovodný program</a></li>
                </ul>
            </li>
            <li><a href="#">Fotogalerie</a></li>
            <li><a href="#">Jak se zapojit?</a></li>
            <li><a href="#">Archiv</a>
                <ul>
                    <li><a href="#">Svátek seniorů 2016</a></li>
                    <li><a href="#">Svátek seniorů 2015</a></li>
                    <li><a href="#">Svátek seniorů 2014</a></li>
                    <li><a href="#">Svátek seniorů 2013</a></li>
                    <li><a href="#">Svátek seniorů 2012</a></li>
                    <li><a href="#">Svátek seniorů 2011</a></li>
                </ul>
            </li>
        </ul>
    </nav>

#trans-nav {
    width: 100%;
    padding-left: 0px;
     display: table;
      table-layout: fixed; /* optional */
    margin: 0 auto;
    padding-bottom: 30px;
    font-size: 30px;
    font-weight: bolder;

    text-shadow: #ccc 0 1px 0, #c9c9c9 0 2px 0, #bbb 0 3px 0, #b9b9b9 0 4px 0, #aaa 0 5px 0,rgba(0,0,0,.1) 0 6px 1px, rgba(0,0,0,.1) 0 0 5px, rgba(0,0,0,.3) 0 1px 3px, rgba(0,0,0,.15) 0 3px 5px, rgba(0,0,0,.2) 0 5px 10px, rgba(0,0,0,.2) 0 10px 10px, rgba(0,0,0,.1) 0 20px 20px;
}

#trans-nav li {
     width: auto;
     text-align: center;
    display:inline-block;
    position: relative;
    padding: 0;
    line-height: 2em;
    /*background: #edaa41;*/
}

#trans-nav li:hover {
    background-position: 0 -40px;

}

#trans-nav li a {
    display: inline-block;
    padding: 0 15px;
    color: #cf007b;
    text-decoration: none;
}

#trans-nav li a:hover {
    color: #5b539c;
    text-decoration: underline;
}

#trans-nav li ul {
    opacity: 0;
    position: absolute;
    left: 0;
    list-style-type: none;
    padding: 0;
    margin: 0;
}

#trans-nav li:hover ul {
    opacity: 1;
}
#trans-nav li ul li {
    white-space:nowrap;
    float: none;
    position: static;
    height: 0;
    line-height: 0;
    background: none;
}

#trans-nav li:hover ul li {
    font-size: 24px;
    line-height: 2.5em;
}

#trans-nav li ul li a {

    background: rgba(190, 176, 211, 0.5);
    width: 120%;
}

#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.2s; }
#trans-nav li ul { -webkit-transition: all 0.2s; }
#trans-nav li ul li { -webkit-transition: height 0.2s; }


Nevíte kde mám chybu?
tojehnus
Profil
tojehnus:
Problem solved... Vyřešeno pomocí display: none a při :hover display:block.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

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