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

Question

我一直在尝试为此代码添加一个下拉菜单，但似乎总是转过身来。我只想通过简单的翻转效果对subnav进行基本的查看。每次我尝试不同的代码时，它会在下拉菜单中使用主页图像，并且当它没有悬停时不会消失。想法？

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

您应该删除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

Answer 2

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