Submenu on hover

Question

I´m trying to make a submenu on hover for hours, read about ten tutorials or more and finally don't get it working. I want it to show "Zimmer", "Reservierung" and "Preise" in a vertical menu if I hover "Hotel" and so on. This is my code:

 a { text-decoration: none;} nav { height: 50px; clear: both;} nav ul { padding: 5px 0px; text-align: center;} nav li { margin: 0px; display: inline; padding: 0px;} nav li a { font-size: 18px; color: #775923; padding: 0px 20px; margin: 0px;} nav li a:hover, nav li a.current { color: #775923; padding: 0px 20px 14px 20px; -webkit-padding-after: 15px; box-shadow: 0 4px #b1d130;} nav ul ul{ display: none;} nav ul li:hover ul { display: block;} 

 <nav> <ul> <li><a href="#" class="current">Willkommen</a></li> <li><a href="#">Hotel</a></li> <ul> <li><a href="#">Zimmer</a></li> <li><a href="#">Reservierung</a></li> <li><a href="#">Preise</a></li> </ul> <li><a href="#">Restaurant</a></li> <ul> <li><a href="#">Speisekarte</a></li> <li><a href="#">Anlässe</a></li> </ul> <li><a href="#">Anfahrt</a></li> <li><a href="#">Kontakt</a></li> <ul> <li><a href="#">Team</a></li> <li><a href="#">Über Uns</a></li> </ul> </ul> </nav> 

Link: http://jsfiddle.net/AuJeF/445/

Hope you can help. Thank you

Answer 1

the mistake in you html. ul > ul mast be insite li. But not outsideю

<li><a href="#">Hotel</a>
                <ul>
                    <li><a href="#">Zimmer</a></li>
                    <li><a href="#">Reservierung</a></li>
                    <li><a href="#">Preise</a></li>
                </ul>
</li>

You're writing style - if ul inside li then ul display block. But inside li no ul it after him. Will validator error, because tag ul inside >ul that's not true, there can be only >li Think, I help U

Answer 2

You have the problem on your markup, change as following-

       <li><a href="#">Hotel</a>
            <ul>
                <li><a href="#">Zimmer</a></li>
                <li><a href="#">Reservierung</a></li>
                <li><a href="#">Preise</a></li>
            </ul>
        </li>

(this is a simple dropdown menu)

 <nav>
        <ul>
            <li><a href="#" class="current">Willkommen</a></li> 
            <li><a href="#">Hotel</a>
                <ul>
                    <li><a href="#">Zimmer</a></li>
                    <li><a href="#">Reservierung</a></li>
                    <li><a href="#">Preise</a></li>
                </ul>
            </li>
            <li><a href="#">Restaurant</a><ul>
                    <li><a href="#">Speisekarte</a></li>
                    <li><a href="#">Anlässe</a></li>
                </ul>
            </li> 
        </ul>
</nav>

css

nav
{
    margin-top:15px
}

nav ul
{
    list-style:none;
    position:relative;
    float:left;
    margin:0;
    padding:0
}

nav ul a
{
    display:block;
    color:#333;
    text-decoration:none;
    font-weight:700;
    font-size:12px;
    line-height:32px;
    padding:0 15px;
    font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

nav ul li
{
    position:relative;
    float:left;
    margin:0;
    padding:0
}

nav ul li.current-menu-item
{
    background:#ddd
}

nav ul li:hover
{
    background:#f6f6f6
}

nav ul ul
{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    background:#fff;
    padding:0
}

nav ul ul li
{
    float:none;
    width:200px
}

nav ul ul a
{
    line-height:120%;
    padding:10px 15px
}

nav ul ul ul
{
    top:0;
    left:100%
}

nav ul li:hover > ul
{
    display:block
}

jsfiddle