0

我有一个带有 2 个子菜单的 CSS 下拉菜单。一个水平条，其中有一个垂直下降的项目。当您将鼠标悬停在子菜单上时，右侧会弹出另一个子菜单...第一个项目直接在悬停项目的右侧...问题是当有一堆项目时，您必须滚动向下查看它们...我想将其垂直居中或显示在子菜单的最顶部...

下面是CSS

#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
  margin: 0px auto;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  z-index: 99;
  text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
#cssmenu #menu-button {
  display: none;

}
#cssmenu {
  width: auto;
  font-family: 'Open Sans', sans-serif;
  line-height: 1;
  background: #F21201;
  text-align: center;
}
#menu-line {
  position: absolute;
  top: 0;
  left: 0;
  height: 3px;
  background: #FFE973;
  -webkit-transition: all 0.25s ease-out;
  -moz-transition: all 0.25s ease-out;
  -ms-transition: all 0.25s ease-out;
  -o-transition: all 0.25s ease-out;
  transition: all 0.25s ease-out;
}
#cssmenu > ul > li {
 display: inline-block;

}


#cssmenu.align-center > ul {
  font-size: 0;
  text-align: center;
}
#cssmenu.align-center > ul > li {
  display: inline-block;
  float: none;
}
#cssmenu.align-center ul ul {
  text-align: left;
}
#cssmenu.align-right > ul > li {
  float: right;
}
#cssmenu.align-right ul ul {
  text-align: right;
}
#cssmenu > ul > li > a {
  padding: 20px;
  font-size: 12px;
  text-decoration: none;
  text-transform: uppercase;
  color: #000000;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
  color: #FFFFFF;
}
#cssmenu > ul > li.has-sub > a {
  padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
  position: absolute;
  top: 21px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #000000;
  border-right: 1px solid #000000;
  content: "";
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
  border-color: #009ae1;
}
#cssmenu ul ul {
  position: absolute;
  left: -9999px;
  border: solid 1px Black;
}
#cssmenu li:hover > ul {
  left: auto;
}
#cssmenu.align-right li:hover > ul {
  right: 0;
}
#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}
#cssmenu.align-right ul ul ul {
  margin-left: 0;
  margin-right: 100%;
}
#cssmenu ul ul li {
  height: 0;
  -webkit-transition: height .2s ease;
  -moz-transition: height .2s ease;
  -ms-transition: height .2s ease;
  -o-transition: height .2s ease;
  transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
  height: 32px;
}
#cssmenu ul ul li a {
  padding: 10px 20px;
  width: 160px;
  font-size: 12px;
  background: #FFE973;
  text-decoration: none;
  color: #000000;
  -webkit-transition: color .2s ease;
  -moz-transition: color .2s ease;
  -ms-transition: color .2s ease;
  -o-transition: color .2s ease;
  transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
  color: #ffffff;
}
#cssmenu ul ul li.has-sub > a::after {
  position: absolute;
  top: 13px;
  right: 10px;
  width: 4px;
  height: 4px;
  border-bottom: 1px solid #dddddd;
  border-right: 1px solid #dddddd;
  content: "";
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
  -webkit-transition: border-color 0.2s ease;
  -moz-transition: border-color 0.2s ease;
  -ms-transition: border-color 0.2s ease;
  -o-transition: border-color 0.2s ease;
  transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
  right: auto;
  left: 10px;
  border-bottom: 0;
  border-right: 0;
  border-top: 1px solid #dddddd;
  border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
  border-color: #ffffff;
}

我已更改cssmenu ul ul ul top:为负数，但是当您选择其中一个顶级子菜单时，它会上升太多并且出现相反的问题。

https://jsfiddle.net/zvqz9xdm/

4

1 回答 1

0

我已更改#cssmenu ul ul ul top为负数，但是当您选择其中一个顶级子菜单时，它会上升太多并且出现相反的问题。

我想你很接近。问题是您将调整应用于所有子子菜单，而不是仅对溢出的子菜单进行调整。

所以，现在，从“开胃菜”到“糖醋”的所有“菜单”项目大部分都在范围内显示它们的子菜单。那里没有问题。

问题从“Chow Mein”开始，其中一系列项目开始溢出父菜单。

在您的代码中，所有子菜单都位于容器的顶部：

#cssmenu ul ul ul {
  margin-left: 100%;
  top: 0;
}

对于从“Chow Mein”开始到“Platters”结束的每个子菜单，您需要调整top属性以将它们移动到所需的范围内。

我没有使用对所有溢出菜单应用toporbottom调整的单个类，因为“盘片”太长了，较短的菜单仍需要与其父菜单项对齐，否则悬停会中断。

将<ul>以下每个菜单项的 替换为调整后的代码。

<ul class="align1">  <!-- Chow Mein -->
<ul class="align2">  <!-- Curry -->
<ul class="align3">  <!-- Chop Suey -->
<ul class="align4">  <!-- Beef -->
<ul class="align5">  <!-- Poultry -->
<ul class="align6">  <!-- Platters -->

然后将这些规则添加到您的 CSS 中：

#cssmenu ul ul ul.align1  {  top: -100px;  }
#cssmenu ul ul ul.align2  {  top: -40px;   }
#cssmenu ul ul ul.align3  {  top: -125px;  }
#cssmenu ul ul ul.align4  {  top: -30px;   }
#cssmenu ul ul ul.align5  {  top: -30px;   }
#cssmenu ul ul ul.align6  {  top: -350px;  }

演示：https ://jsfiddle.net/zvqz9xdm/4/

于 2015-10-05T04:10:52.637 回答