jQuery Mega菜单全宽菜单项

Question

我是CSS和jquery的新手，菜单项有问题。 我有一个Jquery Mega菜单，并且我希望“律师档案”菜单项为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 <9上不支持：last- child。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的单独实例，否则似乎没有一种方法可以配置每个菜单项的效果。