CSS下拉导航栏设计错误

Question

我的导航栏中有我要修复的列表元素。

HTML代码：

<li class="dropdown">
    <a class="dropbtn" style="cursor:allowed;">
    <b><i class="glyphicon glyphicon-user"></i> <?php echo $_SESSION['user']['nom']; ?> 
    </b>
    </a>
   <div class="dropdown-content">
       <ul>
           <li><a href="administration.php"><b>Administration</b></a></li></br>
           <li><a href="./traitement/deconnecter.php"><b>Deconneter</b></a></li>
   </ul>
   </div>
</li>

CSS代码：

li a:hover, .dropdown:hover .dropbtn {
    background-color: #669900 ;
}

li.dropdown 
{
    display: inline-block;
    float:right;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f1f1f1;
    min-width: 160px;
    text-align: left;
    text-decoration: none;
    padding: 12px 16px;
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #555}

.dropdown:hover .dropdown-content {
    display:inline-table;
}

我的问题是：如何将下拉内容与中心对齐以使其适合页面？如何使下拉内容上的悬停颜色应用于整个背景而不仅仅是名称的背景？

Answer 1

我改变了一点代码。

.dropdown:hover .dropdown-content {
display:inline-table;
right:0px;}

这可以防止子菜单从屏幕上流下。您可以更改px值以将其转换为其中一种方式。

小提琴：https://jsfiddle.net/Le7se5L9/

如果您的菜单是动态生成的，您可能需要在循环中的最后一个菜单中应用其他类，否则您的所有菜单都可能会稍微向右移动。