html - CSS - 下拉菜单子(monad)项将整个样式向下拖动一级

Question

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

菜单项“Services”是“test”的父项，应该有一条干净的线，但是当打开“Services”时，整个菜单的边框会随着“test”扩展，应该只有一个小边框与“服务”围绕“测试”。
为此，如果我正确的话，我必须编辑“current active deeper parent”或“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>