Question

我正在设置下拉菜单样式，子菜单是左对齐文本的标准垂直列表。我希望最后2个菜单项具有右对齐文本，否则它们会离开屏幕边缘，因为子菜单文本比菜单文本长。

CSS：

.menu               {width: 1200px; margin: 0 auto; text-align: center;}
.menu ul            {display: none;}
.menu li            {display: inline-block; position: relative;}
.menu li a          {display: block; font-size: 12px; color: #fff; height: 50px; line-height: 50px; padding: 0 22px;}
.menu li a:hover        {background: #34556c;}
.menu li:hover ul       {display: block; position: absolute; top: 100%; left: 0; background: #426985; padding-bottom: 5px;}
.menu li ul li          {display: block;}
.menu li ul li a        {height: 20px; line-height: 20px; padding: 3px 85px 3px 20px; white-space: nowrap; text-align: left; }
.menu li#menu-item-133:hover ul, .menu li#menu-item-140:hover ul    {right: 0;}
.menu li#menu-item-133 ul li a, .menu li#menu-item-140 ul li a      {text-align: right; padding: 3px 20px 3px 85px;}

这似乎不起作用，因为子菜单似乎从左边开始：0并且在右边结束：0，它没有向左溢出以使文本适合。

可以在这里看到：http://tinyurl.com/loamosd（伪装的URL，因为它是客户服务器的IP）。

由于

Answer 1

我不得不重置原来的左：0使用left：initial;以及添加权限：0;

下拉菜单CSS查询

1 个答案: