Question

我在主菜单上工作完全没有子菜单项。但现在我必须添加其他项目并想要下拉菜单。

菜单项“服务”是“测试”的父项应该有一条简洁的线，但是当打开“服务”时，整个菜单的边框扩展为“测试”，应该只有一个小的边框长度与围绕“测试”的“服务”。
为了这个工作我必须编辑“当前活跃的更深的父母”或“nav-child unstyled small”如果我是正确的。
如果可能，您甚至只需将鼠标悬停在“服务”上即可触发下拉菜单。

.flowmenu {
  background: none repeat scroll 0 0 #333333;
  padding-left: 0px;
  position: relative;
}
.flowmenu li {
  display: inline-block;
  list-style: none outside none;
  padding: 0;
}
.flowmenu ul li {
  position: relative;
}
.flowmenu li > a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-color: #000000;
  border-style: solid;
  border-width: 0 1px 0 0;
  box-shadow: 1px 0 0 0 #555555;
  margin-bottom: 0;
  padding: 5px 15px;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: 'Corbel', sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 30px;
  text-decoration: none;
}
.flowmenu li.active {
  background: #222222;
}

<div class="navfix">
  <ul class="nav menu flowmenu li">
    <li class="item-435"><a href="/">Home</a>
    </li>
    <li class="item-485"><a href="/">Communication</a>
    </li>
    <li class="item-486 current active deeper parent"><a href="/services">Services</a>
      <ul class="nav-child unstyled small">
        <li class="item-579"><a href="/services/test">Test</a>
        </li>
      </ul>
    </li>
    <li class="item-487"><a href="/">Languages</a>
    </li>
    <li class="item-488"><a href="/">Network</a>
    </li>
  </ul>
</div>

Answer 1

如果你想要一个下拉菜单，<ul>的父列表项必须是位置相对的

它自己的<ul>可以是绝对的位置，所以它很好地出现在父级之下。我做了jsFIDDLE

最重要的变化：

.flowmenu > li {
  position:relative;
  display: inline-block;
  list-style: none outside none;
  padding: 0;
}

.flowmenu ul {
  position: absolute;
  display:block; /* or none */
  width:100%;
  background: #222222;
  list-style:none;
  margin:0;
  padding:0;
}

希望这有帮助！我没有完全按照下拉列表的样式，也许自己这样做更好

.flowmenu {
  background: none repeat scroll 0 0 #333333;
  padding-left: 0px;
  position: relative;
}
.flowmenu > li {
  position: relative;
  display: inline-block;
  list-style: none outside none;
  padding: 0;
}
.flowmenu ul {
  position: absolute;
  display: none;
  width: 100%;
  background: #222222;
  list-style: none;
  margin: 0;
  padding: 0;
}
.flowmenu ul > li {
  display: block;
}
.flowmenu li > a {
  background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
  border-color: #000000;
  border-style: solid;
  border-width: 0 1px 0 0;
  box-shadow: 1px 0 0 0 #555555;
  margin-bottom: 0;
  padding: 5px 15px;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: pointer;
  display: block;
  font-family: 'Corbel', sans-serif;
  font-size: 12px;
  font-weight: normal;
  line-height: 30px;
  text-decoration: none;
}
.flowmenu > li.active {
  background: #222222;
}
.flowmenu > li:hover ul {
  display: block;
}

<div class="navfix">
  <ul class="nav menu flowmenu li">
    <li class="item-435"><a href="/">Home</a>
    </li>
    <li class="item-485"><a href="/">Communication</a>
    </li>
    <li class="item-486 current active deeper parent"><a href="/services">Services</a>
      <ul class="nav-child unstyled small">
        <li class="item-579"><a href="/services/test">Test</a>
        </li>
      </ul>
    </li>
    <li class="item-487"><a href="/">Languages</a>
    </li>
    <li class="item-488"><a href="/">Network</a>
    </li>
  </ul>
</div>

CSS - 下拉菜单子项将整个样式拖拽一级

1 个答案: