使垂直下拉列表与主菜单相同

Question

我尝试制作一个下拉子菜单（在本例中为'Products'），其宽度与主菜单相同。悬停/活动背景颜色应覆盖菜单的整个宽度。它似乎仅限于留在上面的铺设表中。

还有办法向边界扩展吗？

html,
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mainmenu li:hover .submenu {
  display: inherit;
  max-height: 200px;
  line-height: 25px;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease-out;
}

.easyflexMenu {
  width: 150px;
  height: 500px;
  float: left;
  color: #ffffff;
  background-color: #229dfc;
  border-radius: 5px;
  /*bolling van de hoeken*/
  padding: 10px;
}

.easyflexMenu a {
  margin: -10px;
  padding: 10px 10px 5px 15px;
  width: 145px;
  height: 50px;
  display: block;
  text-decoration: none;
  line-height: 25px;
  color: #ffffff;
  background-color: #229dfc;
}

.easyflexMenu a:active {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.easyflexMenu ul {
  margin: 0px;
  padding: 0px;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  list-style-type: none;
}

ul,
menu,
dir {
  display: block;
  list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;
}

<div id="efmainmenu" class="easyflexMenu">
  <nav class="navigation">
    <ul class="mainmenu">
      <li class="home"><a href="">Home</a></li>
      <li class="about"><a href="">About</a></li>
      <li class="products"><a href="">Products</a>
        <ul class="submenu">
          <li><a href="">Tops</a></li>
          <li><a href="">Bottoms</a></li>
          <li><a href="">Footwear</a></li>
        </ul>
      </li>
      <li class="contact"><a href="">Contact us</a></li>
    </ul>
  </nav>
</div>

Answer 1

我已将CSS缩小了一点，在此示例中，您对子菜单进行了修复height。
您可以使用jQuery的animate来解决它，而无需修复子菜单height

.navigation ul {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.navigation ul > li {
  display: block;
  margin: 0px;
  padding: 0px;
  width: 170px;
  min-height: 65px;
  line-height: 65px;
}
.navigation ul > li a {
  display: block;
  height: 100%;
  padding: 0px 15px;
  line-height: inherit;
  text-decoration: none;
  color: #fff;
  background-color: #229dfc;
}
.navigation ul > li a:active,
.navigation ul > li a:hover {
  background-color: #114e7e;
}
.navigation ul > li .submenu {
  display: inherit;
  height: 0px;
  overflow: hidden;
  -webkit-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
}
.navigation ul > li a:active + .submenu,
.navigation ul > li a:hover + .submenu,
.navigation ul > li .submenu:active,
.navigation ul > li .submenu:hover {
  height: 195px;
}

<div id="efmainmenu" class="easyflexMenu">
  <nav class="navigation">
    <ul class="mainmenu">
      <li class="home"><a href="">Home</a></li>
      <li class="about"><a href="">About</a></li>
      <li class="products"><a href="">Products</a>
        <ul class="submenu">
          <li><a href="">Tops</a></li>
          <li><a href="">Bottoms</a></li>
          <li><a href="">Footwear</a></li>
        </ul>
      </li>
      <li class="contact"><a href="">Contact us</a></li>
    </ul>
  </nav>
</div>

更新：.submenu以下的元素不应跳转

只需向position: absolute添加z-index: 50和.navigation ul > li .submenu，就像这个例子一样

.navigation ul {
  display: inline-block;
  margin: 0px;
  padding: 0px;
  list-style: none;
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
}
.navigation ul > li {
  position: relative;
  display: block;
  margin: 0px;
  padding: 0px;
  width: 170px;
  min-height: 65px;
  line-height: 65px;
}
.navigation ul > li a {
  display: block;
  height: 100%;
  padding: 0px 15px;
  line-height: inherit;
  text-decoration: none;
  color: #fff;
  background-color: #229dfc;
}
.navigation ul > li a:active,
.navigation ul > li a:hover {
  background-color: #114e7e;
}
.navigation ul > li .submenu {
  position: absolute;
  display: inherit;
  height: 0px;
  overflow: hidden;
  -webkit-transition: all 500ms ease-out;
  transition: all 500ms ease-out;
  z-index: 50;
}
.navigation ul > li a:active + .submenu,
.navigation ul > li a:hover + .submenu,
.navigation ul > li .submenu:active,
.navigation ul > li .submenu:hover {
  height: 195px;
}

<div id="efmainmenu" class="easyflexMenu">
  <nav class="navigation">
    <ul class="mainmenu">
      <li class="home"><a href="">Home</a></li>
      <li class="about"><a href="">About</a></li>
      <li class="products"><a href="">Products</a>
        <ul class="submenu">
          <li><a href="">Tops</a></li>
          <li><a href="">Bottoms</a></li>
          <li><a href="">Footwear</a></li>
        </ul>
      </li>
      <li class="contact"><a href="">Contact us</a></li>
    </ul>
  </nav>
</div>

Answer 2

简单的解决方案应该是让UI尽可能地响应，忽略使用诸如负边距之类的属性，固定宽度直到并且除非需要，否则无法绕过。 还要始终为开头的每个元素重置默认CSS边距和填充，这有助于删除元素周围和页面周围的空白区域。 我已经修改了你的CSS了。如果您仍然认为它需要更多宽度或空间，请尝试在锚元素上添加填充而不是固定宽度到.easyflexMenu。

//Resetting the CSS
* {
    margin: 0px;
    padding: 0px;
}
//ENDS
html,
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mainmenu li:hover .submenu {
  display: inherit;
  max-height: 200px;
  line-height: 25px;
}

.submenu {
  overflow: hidden;
  max-height: 0;
  width: 100%;
  -webkit-transition: all 0.5s ease-out;
}

.easyflexMenu {
  height: 500px;
  float: left;
  color: #ffffff;
  background-color: #229dfc;
  border-radius: 5px;
}

.easyflexMenu a {
  /*margin: -10px;*/
  padding: 10px 10px 5px 15px; //Change this if you want more width.
  width: 145px;
  height: 50px;
  display: block;
  text-decoration: none;
  line-height: 25px;
  color: #ffffff;
  background-color: #229dfc;
}

.easyflexMenu a:active {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

.easyflexMenu a:hover {
  color: #ffffff;
  background-color: rgba(0, 0, 0, 0.5);
}

li {
  display: list-item;
  text-align: -webkit-match-parent;
}

.easyflexMenu ul {
  /*margin: 0px;
  padding: 0px;*/
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 11px;
  list-style-type: none;
}

ul,
menu,
dir {
  display: block;
  /*list-style-type: disc;
  -webkit-margin-before: 1em;
  -webkit-margin-after: 1em;
  -webkit-margin-start: 0px;
  -webkit-margin-end: 0px;
  -webkit-padding-start: 40px;*/
}