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

一种方法是为您的Level 2锚点/下拉集创建一个包装器，并设置一个: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>