0

我是 css 和 jquery 的新手，菜单项有问题。我有一个 Jquery Mega 菜单，我想让 Attorney Profile 菜单项是 1 行而不是现在的两个。通常我会发布代码，但代码太多了。因此，我将发布一个指向实际工作站点的链接。

我尝试添加全角但没有成功。

$(document).ready(function($){
    $('#mega-menu-tut').dcMegaMenu({
        rowItems: '1',
        speed: 'fast'
        fullWidth: true
  });
 });

我也尝试在这里修改css： 

.dcjq-mega-menu ul.menu li .sub li.mega-hdr { /* Sub-menu headers - i.e. 2nd level navigation */
     float: left; /* Float the sub-menus and give them a fixed width to from the mega menu    rows */
     width: 130px; 
     height: 165px;
     margin: 0 2px 7px 2px;
     border: 3px solid #ccc;
}

但这只是修改了实际的内部菜单。

这是活动站点： http: //gdisinc.com/barker/default.php

请注意，如果您将鼠标悬停在“律师简介”上，它将显示两行。我怎样才能使这一行与网站的宽度相匹配，即 960 像素。谢谢！

PS：我使用了这个菜单系统： http: //www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/getting-started/

4

2 回答 2

1

您可以更改此样式的填充

.dcjq-mega-menu ul.menu li a

至

padding:12px 20px;

中的元素具有基于其内容的宽度，因此减小导航项的字体大小也可以。使用 Chrome 的 Web Inspector / Firefox 的 Firebug 等可以轻松找到此类问题的修复程序。

在联系我们选项卡之后没有小分隔线可能会很好。您可以通过添加这样的 :last-child 类来实现这一点：

.dcjq-mega-menu ul.menu li:last-child a { background:none; }

问题是这里的 CSS 选择器可读性不是很好，以后可能会导致非常烦人的问题。如果可以的话，总是将这么长的声明更改为单个类：

.last-menu-item { background:none; }

同样，请记住 :last-child 在 Internet Explorer < 9 上不受支持。 http://caniuse.com/#search=last-child

欢迎来到 CSS 的世界...... :)

于 2012-08-29T17:19:58.147 回答
0

看起来您需要在此处更改“rowitems”选项：

$(document).ready(function($){
  $('#mega-menu-tut').dcMegaMenu({
    rowItems: '3',
    speed: 'fast'
  });
});

如果将其更改为“5”，则应在同一行上显示所有项目。看看这些例子：

http://www.designchemical.com/lab/jquery-mega-drop-down-menu-plugin/examples/

除非您将菜单拆分为单独的 MegaMenu 实例，否则似乎无法为每个菜单项配置此效果。

于 2012-08-29T17:10:29.750 回答