导航按钮css/html下的下拉列表

我有一个带按钮的导航容器。我只需要为其中一个按钮制作一个下拉列表。如何使用CSS/HTML实现这一点。这是我的密码：

HTML:

}

}

---

我是否需要将其转换为ul，或者我是否可以保持原样，只需在“服务”按钮上添加一个下拉列表？谢谢您的帮助。

一般来说，在列表中导航总是一个好主意，它有助于在任何时候让您的选项对多维菜单系统开放。下面是我要做的：

HTML

<ul id="nav">
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a>
<ul>
<li><a href="sublink1.html">sublink 1</a></li>
<li><a href="sublink2.html">sublink 2</a></li>
</ul>
</li>
<li><a href="link3.html">link 3</a></li>
</ul>

jQuery-可选

这是如果你想对这个世界产生某种影响的话

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display:     none"}).show(800);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
}

---

希望这有帮助。

如果我理解正确：用户看到所有这些按钮，当鼠标悬停在一个特定按钮上时，该按钮会弹出一个下拉列表？如果是的话，看看这个。如果这对你没有帮助，请告诉我：非常感谢，我会试一试的！

.button {
text-align: center;
background: #226426;
color: #fff;
width: 100px;
height: 45px;
float: left;
text-decoration: none;
font-family: Arial, sans-serif;
font-size: 15px;
font-weight: bold;
border-right: solid 1px #91b293;
border-top: solid 1px #91b293;
border-bottom: solid 1px #91b293;

<ul id="nav">
<li><a href="link1.html">link 1</a></li>
<li><a href="link2.html">link 2</a>
<ul>
<li><a href="sublink1.html">sublink 1</a></li>
<li><a href="sublink2.html">sublink 2</a></li>
</ul>
</li>
<li><a href="link3.html">link 3</a></li>
</ul>

#nav, #nav ul {list-style: none; margin: 0; padding: 0;}
#nav li {position: relative;}
#nav li ul {position: absolute; top: 100%; left: 0; display: none;}
#nav li:hover ul {display: block;}

function mainmenu(){
$(" #nav ul ").css({display: "none"}); // Opera Fix
$(" #nav li").hover(function(){
    $(this).find('ul:first').css({visibility: "visible",display:     none"}).show(800);
    },function(){
    $(this).find('ul:first').css({visibility: "hidden"});
    });
}