Question

我尝试设置导航菜单结构，以几乎任何你能想象的方式进行样式化。但是，我遇到了一个我无法开始工作的场景。

顶级菜单是标准水平菜单，在无序列表和列表项标签上设置了单独的背景颜色。子菜单还为无序列表和列表项标签提供单独的背景颜色。

问题在于我希望顶级菜单和子菜单之间存在差距，但除非我在顶级菜单列表中添加额外的底部填充 - 它只是赢得了工作，因为添加额外的填充会影响无序列表的高度，该列表由于顶级菜单背景颜色而可见。

现在，如果我不想要或不关心顶级菜单上的背景颜色，那么我们就不会有问题。但是可以保留背景颜色并使菜单按预期工作吗？

这是菜单HTML：

<nav id="navigation" class="wf-td">
  <ul id="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li class="menu-item-has-children">
        <a href="#">Drop Down &#9660;</a>
        <ul>
          <li><a href="#">Sub-item 1</a></li>
          <li><a href="#">Sub-item 2</a></li>
          <li><a href="#">Sub-item 3</a></li>
          <li class="menu-item-has-children">
              <a href="#">Sub-item 4 &#9658;</a>
              <ul>
                <li><a href="#">Sub-sub-item 1</a></li>
                <li><a href="#">Sub-sub-item 2</a></li>
                <li><a href="#">Sub-sub-item 3</a></li>
                <li><a href="#">Sub-sub-item 4</a></li>
                <li><a href="#">Sub-sub-item 5</a></li>
              </ul>
          </li>
          <li><a href="#">Sub-item 5</a></li>
        </ul>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS：

p {
  font: normal normal 300 16px/ 26px Helvetica, Arial, Verdana, sans-serif;
  padding: 0 10px;
}

#navigation {
    background-color: tan;
    border-radius: 10px;
    padding: 20px;
  height:200px;
}

nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    display:block;
    background-color: darkgoldenrod;
    border-radius: 10px;
}

nav ul li a {
    display: block;
    margin: 5px;
    padding:6px 8px;
    text-decoration:none;
    font: normal normal 300 17px/ 26px Helvetica, Arial, Verdana, sans-serif;
    color: #fff;
    border-radius: 10px;
    background-color: goldenrod;
}

#main-nav > li {
    display: inline-block;
    position: relative;
    z-index: auto;
    vertical-align: middle;
    margin-left: 10px;
    margin-right: 10px;
  padding: 2px 0;
  /*padding-bottom: 10px;*/
}

/* Dropdown Styles */

nav ul ul {
    position: absolute;
    top:60px;
    left:auto;
    visibility: hidden;
    opacity: 0;
    padding: 10px;
    background-color: darkgoldenrod;
    border-radius: 10px;
}

nav ul ul ul {
    position: absolute;
    top:-18px;
    left:221px;
    border-radius: 5px;
}

nav li.menu-item-has-children:hover > ul {
    display: list-item;
    visibility: visible;
    opacity: 1;
}

nav ul ul li {
    position: relative;
    width:190px;
    line-height: 20px;
}

nav ul ul li a {
    font-size: 15px;
    border-radius: 5px;
}

nav ul ul li a:hover {
    background-color: tan;
}

下拉#main-nav和子菜单之间是否存在差距，仍然可以选择子菜单项（在#main-nav上启用背景颜色时）和子菜单？

我使用它的方法是扩展#main-nav > li上的底部填充。但是，我无法看到一种方法来阻止#main-nav背景受到影响？

同样可以在子菜单和子子菜单之间留一个间隙，并在子菜单上保留背景颜色吗？

我在此处设置了菜单：http://codepen.io/dgwyer/pen/emJwQP

Answer 1

我设法在子ul之前使用伪绝对元素使其工作。将子菜单保持在60px顶部，这样它就会正确放置，并将伪设置为-10px顶部，这样就可以填补创建的空白：

Updated CodePen

