CSS

Question

我的主菜单在没有子菜单项的情况下工作得很好。但现在我必须添加额外的项目并想做一个下拉菜单。

菜单项 "Services" 是 "test" 的父项，应该有一条干净的线，但是当打开 "Services" 时，整个菜单的边框会随着 "test" 展开应该只是 "Services" 周围 "test".
长度相同的小边框为此我必须编辑 "current active deeper parent" 或 "nav-child unstyled small" 如果我是正确的。
如果可能，您甚至只需将鼠标悬停在 "Services" 上即可触发下拉菜单。

.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 - 下拉菜单子项将整个样式向下拖动一级

CSS - Dropdown menu child item drags the whole style one level down

html

menu

drop-down-menu