CSS下拉导航栏设计错误

-1

我在我的导航栏中有我想要修复的这个列表元素。CSS下拉导航栏设计错误

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; 
}

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

来源

2016-09-23 Amine

“解决这个问题”..但是...，嗯...我们怎么知道它应该看起来像什么？内容以什么为中心？菜单标题或页面？或者将这些项目放在下拉菜单中？和“整体背景”是什么？整个菜单，只是下拉菜单，菜单项？ – Scott

@Scott这是自我介绍。我在谈论下拉内容（我已经说过，如果你没有阅读完整内容）。下拉内容悬停仅适用于元素背景，而不适用于整个下拉背景 – Amine

我改变了一位代码。

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

这使子菜单不会从屏幕上流血。你可以改变px的值来改变它的方式。

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

如果你的菜单是动态生成的，你可能有一个不同的类应用到上一级菜单中循环，否则所有的菜单可右移了一点。

来源

2016-09-23 22:56:20 TRose

CSS下拉导航栏设计错误

回答

相关问题