Html CSS下拉导航栏

有人能帮我一下我的代码有什么问题吗？为什么“管理员”选项卡下拉菜单不在应该在的地方。它应该在“管理”选项卡下面，但是当您将鼠标放在“管理”选项卡上时，下拉菜单会显示在“管理”选项卡旁边的选项卡上。我试图为管理员的ul指定一个id，但是没有任何效果。保持不变。非常感谢

HTML代码

<div id="navbar">
    <ul>
        <li> <a href="admin_home.php">Home</a></li>
        <li> <a href="admin_about.php">About us</a></li>

        <li> <a href="admin_games_all.php">Games</a>
            <ul>
                <li> <a href="admin_games_all.php">All Games</a></li>
                <li> <a href="admin_games_outdoor.php">Outdoor Games</a></li>
                <li> <a href="admin_games_indoor.php">Indoor Games</a></li>
                <li> <a href="admin_games_groups.php">Games in Groups</a> </li>
                <li> <a href="admin_games_pair.php">Games in Pair</a></li>
                </ul>
        </li>
        <li><a href="admin_tab.php">Admin</a>
            <ul id="list">
                <li><a href="admin_add.php">Add entry</a></li>
                <li><a href="admin_database.php">Passwor request / suggestions</a></li>
            </ul>
        </li>
        <li> <a href="admin_contact_form.php">Contact us</a></li>
        <li> <a href="logout.php">Log out</a></li>
    </ul>
</div>  

从#导航栏ul li ul上拆下左右两侧

将顶部填充添加到#导航栏ul li ul

设置宽度100%#导航栏

添加相对于#导航栏ul li的位置

#navbar ul li {
background-color: black;
opacity: 0.7;
float: left;
height: 25%;
width: 16.5%;
padding: 0;
margin: 0;
font-family: Arial;
font-weight: bold;
font-size: 16.5px;
text-align: center;
line-height: 20px;
position:relative;}

#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
    padding-top:10px;
position: absolute;
display: none;
top: 100%;
z-index: 1;}

小提琴：

---

将

位置：相对

添加到父列表项

#navbar ul li {
    position: relative;
}

您可能希望为子列表项添加一个宽度，使其可读

#navbar ul li ul li {
    width: 150px; /* for example */
}

---

你认为这是你的问题吗？”这是我创作的小提琴

参考

https://jsfiddle.net/95rqykjx/

CSS的变化如下：，

#导航栏ul li ul，移除宽度：20%；左：32%；
#导航栏ul li添加位置：相对位置
删除列表id；你不需要它；并替换这个css：

#navbar ul li ul {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
}

将
位置：相对
添加到
#navbar ul li
和
左：0；宽度：100%至
#导航栏ul li ul

希望这能解决你的问题


#导航栏{
宽度：100%；
身高：100%；
}
#纳瓦尔{
宽度：90%；
位置：固定；
列表样式：无；
填充：0；
保证金：0；
排名：0；
左：12.5%；
右：0；
z指数：1；
}
#纳瓦尔里酒店{
背景色：黑色；
不透明度：0.7；
浮动：左；
身高：25%；
宽度：16.5%；
填充：0；
保证金：0；
字体系列：Arial；
字体大小：粗体；
字号：16.5px；
文本对齐：居中；
线高：20px；
位置：相对位置；
}
#navbar ul li a{
显示：块；
填充物：7%10%；
文字装饰：无；
颜色：#e4；
}
#导航栏ul li a：悬停{
背景色：透明；
颜色：白色；
文本阴影：0px 0px 2px白色，0px 0px 2px白色，0px 0px 2px白色；
}
#纳瓦尔{
列表样式：无；
宽度：100%；
填充：0；
保证金：0；
位置：绝对位置；
显示：无；
最高：100%；
左：0；
右：40%；
z指数：1；
}
#navbar ul li ul li{
宽度：100%；
浮动：无；
背景色：黑色；
不透明度：10；
文本对齐：居中；
}
#导航栏ul li：悬停ul{
显示：块；
}
#navbar ul li ul#列表{
列表样式：无；
宽度：20%；
填充：0；
保证金：0；
位置：绝对位置；
显示：无；
最高：100%；
左：50%；
右：40%；
z指数：1；
}






















您可以创建JSFIDLE吗？当然可以。有一段时间：你敢这样看吗？在这里
#navbar ul li ul {
  list-style: none;
  width: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  display: none;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 1;
}