Question

我是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

请注意，如果将鼠标悬停在“律师档案”上，则会显示两行。如何使该行与960px的站点宽度相匹配。谢谢！

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

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

同样，请记住：Internet Explorer上不支持last-child＆lt; 9。 http://caniuse.com/#search=last-child

欢迎来到CSS世界......：）

Answer 2

您似乎需要在此处更改“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的单独实例，否则看起来没有办法为每个菜单项配置此效果。

JQuery Mega菜单全宽菜单项

2 个答案: