纯css下拉菜单的子菜单，滚动条未显示多点击菜单

时间：2016-10-03 06:11:33

标签： javascript jquery html css drop-down-menu

我在我的一个项目中使用纯css下拉菜单。子菜单包含多个列表，就像在代码段中一样：

＆＃13;
＆＃13; 
/*Set the parent <li>’s CSS position property to ‘relative’.*/

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ce4040;
  border: 1px solid #e08d8d;
}
ul>li {
  border-left: 1px solid #e08d8d;
}
ul li {
  display: block;
  position: relative;
  float: left;
  background: #ce4040;
  border-bottom: 1px solid #e08d8d;
}
/*The CSS to hide the sub menus.
    */

li ul {
  display: none;
}
ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}
ul li a:hover {
  background: #ce4040;
}
/*Displays the dropdown menu on hover.*/

li:hover > ul {
  display: block;
  position: absolute;
}
li:hover li {
  float: none;
}
li:hover a {
  background: #ce4040;
}
li:hover li a:hover {
  background: #962e2e;
  color: #fff;
}
.main-navigation li ul li {
  border-top: 0;
}
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/

ul ul ul {
  left: 100%;
  top: 0;
}
/*Simple clearfix.*/

ul:before,
ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}
ul:after {
  clear: both;
}
＆＃13; 
<ul class="main-navigation">
  <li><a href="#">Home</a>
  </li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a>
      </li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a>
          </li>
          <li><a href="#">Grids</a>
          </li>
          <li><a href="#">Frameworks</a>
            <ul>
              <li><a href="#">Bootstrap</a>
              </li>
              <li><a href="#">Foundation</a>
              </li>
              <li><a href="#">Sass</a>
              </li>
              <li><a href="#">Less</a>
                <ul>
                  <li><a href="#">Bootstrap</a>
                  </li>
                  <li><a href="#">Foundation</a>
                  </li>
                  <li><a href="#">Sass</a>
                  </li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a>
          </li>
          <li><a href="#">jQuery</a>
          </li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
      <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">subPortfolios</a>
          </li>
          <li><a href="#">subTestimonials</a>
          </li>
          <li><a href="#">subPortfolios</a>
          </li>
          <li><a href="#">subTestimonials</a>
          </li>
        </ul>
      </li>
      <li><a href="#">Themes</a>
      </li>
      <li><a href="#">Plugins</a>
      </li>
      <li><a href="#">Themes</a>
      </li>
      <li><a href="#">Plugins</a>
      </li>
      <li><a href="#">Themes</a>
      </li>
      <li><a href="#">Plugins</a>
      </li>

      <li><a href="#">Options</a>
      </li>
      <li><a href="#">Options</a>
      </li>
      <li><a href="#">Themes</a>
      </li>
      <li><a href="#">Plugins</a>
      </li>

      <li><a href="#">Options</a>
      </li>
      <li><a href="#">Options</a>
      </li>
    </ul>
  </li>
  <li><a href="#">About Us</a>
  </li>
</ul>
＆＃13;
＆＃13;
＆＃13;

并尝试通过添加css：

来放置这样的滚动条 
li:hover > ul {
  display: block;
  position: absolute;
    max-height:250px;
  overflow-y:auto;
}

结果：

＆＃13;
＆＃13; 
/*Set the parent <li>’s CSS position property to ‘relative’.*/
ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #ce4040;
  border:1px solid #e08d8d;
}
ul>li{
  border-left:1px solid #e08d8d;
}
ul li {
  display: block;
  position: relative;
  float: left;
  background: #ce4040;
  border-bottom:1px solid #e08d8d;
}

/*The CSS to hide the sub menus.
*/

li ul { display: none; }

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover { background: #ce4040; }

/*Displays the dropdown menu on hover.*/

li:hover > ul {
  display: block;
  position: absolute;
    max-height:250px;
  overflow-y:auto;
  
}

li:hover li { float: none; }

li:hover a { background: #ce4040; }

li:hover li a:hover { background: #962e2e; color:#fff;}

.main-navigation li ul li { border-top: 0; }
/*Displays second level dropdown menus to the right of the first level dropdown menu.*/
ul ul ul {

  z-index: 9999;
}

/*Simple clearfix.*/


ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }
＆＃13; 
<ul class="main-navigation">
  <li><a href="#">Home</a></li>
  <li><a href="#">Front End Design</a>
    <ul>
      <li><a href="#">HTML</a></li>
      <li><a href="#">CSS</a>
        <ul>
          <li><a href="#">Resets</a></li>
          <li><a href="#">Grids</a></li>
          <li><a href="#">Frameworks</a>
            <ul>
              <li><a href="#">Bootstrap</a></li>
              <li><a href="#">Foundation</a></li>
              <li><a href="#">Sass</a></li>
              <li><a href="#">Less</a>
                <ul>
                  <li><a href="#">Bootstrap</a></li>
                  <li><a href="#">Foundation</a></li>
                  <li><a href="#">Sass</a></li>
                </ul>
              </li>
            </ul>
          </li>
        </ul>
      </li>
      <li><a href="#">JavaScript</a>
        <ul>
          <li><a href="#">Ajax</a></li>
          <li><a href="#">jQuery</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">WordPress Development</a>
    <ul>
        <li><a href="#">Custom Post Types</a>
        <ul>
          <li><a href="#">subPortfolios</a></li>
          <li><a href="#">subTestimonials</a></li>
            <li><a href="#">subPortfolios</a></li>
          <li><a href="#">subTestimonials</a></li>
        </ul>
      </li>
      <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
     <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
     <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
    
      <li><a href="#">Options</a></li>
      <li><a href="#">Options</a></li> <li><a href="#">Themes</a></li>
      <li><a href="#">Plugins</a></li>
    
      <li><a href="#">Options</a></li>
      <li><a href="#">Options</a></li>
    </ul>
  </li>
  <li><a href="#">About Us</a></li>
</ul>
＆＃13;
＆＃13;
＆＃13;

通过放置滚动条，未显示第二级和第三级下拉菜单。如何在不中断纯多重下降css的正常功能的情况下进行placecroller？任何建议，教程和解决方案都会受到高度欢迎，只要它能够解决问题。

1 个答案:

答案 0 :(得分：0)

请更改您的CSS 

ul ul ul {
  left: 100%;
  top: 0;
}

to

ul ul ul {
  z-index: 9999;
}

我希望它能帮到你..

相关问题
最新问题