右对齐 Superfish 菜单 - 并阻止它跳来跳去

发布于 2024-12-10 20:25:03 字数 662 浏览 0 评论 0原文

我真的很想阻止菜单项在在此网站上跳跃，因为父项会扩展以适合其子项。

当我添加这个 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？我希望如此！

我正在使用 WordPress Theme Hybrid 附带的 Superfish 菜单。

预先感谢您提供的任何帮助！

原文

I would really like to stop the menu items jumping around on this site as the parent item expands to fit its child.

I can get it looking how I want when I add this CSS, forcing the menu items to have fixed widths:

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

However, this is clearly not ideal, as the menu needs to be dynamic...

Is there a way to achieve what I want via CSS? I hope so!

I am using the Superfish menu that comes with Theme Hybrid for Wordpress.

Thanks in advance for any help you can offer!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

夜无邪 2024-12-17 20:25:03

我明白你的意思..让我们再看看。

此构建使用 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;
}

I get your point .. let's see again.

This build uses position: relative/absolute; instead of float: right/left; and it has one flaw mentioned below.

However I haven't test this in old browsers including IE (tested in Chrome & Firefox), but I hope this may provide you some idea to implement it. :)

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

回复收藏 0 原文

~没有更多了~