css - 菜单第一级和子菜单上的 CSS border-bottom 的 Drupal 7 宽度不一致

Question

我希望在此 page 的菜单项上包含顶部边框，请参阅侧面的垂直菜单 block 。但是，我希望使子菜单的边框顶部分隔线扩展到全宽，始终延伸到菜单 block /第一级元素的左右边缘。这样，所有第一级和子菜单级的行分隔符都是一致的。

插入的代码行:

border-top: thin solid #D7D6D6;

顺便说一句，我正在编辑开箱即用的 Drupal 7 CSS 文件，指出了我进行更改的位置。查看完整 CSS styling page here .

完整代码示例如下:

/**
 * @file
 * Styles for menus and navigation markup.
 */

/**
 * Markup generated by theme_menu_tree().
 */
ul.menu {
  border: none;
  list-style: none;
  text-align: left; /* LTR */
}
ul.menu li {
  margin: 0 0 0 0.5em; /* LTR */
}
ul li.expanded {
  /* Jerome, disabled list styles on main menu sidebar
  list-style-image: url(../../misc/menu-expanded.png);
  list-style-type: circle;*/
}
ul li.collapsed {
  /* Jerome, disabled list styles on main menu sidebar
  list-style-image: url(../../misc/menu-collapsed.png); /* LTR 
  list-style-type: disc;*/
}
ul li.leaf {
  /* Jerome, disabled list styles on main menu sidebar
  list-style-image: url(../../misc/menu-leaf.png);
  list-style-type: square;*/

}
li.expanded,
li.collapsed,
li.leaf {
  /* increased padding, added border bottom between menu items
  padding: 0.2em 0.5em 0 0; */ /*  LTR */
  padding: 0.2em 0.5em 0 5px;
  margin: 0;
  border-top: thin solid #D7D6D6;
}
li a.active {
  color: #000;
}
td.menu-disabled {
  background: #ccc;
}

/**
 * Markup generated by theme_links().
 */
ul.inline,
ul.links.inline {
  display: inline;
  padding-left: 0;
}
ul.inline li {
  display: inline;
  list-style-type: none;
  padding: 0 0.5em;
}

/**
 * Markup generated by theme_breadcrumb().
 */
.breadcrumb {
  padding-bottom: 0.5em;
}

/**
 * Markup generated by theme_menu_local_tasks().
 */
ul.primary {
  border-bottom: 1px solid #bbb;
  border-collapse: collapse;
  height: auto;
  line-height: normal;
  list-style: none;
  margin: 5px;
  padding: 0 0 0 1em; /* LTR */
  white-space: nowrap;
}
ul.primary li {
  display: inline;
}
ul.primary li a {
  background-color: #ddd;
  border-color: #bbb;
  border-style: solid solid none solid;
  border-width: 1px;
  height: auto;
  margin-right: 0.5em; /* LTR */
  padding: 0 1em;
  text-decoration: none;
}
ul.primary li.active a {
  background-color: #fff;
  border: 1px solid #bbb;
  border-bottom: 1px solid #fff;
}
ul.primary li a:hover {
  background-color: #eee;
  border-color: #ccc;
  border-bottom-color: #eee;
}
ul.secondary {
  border-bottom: 1px solid #bbb;
  padding: 0.5em 1em;
  margin: 5px;
}
ul.secondary li {
  border-right: 1px solid #ccc; /* LTR */
  display: inline;
  padding: 0 1em;
}
ul.secondary a {
  padding: 0;
  text-decoration: none;
}
ul.secondary a.active {
  border-bottom: 4px solid #999;
}

Answer 1

将此添加到您的 main.css

ul.menu li ul li {
    margin: 0 -0.5em;
    padding: 0.2em 1em 0 1em;
}