Question

我有一个使用CSS的下拉菜单，每次添加“width：## px;”咬住它，它以某种方式将水平菜单变成一个垂直的混乱。我甚至试图在DIV标签上添加一个样式宽度而没有骰子。

这是CSS（我附加了一个paste.bin链接，因为CSS很长）：

Answer 1

定位绝对DIV相对于身体将始终对视口大小做出反应。

最好的办法是将你的#cssmenu div重新放回容器div中，但是你仍然可以使用你现在正在使用的div命令获得你想要的结果。

将您的CSS更改为以下内容（您还应该将边框半径内容放回原处）：

#cssmenu {   

text-align: center;
overflow: hidden;
margin-top:46px;
height: 49px;
width:1200px;  /* Same width as wrapper */
margin-left:auto;
margin-right:auto;
margin-bottom:-95px; /* Hackish, but only possibility in this div order */
}

在样式表的底部（以否决其他人）

#cssmenu>ul {
float:none !important;
display:inline-block;
}

在我看来，使用负边距有点hackish，但它会做你想要的。

注意：由于我没有看到子菜单出现，因此无法测试子菜单行为。

的Jeroen。

Answer 2

编辑此ul＆gt;这将改变列表中每个下拉列表的宽度

#cssmenu > ul > li {
  float: left;
  width: **px;

}

Answer 3

您的下拉菜单是另一个列表的子列表 - 您的顶级导航，因此您需要使用CSS定位。

#cssmenu ul li ul li {
   width: **px;
}

Answer 4

相反，我发现wordpress有一个下拉菜单插件，我只需要为小部件注册标题。它仍然有点儿童车，但一旦我看起来正确，它应该工作..

谢谢大家的帮助，我从中学到了很多东西！

如何更改CSS下拉菜单的宽度？

4 个答案: