javascript - jQuery 端导航下拉菜单

Question

我正在构建一个滑入和滑出导航，在最小化时显示图标。在悬停时它会弹出并提供一个链接，但我想要发生的是当你悬停时链接也有一个下拉菜单。但是我无法将下拉菜单显示为 dsiaply。

.ResponsiveSideNav {
        width: 100%;
        background: #FFF;
        margin-bottom: 5px;
        font-size: 15px;
        z-index: 99999;
        /*display: none;*/
    }
        .ResponsiveSideNav .Header {
            background: #EAECED;
            border: 1px solid #E0E0E0;
            padding: 5px;
            color: #666;
            font-weight: bold;

        }
            .ResponsiveSideNav .Header a i {
                font-size: 22px;
                padding: 9px 10px;
            }

            .ResponsiveSideNav {
                margin: 0;
                padding: 0;
            }

            .ResponsiveSideNav ul li {
                /* Block */
                width: 50px;
                padding: 15px 0px; /* The box model says 0 width + 50px padding = a 50px wide element */
                display: pointer;

                /* Border */
                border-bottom: 1px solid #CCC;

                /* Background */
                background-color: #BE1313;
                background-repeat: no-repeat;

                /* Text */
                overflow: hidden; /* Very important, remove it and see why */
                white-space: nowrap; /* No stink'en word wrap here */

                /* Other */
                -webkit-transition: width 0.5s; /* Safari and Chrome */
                -moz-transition: width 0.5s; /* Firefox 4 */
                -o-transition: width 0.5s; /* Opera */
            }

            .ResponsiveSideNav ul li:hover{
                width: 250px;
            }

            .ResponsiveSideNav ul li i { 
                display: inline;
                /* Making this 100% height block makes the clickable link area fill the space */
                padding-left: 14px;
                color: black;
            }

            .ResponsiveSideNav ul li a { 
                display: inline;
                /* Making this 100% height block makes the clickable link area fill the space */
                padding-left: 25px;

                color: black;
            }

                /*  LEVEL 2 */
                .ResponsiveSideNav ul ul { 
                    width: 175px;
                    visibility: hidden; 
                    position: absolute; 
                    left: 0;
                    padding: 0px 10px;
                    margin: 0px 0px 4px 0px;
                    border-radius: 0 0 4px 4px;
                    background: #1C1C1C;
                    font-size: 12px;

                }
                .ResponsiveSideNav ul ul li { 
                    float: none;
                    border-radius: 0px;
                    background: none;
                    padding: 0px;
                    border-top: 1px #444 solid;
                    padding: 6px 6px;
                    border-left: none;
                }
                    .ResponsiveSideNav ul ul li:first-child { 
                        border-top-left-radius: 0px;
                        border-top: 0px;
                    }
                .ResponsiveSideNav ul li ul li a {
                    padding: 2px;
                    text-shadow: none;
                    font-weight: normal;
                    transition: all 0s ease;
                }
                .ResponsiveSideNav ul li ul li a:hover{
                    color: #E2C900;
                    text-decoration: none;
                }
                    .ResponsiveSideNav ul li ul li:last-child a:hover {

                    }

                /* IE 6 & 7 Needs Inline Block */
                .ResponsiveSideNav ul ul li a { 
                    border-right: none; 
                    width: 100%; 
                    display: inline-block; 
                } 

    <div class="ResponsiveSideNav">
    <div class="Header ClearFix">
        <a href="#" id="HideMenu" title="HideMenu" style="display: none;"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
        <a href="#" id="ShowMenu" title="ShowMenu" style="display: inline;"><i class="fa fa-bars" aria-hidden="true"></i></a>
    </div>
    <ul class="ClearFix">
                <li><i class="fa fa-users" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A</a>
                    <ul>
                        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.1</a></li>
                        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.2</a></li>
                        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.3</a></li>
                    </ul>
                </li>       
                <li><i class="fa fa-users" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A</a></li>    
                <li><i class="fa fa-users" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A</a></li>
    </ul>
</div>

它也有点笨拙，所以一定是遗漏了什么。

Answer 1

一种方法是为您的 2 级 anchor /下拉集创建一个包装器并设置一个 :hover控制该下拉列表显示的规则 <ul> .级联继承可能证明是第 2 级链接的一个“问题”，但没有什么是不可逾越的。

HTML

