Submenu on hover - html

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>Willkommen</li>
<li>Hotel</li>
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
<li>Restaurant</li>
<ul>
<li>Speisekarte</li>
<li>Anlässe</li>
</ul>
<li>Anfahrt</li>
<li>Kontakt</li>
<ul>
<li>Team</li>
<li>Über Uns</li>
</ul>
</ul>
</nav>
Link: http://jsfiddle.net/AuJeF/445/
Hope you can help.
Thank you

Answer 1

You have the problem on your markup,
change as following-
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
(this is a simple dropdown menu)
<nav>
<ul>
<li>Willkommen</li>
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</li>
</ul>
</li>
<li>Restaurant<ul>
<li>Speisekarte</li>
<li>Anlässe</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

Answer 2

the mistake in you html. ul > ul mast be insite li. But not outsideю
<li>Hotel
<ul>
<li>Zimmer</li>
<li>Reservierung</li>
<li>Preise</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