nav ul ul:before {
  display: block;
  height: 10px;
  width: 100%;
  left: 0;
  top: -10px;
  position: absolute;
  content: "";
}

Answer 2

发生的事情是，当鼠标移过间隙时，它不再触及li触发:hover状态。

您可以使用正确定位的父div来包裹子菜单uls，以便当鼠标在间隙之间移动时，它仍然在技术上位于li内部，这将继续允许菜单出现。

p {
  font: normal normal 300 16px/ 26px Helvetica, Arial, Verdana, sans-serif;
  padding: 0 10px;
}

#navigation {
	background-color: tan;
	border-radius: 10px;
	padding: 20px;
  height:200px;
}

nav ul {
	padding: 0;
	margin: 0;
	list-style: none;
	position: relative;
	display:block;
	background-color: darkgoldenrod;
	border-radius: 10px;
}

nav ul li a {
	display: block;
	margin: 5px;
	padding:6px 8px;
	text-decoration:none;
	font: normal normal 300 17px/ 26px Helvetica, Arial, Verdana, sans-serif;
	color: #fff;
	border-radius: 10px;
	background-color: goldenrod;
}

#main-nav > li {
	display: inline-block;
	position: relative;
	z-index: auto;
	vertical-align: middle;
	margin-left: 10px;
	margin-right: 10px;
  padding: 2px 0;
  /*padding-bottom: 10px;*/
}

/* Dropdown Styles */

nav li.menu-item-has-children {
  position: relative;
}
nav li.menu-item-has-children > div {
  display: none;
  padding-top: 10px;
  position: absolute;
  top: 50px;
  left: 0;
}
nav li.menu-item-has-children:hover > div {
  display: block;
}
nav li.menu-item-has-children > div li div {
  display: none;
  position: absolute;
	top: -18px;
	left: 190px;
  padding-left: 20px;
}
nav li.menu-item-has-children > div li:hover div {
  display: block;
}

nav ul ul {
	padding: 10px;
	background-color: darkgoldenrod;
	border-radius: 10px;
}
nav ul ul li {
	position: relative;
	width:190px;
	line-height: 20px;
}

nav ul ul li a {
	font-size: 15px;
	border-radius: 5px;
}

nav ul ul li a:hover {
	background-color: tan;
}

<nav id="navigation" class="wf-td">
  <ul id="main-nav">
    <li><a href="#">Home</a></li>
    <li><a href="#">About Us</a></li>
    <li class="menu-item-has-children">
        <a href="#">Drop Down &#9660;</a>
        <div class="test">
          <ul>
            <li><a href="#">Sub-item 1</a></li>
            <li><a href="#">Sub-item 2</a></li>
            <li><a href="#">Sub-item 3</a></li>
            <li class="menu-item-has-children">
                <a href="#">Sub-item 4 &#9658;</a>
                <div>
                  <ul>
                    <li><a href="#">Sub-sub-item 1</a></li>
                    <li><a href="#">Sub-sub-item 2</a></li>
                    <li><a href="#">Sub-sub-item 3</a></li>
                    <li><a href="#">Sub-sub-item 4</a></li>
                    <li><a href="#">Sub-sub-item 5</a></li>
                  </ul>
                </div>
            </li>
            <li><a href="#">Sub-item 5</a></li>
          </ul>
        </div>
    </li>
    <li><a href="#">News</a></li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

<p>Is it possible to have a gap between the drop down <code>#main-nav</code> and the sub-menu and still be able to select the sub-menu items (when a background color is enabled on <code>#main-nav</code>) and the sub-menu?</p>

<p>The ony way I got this to work is to extend the bottom padding on <code>#main-nav > li</code>. However, I couldn't see a way to do this and keep the <code>#main-nav</code> background from being affected?</p>

<p>By the same token is it possible to have a gap between the sub-menu and sub-sub-menu and retain the background color on the sub-menus?</p>

示例： http://codepen.io/anon/pen/MYyWwv

不可能的CSS导航菜单布局？

2 个答案: