0

最初我有一个导航栏，它在我的悬停时工作正常。然而，在我的工作取得进展之后，我意识到我有太多东西要添加到我的导航栏中，导致它变得很长，因此我采用了子导航栏/下拉列表。这基本上就是我的导航栏的样子

在此处输入图像描述

为了成为这样，这就是我的css的样子

#navbarwidth {
width:70%;
position:fixed;
text-align: center;
flex-align:center;
margin:0%;
top:20%;
left:15%;
}

#nav {
background: #292929;
background: -moz-linear-gradient(top, black, #3c3c3c 1px, #292929 25px);
background: -webkit-gradient(linear, left top, left 25, from(black), color-stop(4%, #3c3c3c), to(#292929));
position:absolute;
left:0%;
top:70px;
margin: 0px;
padding: 0;
border: 1px yellow;
border-bottom: none;
width:100%;
}
#nav li a, #nav li {
text-align: center;
display: inline-block;
min-width: 60px;
}
#nav li {
list-style: none;
}
#nav li a {
padding: 1em 2em;
text-decoration: none;
color: #5FFB17;
border-right: 0px solid #3c3c3c;
border-left: 0px solid #292929;
border-bottom: 0px solid #232323;
border-top: 0px solid #545454;
}
#nav li a:hover {

background: #2a0d65;
background: -moz-linear-gradient(top, #11032e, #2a0d65);
background: -webkit-gradient(linear, left top, left bottom, from(#11032e),  to(#2a0d65));
}

我的来源看起来像这样

<ul id="nav">
<li><a href="AdminAddAccount.aspx">Add Account</a></li>
<li><a href="AdminDropAccount.aspx">Drop Account</a></li>   
<li><a href="AdminEditProfile.aspx">Edit Account</a></li>
<li><a href="AdminColdStorage.aspx">Cold Account</a></li>   
<li><a href="AdminReportCheck.aspx">Report Check</a></li>
<li><a href="AdminLogout.aspx">Logout</a></li>
</ul>

为了让它产生一个子导航栏，我根据我的研究添加了这个

#nav ul{
position:absolute;
visibility:hidden;
padding:0;
margin:0;
top:30px;
}

我也相应地改变了我的来源

<div id="nav">
<ul>
<li><a href="#">Accounts</a></li>
<li><a href="AdminAddAccount.aspx">Add</a></li>
<li><a href="AdminDropAccount.aspx">Drop</a></li>   
<li><a href="AdminEditProfile.aspx">Edit</a></li>
<li><a href="AdminColdStorage.aspx">Cold</a></li>   
</ul>
<ul><li><a href="AdminReportCheck.aspx">Report Check</a></li></ul>
<ul><li><a href="AdminLogout.aspx">Logout</a></li></ul>
</div>

最后我的整个导航栏消失了。我很困惑。所以我想知道如何在我现有的导航栏上做一个下拉列表。

问候

4

1 回答 1

0

你隐藏了所有#nav ul。从此样式中删除可见性：隐藏：

#nav ul{
position:absolute;
/*visibility:hidden;*/
padding:0;
margin:0;
top:30px;
}

您可以查看简单的 CSS 下拉菜单，有很多示例可用。这是一个。甚至使用 jquery 插件，您也可以创建带有动画的非常漂亮的菜单。

于 2013-08-15T15:11:16.633 回答