将下拉子菜单添加到代码中

Question

我一直试图在这段代码中添加一个下拉菜单，但似乎总是被转过来。我只想要一个带有简单翻转效果的子导航的基本外观。每次我尝试不同的代码时，它都会在下拉菜单中使用主页图像，并且当它没有悬停时不会消失。想法？

HTML：

   <ul class="navbar">
      <li class="navbar1"><a href="home.html" title="Home">Home</a>
      <ul class="subnav"> 
               <li><a href="#">Menu 1 </a></li>
               <li><a href="#">Menu 2 </a></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"><a href="home.html" title="Home">Home</a>
    
                <ul class="subnav">
                    <li><a href="#">Menu 1 </a>
    
                    </li>
                    <li><a href="#">Menu 2 </a>
    
                    </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;
}

输出：

Working Fiddle

Answer 2

您应该删除 text-indent:-9999px 并将其添加到您的 CSS 中

删除行：

ul.navbar li a { text-indent:-9999px }

CSS：

.navbar li ul {display:none;}
.navbar li:hover ul {display:block;}

比你有一个带有隐藏子导航的基本导航栏。
从这里您可以尝试使用您的图片。

演示是您的代码与新代码..

DEMO

更像你想要的是，不要删除 css ..而只添加这 2 行和这 1：

.navbar li:hover li a{ text-indent:1px; background:white; }

DEMO 2 （没有你的img（不知道它是什么））。

小提琴评论后的最新更新：
您应该指定您的 html 和 css .. 刚刚将一个类添加到第一个链接 class="home" 和住宿 class="accomodations"

并在 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