我真的很想阻止菜单项跳来跳去 on this site随着父项扩展以适合其子项。
当我添加这个 CSS 时,我可以让它看起来像我想要的那样,强制菜单项具有固定宽度:
/*Menu item 1*/
#menu-item-117 .sub-menu {right: -125px;}
/*Menu item 2*/
#menu-item-73 {width:45px;}
#menu-item-73 .sub-menu {width:980px!important;right: -10px;}
/*Menu item 3*/
#menu-item-122 {width:65px;}
#menu-item-122 .sub-menu{width:980px!important;right: 165px;}
但是,这显然不理想,因为菜单需要是动态的...
有没有办法通过 CSS 实现我想要的?我希望如此!
我正在使用 Theme Hybrid 附带的 Superfish 菜单用于 Wordpress。
在此先感谢您提供的任何帮助!
最佳答案
我明白你的意思了..让我们再看看。
此构建使用 position: relative/absolute;
而不是 float: right/left;
并且它有一个缺陷,如下所述。
不过,我还没有在包括 IE 在内的旧浏览器中对此进行测试(在 Chrome 和 Firefox 中进行了测试),但我希望这可以为您提供一些实现它的想法。 :)
#primary-menu .menu /* new rule */ {
position: relative;
height: 50px; /* The flaw is you have to fix the menu's height here */
}
#primary-menu ul {
position: absolute;
right: 0;
top: 0;
}
#primary-menu li {
float: left;
list-style: none outside none;
margin-left: 10px;
position: relative;
}
.sub-menu {
background: none repeat scroll 0 0 #244563;
clear: both;
display: none;
font-size: 0.8em;
overflow: visible;
padding: 5px 0 !important;
position: relative;
right: 0;
text-align: right;
top: 30px !important;
width: 700px !important;
}
.sub-menu li {
display: inline !important;
float: none !important;
padding: 10px 0 !important;
width: auto !important;
}
关于css - 右对齐 Superfish 菜单 - 并停止它跳来跳去,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7844800/