如何处理延伸到屏幕下方的菜单

Question

我很难处理使用悬停操作延伸到屏幕下方的菜单/子菜单/子子菜单。

我有一个菜单，有多层子菜单。使用HOVER扩展菜单。在某些情况下，子菜单或子子菜单会延伸到屏幕下方。如果我移动光标以滚动屏幕，菜单会折叠。我可以进入菜单项的唯一方法是使用向下箭头，同时将光标保持在菜单中。不理想。我希望能够滚动菜单或让窗口滚动或允许我访问隐藏菜单项的内容。

＆＃13;

＆＃13;

/*Menu Color Classes*/

.green {
  background: #6AA63B;
}
.yellow {
  background: #FFFF00;
}
.red {
  background: #CC6666;
}
.purple {
  background: #CC99FF;
}
.siteblue {
  background: #0047FF;
}
.blue {
  background: #0292C0;
}
.purplered {
  background: #66FFFF;
}
.yellowgreen {
  background: #99FF33;
}
.orange {
  background: #FF9900;
}
.bluegrey {
  background: #669999;
}
#main_nav {
  position: relative;
  z-index: 0
}
#main_nav ul {
  list-style: none;
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  font-size: 12px;
  -webkit-transition: .5s;
  transition: .5s;
  text-align: center;
}
#main_nav ul a {
  display: block;
  color: black;
  text-decoration: none;
  font-size: 12px;
  padding: 0 15px;
  font-family: HelveticaNeue, Helvetica Neue, Helvetica, Arial, sans-serif;
}
#main_nav ul li,
ul li ul {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  color: black;
  -webkit-transition: .5s;
  transition: .5s;
}
#main_nav ul li ul li {} #main_nav > ul > li > a,
h1 {
  text-transform: uppercase;
}
#main_nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding: 0;
  -webkit-transition: .5s;
  transition: .5s;
}
#main_nav ul ul ul {
  top: 0;
  left: 100%;
  -webkit-transition: .5s;
  transition: .5s;
}
#main_nav ul li:hover {
  background: gray;
}
#main_nav ul li:hover > ul {
  display: block;
}
#main_nav ul li.current-menu-item {
  background: #999
}
#main_nav ul ul li {
  float: none;
  width: 150px;
  text-align: center;
  padding: 5px 0 5px 0;
  -webkit-transition: .5s;
  transition: .5s;
}
#main_nav ul ul a {
  line-height: 120%;
  padding: 10px 15px;
}
#main_nav {
  margin-top: 1px;
}
​

＆＃13;

<nav id="main_nav">
  <ul class="siteblue">

    <li class="green">
      <a id="close" href="" onclick="showiframe(this.id); return false;">ITEM</a>
      <ul class="green">
        <li class="green"><a id="busdev" href="" onclick="showiframe(this.id); return false;">About</a>
        </li>
        <hr/>

        <li class="green">Item</li>
        <hr/>
        <li class="green">Item</li>
        <hr/>
        <li class="purplered">Item
          <ul class="green">
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>

            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="green">Item</li>
            <hr/>
            <li class="yellowgreen">Item
              <ul class="green">
                <li class="green">Item</li>
                <hr/>
                <li class="orange">Item
                  <ul class="green">
                    <li class="green">Item</li>
                    <hr/>
                    <li class="green">Item</li>
                    <hr/>
                    <li class="yellow">Item
                      <ul class="green">
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>
                        <hr/>
                        <li class="green">Item</li>

                        <hr/>
                      </ul>

                    </li>
                    <hr/>
                    <li class="green">Item</li>
                    <hr/>
                    <li class="green">Item</li>
                    <hr/>
                  </ul>
                  <li class="green">Item</li>
                  <hr/>
                  <li class="green">Item</li>
                  <hr/>
                  <li class="green">Item</li>
                  <hr/>
              </ul>
              <li class="green">Item</li>
              <hr/>
              <li class="green">Item</li>
              <hr/>
          </ul>
          <li class="green">Item</li>
          <hr/>
          <li class="green">Item</li>
          <hr/>
      </ul>
      </li>


  </ul>
</nav>
​

＆＃13;

＆＃13;

＆＃13;