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

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; 
}

- mitchell

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，只需添加这两行和这一行：

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

演示2 (没有你的img（不知道是什么）)。

在fiddle评论后的最新更新：
您应该指定您的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;
}

演示3

- Carl0s1z

---

我添加了这三行代码。现在，当鼠标悬停在隐藏的子导航上时，它会向右滑出到div中，并将我的下一个导航主菜单推开。例如，Home，Home，Home，Home，Home，Home，Accomodations。当不悬停在上面时，它会回到"Example Home, Accomodations"。我尝试了绝对定位，但情况变得更糟了。另外，你建议的样式并没有显示出来。它仍然使用我的导航栏中的图片，我更喜欢简单的CSS，类似于fiddle上发布的子菜单外观，以及简单的交互效果。 - mitchell

在您的演示中，主页的子导航菜单向右弹出，我需要它向下弹出，并能够自定义子导航菜单的CSS样式。 - mitchell

这是我的最新代码，我在此期间开始编写我的菜单的其余部分。我将位置设置为绝对定位，这样就创建了垂直导航栏，耶，但它只显示一个菜单。导航栏左侧有一个黑色空间。最后，图像仍无法格式化为子菜单。http://jsfiddle.net/mitchelll182/Z7kB2/1/ - mitchell

我正在努力让它工作，请稍等。还有一件事，将 padding:0; 添加到你的 <ul> 中。 - Carl0s1z

太棒了，非常感谢。如果你找到我能回报的方式，请告诉我。非常非常非常非常感谢。 - mitchell

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;
}

输出：

工作的 Fiddle

- Amarnath Balasubramanian

---

Amarnath 我该如何将我的当前、活动和悬停图像添加到这个页面上？每个图像的大小也不同。这就是我之前遇到的问题，因为即使我输入了我的图像，它也只会显示部分图像，而不是整个图像。 - mitchell