Adding drop down sub menu to code - html

Question

I have been trying to add a drop down menu to this code but always seem to get turned around. I just want a basic look to the subnav with a simple rollover effect. Every time i try different code it uses home image in the drop down menu and will not disappear when it is not hovered over. Ideas?
HTML:
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1 </li>
<li>Menu 2 </li>
</ul>
</li>
</ul>
CSS:
ul.navbar {
width:1000px;
list-style:none;
height:40px;
}
ul.navbar li {
display:inline;
}
ul.navbar li a {
height:40px;
float:left;
text-indent:-9999px;
}
/* Home 0 */
ul.navbar li.navbar1 a {
width:86px;
background:url(../pelican%20outfitters/navbar2.fw.png)
no-repeat 0 0;
}
ul.navbar li.navbar1 a:hover {
background-position:0 -40px;
}
ul.navbar li.navbar1 a.current {
background-position:0 -80px;
}

Answer 1

HTML
<nav>
<ul class="navbar">
<li class="navbar1">Home
<ul class="subnav">
<li>Menu 1
</li>
<li>Menu 2
</li>
</ul>
</li>
</ul>
</nav>
CSS
nav {
margin: 20px auto;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li
{
width:100px;
}
ul li ul li
{ width:200px;
}
nav ul {
font-size: 25px;
background: white;
padding: 0px;
border-radius: 10px;
border-style: solid;
list-style: none;
position: relative;
display: inline-table;
}
nav ul:after {
content:"";
clear: both;
display: block;
}
nav ul li {
float: left;
}
nav ul li:hover {
background: black;
position:relative;
z-index:1;
}
nav ul li:hover a {
color: white;
position:relative;
z-index:1;
}
nav ul li a {
display: block;
padding: 15px 20px;
color: black;
text-decoration: none;
}
nav ul ul {
background: #000000;
border-radius: 0px 0px 10px 10px;
padding: 0;
position: absolute;
top: 100%;
}
nav ul ul li {
float: none;
}
nav ul ul li a {
padding: 15px 20px;
}
nav ul ul li a:hover {
background: #2E2E2E;
border-radius: 10px;
}
Output:
Working Fiddle

Answer 2

You should delete the text-indent:-9999px and add this to your css
Delete row:
ul.navbar li a { text-indent:-9999px }
Css:
.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}
Than you have a basic navbar with hidden subnavs.
From here you can try it with your image.
The demo is your code with the new code..
DEMO
More like you want is, dont delete the css.. but only add those 2 lines and this 1:
.navbar li:hover li a{ text-indent:1px; background:white; }
DEMO 2 (without your img (don't know what it is)).
Latest update after the fiddle comment:
You should specify your html and css.. a just added a class to the first link class="home" and to accomodations class="accomodations"
And changed it in the css..
/* Home */
ul.navbar li.navbar1 a.home {
width:86px;
background:url(http://s12.postimg.org/rszejjscd/navbar2_fw.png)
no-repeat 0 0;
}
/* Accomodations */
ul.navbar li.navbar2 a.accomodations {
width:220px;
background: url(http://s12.postimg.org/rszejjscd/navbar2_fw.png) no-repeat -86px 0;
}
DEMO 3