2

我在下面的 stackblitz 中创建了sidenav

我已经给出了overflow-x: visible，overflow-y: auto/hidden所以如果有更多菜单项，我应该会看到垂直滚动。但这打破了我的嵌套侧边菜单选项，它在 div 下而不是在上面看到。

* Top Level Menu */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  overflow-y: scroll;

}

因此，看不到我的嵌套 sidenav 选项。

注意：到目前为止，stackblitz 中的侧边菜单涵盖了完整视图。请滚动或调整输出窗口大小以查看正确的分辨率

预期的 在此处输入图像描述

可以给出任何修复，以便我可以看到嵌套的 sidenav 选项？

4

4 回答 4

2

如果我正确理解您要实现的目标，请在此处快速修复。

  • 添加overflow: visible到.nestedsidemenu
  • overflow-x: auto从中删除.nestedsidemenu ul
  • 更改.nestedsidemenu ul li为position: relative
  • 添加top: 0到.nestedsidemenu ul li:hover > ul（顶级，不在媒体查询中）

这是在行动：

/* Nested Side Bar Menu
    Project URL: http://www.dynamicdrive.com/style/csslibrary/item/nested_side_bar_menu/
*/

.nestedsidemenu {
  font: bold 16px 'Bitter', sans-serif;
  position: relative;
  width: 100px;
  overflow: visible;
}

/* Top Level Menu */
.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-y: visible;
}

/* Top level list items */
.nestedsidemenu ul li {
  position: relative;
}

/* Top level menu items link style */
.nestedsidemenu ul li a,
.nestedsidemenu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  background: #008c9e;
  color: white;
  padding: 14px 10px;
  color: #2d2b2b;
  text-decoration: none;
}

.nestedsidemenu ul li a:link,
.nestedsidemenu ul li a:visited {
  color: white;
}

/* Top level menu items link style on hover and when active */
.nestedsidemenu ul li:hover > a {
  background: #005f6b;
}

/* Sub ULs style */
.nestedsidemenu ul li ul {
  position: absolute;
  left: -5000px;
  top: 0;
  opacity: 0;
  width: 230px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
}

/* First Sub Levels UL style on hover */
.nestedsidemenu ul li:hover > ul {
  visibility: visible;
  left: 100%;
  top: 0;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}

/* Sub level Menu list items (alters style from Top level List Items) */
.nestedsidemenu ul li ul li {
  display: list-item;
  float: none;
}

/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */
.nestedsidemenu ul li ul li ul {
  top: 0;
  left: 100%;
}

/* Sub Levels link style on hover and when active */
.nestedsidemenu ul ul li:hover > a {
  background: #52616a;
}

/* Sub Levels UL style on hover */
.nestedsidemenu ul ul li:hover > ul {
  left: 100%;
}

/* Sub level menu links style */
.nestedsidemenu ul li ul li a {
  font: normal 14px 'Bitter', sans-serif;
  padding: 10px;
  margin: 0;
  background: #4ea1d3;
  border-right: none;
  border-top-width: 0;
}

/* LIs with a sub UL style */
.nestedsidemenu ul li > a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}

/* LIs with NO sub UL style */
.nestedsidemenu ul li > a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}

/* LIs with a sub UL pseudo class */
.nestedsidemenu ul li > a:after {
  /* add arrow inside LIs */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: #ffffff;
  top: 40%;
  right: 8px;
}

/* LIs with NO sub UL pseudo class */
.nestedsidemenu ul li > a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}

/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
  /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
  */

  .nestedsidemenu ul li:nth-last-of-type(-n + 1) ul li:hover > ul {
    left: -100%;
  }
}

@media (max-width: 500px) {
  /* SECOND breaking point 
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
  */
  .nestedsidemenu {
    width: 100%;
  }

  .nestedsidemenu ul li > a:after {
    /* add arrow inside LIs */
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    top: 40%;
    right: 8px;
  }

  .nestedsidemenu ul li {
    position: static;
  }

  .nestedsidemenu ul li ul {
    width: 100%;
    border-top: 2px solid rgba(0, 0, 0, 0.6);
    /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
    display: none;
  }

  .nestedsidemenu ul li:hover > ul {
    display: block;
    left: 0 !important;
    top: auto;
    box-shadow: 0 0 12px gray;
  }
}
<div class="nestedsidemenu">
<ul>
<li><a href="#">Item 1</a></li>
<li><a href="javascript:vold(0)">Folder 1</a>
  <ul>
      <li><a href="#">Sub Item 1.1</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
      <li><a href="#">Sub Item 1.2</a></li>
      <li><a href="#">Sub Item 1.3</a></li>
      <li><a href="#">Sub Item 1.4</a></li>
  </ul>
