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