<li><i class="fa fa-users" aria-hidden="true"></i>
  <span class="level-2-wrapper"> <!-- new wrapper; functions to catch the :hover and control the display of its child ul -->
    <a href="#" title="Update Staff List from API">Link C</a>
    <ul>
      <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.1</a></li>
      <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.2</a></li>
      <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.3</a></li>
    </ul>
  </span>
</li>

CSS

.ResponsiveSideNav ul li:hover .level-2-wrapper:hover ul {
  visibility: visible; // …or however you plan on displaying the drop-down
}

.ResponsiveSideNav {
  width: 100%;
  background: #FFF;
  margin-bottom: 5px;
  font-size: 15px;
  z-index: 99999;
  /*display: none;*/
}

.ResponsiveSideNav .Header {
  background: #EAECED;
  border: 1px solid #E0E0E0;
  padding: 5px;
  color: #666;
  font-weight: bold;
}

.ResponsiveSideNav .Header a i {
  font-size: 22px;
  padding: 9px 10px;
}

.ResponsiveSideNav {
  margin: 0;
  padding: 0;
}

.ResponsiveSideNav ul li {
  /* Block */
  width: 50px;
  padding: 15px 0px;
  /* The box model says 0 width + 50px padding = a 50px wide element */
  display: pointer;
  /* Border */
  border-bottom: 1px solid #CCC;
  /* Background */
  background-color: #BE1313;
  background-repeat: no-repeat;
  /* Text */
  overflow: hidden;
  /* Very important, remove it and see why */
  white-space: nowrap;
  /* No stink'en word wrap here */
  /* Other */
  -webkit-transition: width 0.5s;
  /* Safari and Chrome */
  -moz-transition: width 0.5s;
  /* Firefox 4 */
  -o-transition: width 0.5s;
  /* Opera */
}

.ResponsiveSideNav ul li:hover {
  width: 250px;
}

.ResponsiveSideNav ul li i {
  display: inline;
  /* Making this 100% height block makes the clickable link area fill the space */
  padding-left: 14px;
  color: black;
}

.ResponsiveSideNav ul li a {
  display: inline;
  /* Making this 100% height block makes the clickable link area fill the space */
  padding-left: 25px;
  color: black;
}


/*  LEVEL 2 */

.ResponsiveSideNav ul ul {
  width: 175px;
  visibility: hidden;
  position: absolute;
  left: 0;
  padding: 0px 10px;
  margin: 0px 0px 4px 0px;
  border-radius: 0 0 4px 4px;
  background: #1C1C1C;
  font-size: 12px;
}

.ResponsiveSideNav ul li:hover .level-2-wrapper:hover ul {
  visibility: visible; // …or however you plan on displaying the drop-down
}

.ResponsiveSideNav ul ul li {
  float: none;
  border-radius: 0px;
  background: none;
  padding: 0px;
  border-top: 1px #444 solid;
  padding: 6px 6px;
  border-left: none;
}

.ResponsiveSideNav ul ul li:first-child {
  border-top-left-radius: 0px;
  border-top: 0px;
}

.ResponsiveSideNav ul li ul li a {
  padding: 2px;
  text-shadow: none;
  font-weight: normal;
  transition: all 0s ease;
}

.ResponsiveSideNav ul li ul li a:hover {
  color: #E2C900;
  text-decoration: none;
}

.ResponsiveSideNav ul li ul li:last-child a:hover {}


/* IE 6 & 7 Needs Inline Block */

.ResponsiveSideNav ul ul li a {
  border-right: none;
  width: 100%;
  display: inline-block;
}

<div class="ResponsiveSideNav">
  <div class="Header ClearFix">
    <a href="#" id="HideMenu" title="HideMenu" style="display: none;"><i class="fa fa-arrow-left" aria-hidden="true"></i></a>
    <a href="#" id="ShowMenu" title="ShowMenu" style="display: inline;"><i class="fa fa-bars" aria-hidden="true"></i></a>
  </div>
  <ul class="ClearFix">
    <li><i class="fa fa-users" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A</a>
      <ul>
        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.1</a></li>
        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.2</a></li>
        <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link A.3</a></li>
      </ul>
    </li>
    <li><i class="fa fa-users" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link B</a></li>
    <li><i class="fa fa-users" aria-hidden="true"></i>
      <span class="level-2-wrapper">
        <a href="#" title="Update Staff List from API">Link C</a>
        <ul>
          <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.1</a></li>
          <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.2</a></li>
          <li><i class="fa fa-sign-language" aria-hidden="true"></i><a href="#" title="Update Staff List from API">Link C.3</a></li>
        </ul>
      </span>
    </li>

  </ul>
</div>