</li>
<li><a href="javascript:vold(0)">Folder 2</a>
  <ul>
      <li><a href="#">Sub Item 2.1</a></li>
      <li><a href="#">Sub Item 2.2</a></li>
      <li><a href="javascript:vold(0)">Folder 2.3</a>
        <ul>
            <li><a href="#">Sub Item 2.3.1</a></li>
            <li><a href="#">Sub Item 2.3.2</a></li>
            <li><a href="#">Sub Item 2.3.3</a></li>
            <li><a href="#">Sub Item 2.3.4</a></li>
            </ul>
        </li>
      <li><a href="#">Sub Item 2.4</a></li>
      <li><a href="#">Sub Item 2.5</a></li>
      <li><a href="#">Sub Item 2.6</a></li>
      <li><a href="#">Sub Item 2.7</a></li>
  </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="javascript:vold(0)">Folder 3</a>
  <ul>
      <li><a href="#">Sub Item 3.1</a></li>
      <li><a href="javascript:vold(0)">Folder 3.2</a>
        <ul>
            <li><a href="#">Sub Item 3.2.1</a></li>
            <li><a href="#">Sub Item 3.2.2</a></li>
            <li><a href="javascript:vold(0)">Folder 3.2.3</a>
                    <ul>
                        <li><a href="#">Sub Item 3.2.3.1</a></li>
                        <li><a href="#">Sub Item 3.2.3.2</a></li>
                        <li><a href="#">Sub Item 3.2.3.3</a></li>
                        <li><a href="#">Sub Item 3.2.3.4</a></li>
                        <li><a href="#">Sub Item 3.2.3.5</a></li>
                    </ul>
            </li>
            <li><a href="#">Sub Item 3.2.4</a></li>
        </ul>
      </li>
  </ul>
</li>
<li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
</ul>
<br style="clear: left" />
</div>

如果这不能回答您的问题，请澄清，我很乐意相应地调整我的解决方案。

于 2021-09-01T21:43:25.763 回答
2

如果您从中删除此overflow-y: hidden;选项， .nestedsidemenu ul您将解决此问题。

在此处输入图像描述

.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  /* overflow-y: hidden; */ /* remove this*/
}


.nestedsidemenu {
  font: bold 16px 'Bitter', sans-serif;
  position: relative;
  width: 100px;
}


/* Top Level Menu */

.nestedsidemenu ul {
  z-index: 100;
  margin: 0;
  padding: 0;
  position: relative;
  list-style: none;
  overflow-x: visible;
  /* overflow-y: hidden; */
  /* remove this*/
}


/* Top level list items */

.nestedsidemenu ul li {
  position: relative;
}


/* Top level menu items link style */

.nestedsidemenu ul li a,
.nestedsidemenu ul li span {
  display: block;
  position: relative;
  /* background of menu items (default state) */
  background: #008c9e;
  color: white;
  padding: 14px 10px;
  color: #2d2b2b;
  text-decoration: none;
}

.nestedsidemenu ul li a:link,
.nestedsidemenu ul li a:visited {
  color: white;
}


/* Top level menu items link style on hover and when active */

.nestedsidemenu ul li:hover>a {
  background: #005f6b;
}


/* Sub ULs style */

.nestedsidemenu ul li ul {
  position: absolute;
  left: -5000px;
  top: 0;
  opacity: 0;
  width: 230px;
  visibility: hidden;
  box-shadow: 2px 2px 5px gray;
  -webkit-transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
  transition: opacity 0.3s, visibility 0s 0.3s, left 0s 0.3s;
}


/* First Sub Levels UL style on hover */

.nestedsidemenu ul li:hover>ul {
  visibility: visible;
  left: 100%;
  opacity: 1;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
}


/* Sub level Menu list items (alters style from Top level List Items) */

.nestedsidemenu ul li ul li {
  display: list-item;
  float: none;
}


/* 2nd and beyond Sub Levels vertical offset after 1st level sub menu */

.nestedsidemenu ul li ul li ul {
  top: 0;
  left: 100%;
}


/* Sub Levels link style on hover and when active */

.nestedsidemenu ul ul li:hover>a {
  background: #52616a;
}


/* Sub Levels UL style on hover */

.nestedsidemenu ul ul li:hover>ul {
  left: 100%;
}


/* Sub level menu links style */

.nestedsidemenu ul li ul li a {
  font: normal 14px 'Bitter', sans-serif;
  padding: 10px;
  margin: 0;
  background: #4ea1d3;
  border-right: none;
  border-top-width: 0;
}


/* LIs with a sub UL style */

.nestedsidemenu ul li>a {
  /* add padding to accomodate arrow inside LIs */
  padding-right: 25px;
}


/* LIs with NO sub UL style */

.nestedsidemenu ul li>a:only-child {
  /* undo padding for non submenu LIs */
  padding-right: 10px;
}


/* LIs with a sub UL pseudo class */

.nestedsidemenu ul li>a:after {
  /* add arrow inside LIs */
  content: '';
  position: absolute;
  height: 0;
  width: 0;
  border: 5px solid transparent;
  border-left-color: #ffffff;
  top: 40%;
  right: 8px;
}


/* LIs with NO sub UL pseudo class */

.nestedsidemenu ul li>a:only-child:after {
  /* undo arrow for non submenu LIs */
  display: none;
}


/* ####### responsive layout CSS ####### */

@media (max-width: 923px) {
  /* FIRST breaking point
    Last top menu items' sub ULs should drop to the left (instead of right)
    Change 1 to a different number to exclude/include more top menu items based on menu and max-width setting above
  */
  .nestedsidemenu ul li:nth-last-of-type(-n + 1) ul li:hover>ul {
    left: -100%;
  }
}

@media (max-width: 500px) {
  /* SECOND breaking point
    For mobile and screen browser windows
    Get Sub ULs to expand entire width of document and drop down
    Changes menu reveal type from "visibility" to "display" to overcome bug. See comments below
  */
  .nestedsidemenu {
    width: 100%;
  }
  .nestedsidemenu ul li>a:after {
    /* add arrow inside LIs */
    content: '';
    position: absolute;
    height: 0;
    width: 0;
    border: 5px solid transparent;
    border-left-color: transparent;
    border-top-color: #fff;
    top: 40%;
    right: 8px;
  }
  .nestedsidemenu ul li {
    position: static;
  }
  .nestedsidemenu ul li ul {
    width: 100%;
    border-top: 2px solid rgba(0, 0, 0, 0.6);
    /* change menu reveal type from "visibility" to "display". Former seems to cause browser to jump to top of page sometimes when menu header is tapped on */
    display: none;
  }
  .nestedsidemenu ul li:hover>ul {
    display: block;
    left: 0 !important;
    top: auto;
    box-shadow: 0 0 12px gray;
  }
}
<div class="nestedsidemenu">
  <ul>
    <li><a href="#">Item 1</a></li>
    <li>
      <a href="javascript:vold(0)">Folder 1</a>
      <ul>
        <li><a href="#">Sub Item 1.1</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
        <li><a href="#">Sub Item 1.2</a></li>
        <li><a href="#">Sub Item 1.3</a></li>
        <li><a href="#">Sub Item 1.4</a></li>
      </ul>
    </li>
    <li>
      <a href="javascript:vold(0)">Folder 2</a>
      <ul>
        <li><a href="#">Sub Item 2.1</a></li>
        <li><a href="#">Sub Item 2.2</a></li>
        <li>
          <a href="javascript:vold(0)">Folder 2.3</a>
          <ul>
            <li><a href="#">Sub Item 2.3.1</a></li>
            <li><a href="#">Sub Item 2.3.2</a></li>
            <li><a href="#">Sub Item 2.3.3</a></li>
            <li><a href="#">Sub Item 2.3.4</a></li>
          </ul>
        </li>
        <li><a href="#">Sub Item 2.4</a></li>
        <li><a href="#">Sub Item 2.5</a></li>
        <li><a href="#">Sub Item 2.6</a></li>
        <li><a href="#">Sub Item 2.7</a></li>
      </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li>
      <a href="javascript:vold(0)">Folder 3</a>
      <ul>
        <li><a href="#">Sub Item 3.1</a></li>
        <li>
          <a href="javascript:vold(0)">Folder 3.2</a>
          <ul>
            <li><a href="#">Sub Item 3.2.1</a></li>
            <li><a href="#">Sub Item 3.2.2</a></li>
            <li>
              <a href="javascript:vold(0)">Folder 3.2.3</a>
              <ul>
                <li><a href="#">Sub Item 3.2.3.1</a></li>
                <li><a href="#">Sub Item 3.2.3.2</a></li>
                <li><a href="#">Sub Item 3.2.3.3</a></li>
                <li><a href="#">Sub Item 3.2.3.4</a></li>
                <li><a href="#">Sub Item 3.2.3.5</a></li>
              </ul>
            </li>
            <li><a href="#">Sub Item 3.2.4</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="https://twitter.com/ddrivegeorge">Twitter</a></li>
  </ul>
  <br style="clear: left" />
</div>

于 2021-08-22T20:11:10.453 回答
0

不幸的是，你不能这样做。您不能将 overflow-x 设置为一个值，而将 overflow-y 设置为另一个值。无论您定义什么，它都会影响两者（以溢出-y为优先级）。

如果overflow-x 是滚动，那么overflow-y 是自动的。

修复它的唯一方法是：

在UL上：删除溢出，添加width: 100px;

在它上面的div上（nestedsidemenu）：添加width: 1000px（或任何像calc(100vw + 20px)隐藏滚动的值）；添加overflow: auto;，添加max-height: 450px;。

同样在身体上：添加overflow-x: hidden;

你很好。

https://js-hn3i3v.stackblitz.io/

你不能像那样操纵溢出。:)

于 2021-09-01T09:42:28.077 回答
0

我应用了这个答案，但也改变了

/* Top level list items */
.nestedsidemenu ul li {
  position: relative;
}

因此，当主级别菜单的大小增加时，您仍然可以看到嵌套级别

看看：https ://js-1icnj9.stackblitz.io/

注意：如果您尝试在 stackblitz 的较小窗口上查看，奇怪的是文件夹 5 下的文本消失了。只需在整页中打开它，它应该可以正常工作

于 2021-09-04T09:25:06.340 回答