css - 多级下拉菜单

Question

我使用的平台不支持多级菜单。我尝试创建一个但遇到以下问题:

在“jsfiddle”可用之后，Sub2 Sub3 菜单会在同一区域打开您的“子”菜单。请参阅下图以更好地解释问题。

/* Menu Styles */

.Header_Menu,
.Application_Menu {
    background: #555555; /* set the Application_Menu background color, applied when on slide mode */
    white-space: nowrap;
}

.Menu_TopMenuActive {
    border-bottom: none;  
    background: #393939;
}

.Menu_TopMenu {    
    margin: 0px;
}

.Menu_TopMenus:empty {

}

.Menu_TopMenu [class^=fa] {
    margin-right: 8px;   
}

.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
    color: #C4C4C4;
    text-decoration: none; 
    text-shadow: none;
    padding: 12px 20px;
    display: inline-block;
}

.Menu_TopMenu:hover,
.Menu_TopMenu:hover a [class^=fa],
.Menu_TopMenuActive a:link [class^=fa],
.Menu_TopMenuActive a:visited [class^=fa],
a.Menu_SubMenuItemActive:link [class^=fa], 
a.Menu_SubMenuItemActive:visited [class^=fa],
a.Menu_SubMenuItem:hover [class^=fa] {
    color: #E83E26;
    text-decoration: none;
}

.Menu_TopMenuActive .Menu_DropDownArrow {
    border-top-color: #555555;
}

.Menu_DropDownArrow {
    border-top-color: #C4C4C4;
    right: 13px;
}

.Menu_DropDownPanel {
    margin-top: 0px;
    border: 1px solid #888;
}

a.Menu_SubMenuItem,
a.Menu_SubMenuItem:hover, 
a.Menu_SubMenuItem:link, 
a.Menu_SubMenuItem:visited {
    background-color: #747474;
    margin: 0;
    padding: 7px 20px 7px 20px;
    border-bottom: 1px solid #555555;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    height: auto;
}

a.Menu_SubMenuItem,
a.Menu_SubMenuItem:hover, 
a.Menu_SubMenuItem:link, 
a.Menu_SubMenuItem:visited {
    color: #C4C4C4;
}

.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited,
a.Menu_SubMenuItemActive:link, 
a.Menu_SubMenuItemActive:visited,
a.Menu_SubMenuItem:hover {
    color: white;
}

.MenuSlider_Toggler {
    color: white;
}

.Menu_DropDownButton {
    display: inline-block;
    *display: inline; 
    *zoom: 1;
    *z-index:200; /* required for IE7 */
}

.Menu_DropDownButton.open {
    z-index: 210;
    *vertical-align: top;
}

.Menu_DropDownButton.open .Menu_TopMenu {
    background-image: none;
    position: relative;
    z-index: 210;
    cursor: pointer;
    *display: block;
}

.Menu_DropDownArrow {
    position: relative;
    top: -2px;
    border-style: solid dashed dashed;
    border-color: transparent;
    border-top-color: #666;
    display: -moz-inline-box;
    display: inline-block;
    font-size: 0;
    height: 0;
    line-height: 0;
    width: 0;
    border-width: 3px 3px 0;
    padding-top: 1px;
}

.Menu_DropDownPanel {
    position: absolute;
    z-index: 200;
    display: none;
    list-style: none;
    background-color: white;
    border: 1px solid #ccc;
    margin: -1px 0 0 -1px;
    -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
    -webkit-background-clip: padding-box;
    -moz-background-clip: padding;
    background-clip: padding-box;

}

.Menu_SubItemsPlaceholder {

}

.Menu_DropDownPanel a, 
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
    display: block;
    padding: 3px 10px;
    clear: both;
    font-size: 13px;
    text-decoration: none;
    line-height: 2em;
    color: #333333;
    white-space: nowrap;
    margin: 0;
    background: none;
    text-shadow: none;
    border-width: 0;
    border-radius: 0;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
    min-width: 0;
    text-align: left;
    *width: 140px;
    min-width: 140px;
    height: 26px;
}

.Menu_DropDownPanel a:hover,
.Menu_DropDownPanel a:focus {
    text-decoration: none;
}

/* ExcludeAllFromPickersOutsideBlock */

.level2{
    display: none;
}

.level1:hover > .level2{
    display: block;
}

.level2:after {
    content: ""; clear: both; display: block;
}

.level2 {
    position: absolute;
    left: 140px;
    border-left: 1px solid;
}

.level1 > a{
    float: left;
}

.level2 .level3 div {
    float: none; 
    border-top: 1px solid #6b727c;
    border-bottom: 1px solid #575f6a;
    position: relative;
}

.level2 > a:first-child {
    display: none !important;
}

.Menu_DropDownButton:hover .Menu_DropDownPanel{
    display:block;
}

<div id="" class="Menu_DropDownButton OSInline">
   <div id="" class="Menu_TopMenu Menu_TopMenuActive">
      <div id="RichWidgets_wt10_block_wtMenu_wt4_RichWidgets_wt17_block_wtMenuItem"><a id="" tabindex="5" href="#">Home Page</a> <span class="Menu_DropDownArrow"></span></div>
   </div>
   <div id="" class="Menu_DropDownPanel">
      <div id="" class="Menu_SubItemsPlaceholder">
         <a id="" tabindex="6" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub 1</a>
         <div class="level1" style="margin-top: 0px">
            <a id="" tabindex="7" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"><span id="">Sub 2</span></a>
            <div id="" class="level2" style="margin-top: 0px"><a id="" tabindex="7" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"></a><a id="" tabindex="8" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub</a><a id="" tabindex="9" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub 1</a><a id="" tabindex="10" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub 2</a></div>
         </div>
         <div class="level1" style="margin-top: 0px">
            <a id="" tabindex="11" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub 3</a>
            <div id="" class="level2" style="margin-top: 0px"><a id="" tabindex="11" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"></a><a id="" tabindex="12" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub </a><a id="" tabindex="13" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub 1</a><a id="" tabindex="14" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub 2</a></div>
         </div>
      </div>
   </div>
</div>

为什么不使用 ul 和 li？我无法编辑平台生成的代码。

Answer 1

您需要绝对定位每个子菜单(您拥有)，但它需要与父 div 相关。

例如。

.level1 {
  position:relative;
  }


.level2 {
    position: absolute;
    top:0; /* line up with top of parent */
    left: 100%; /* always be to the right side of the parent regardless of width */
    border-left: 1px solid;
}

/* Menu Styles */

.Header_Menu,
.Application_Menu {
  background: #555555;
  /* set the Application_Menu background color, applied when on slide mode */
  white-space: nowrap;
}
.Menu_TopMenuActive {
  border-bottom: none;
  background: #393939;
}
.Menu_TopMenu {
  margin: 0px;
}
.Menu_TopMenus:empty {} .Menu_TopMenu [class^=fa] {
  margin-right: 8px;
}
.Menu_TopMenu a:link,
.Menu_TopMenu a:visited,
.Menu_TopMenu a {
  color: #C4C4C4;
  text-decoration: none;
  text-shadow: none;
  padding: 12px 20px;
  display: inline-block;
}
.Menu_TopMenu:hover,
.Menu_TopMenu:hover a [class^=fa],
.Menu_TopMenuActive a:link [class^=fa],
.Menu_TopMenuActive a:visited [class^=fa],
a.Menu_SubMenuItemActive:link [class^=fa],
a.Menu_SubMenuItemActive:visited [class^=fa],
a.Menu_SubMenuItem:hover [class^=fa] {
  color: #E83E26;
  text-decoration: none;
}
.Menu_TopMenuActive .Menu_DropDownArrow {
  border-top-color: #555555;
}
.Menu_DropDownArrow {
  border-top-color: #C4C4C4;
  right: 13px;
}
.Menu_DropDownPanel {
  margin-top: 0px;
  border: 1px solid #888;
}
a.Menu_SubMenuItem,
a.Menu_SubMenuItem:hover,
a.Menu_SubMenuItem:link,
a.Menu_SubMenuItem:visited {
  background-color: #747474;
  margin: 0;
  padding: 7px 20px 7px 20px;
  border-bottom: 1px solid #555555;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: auto;
}
a.Menu_SubMenuItem,
a.Menu_SubMenuItem:hover,
a.Menu_SubMenuItem:link,
a.Menu_SubMenuItem:visited {
  color: #C4C4C4;
}
.Menu_TopMenuActive a:link,
.Menu_TopMenuActive a:visited,
a.Menu_SubMenuItemActive:link,
a.Menu_SubMenuItemActive:visited,
a.Menu_SubMenuItem:hover {
  color: white;
}
.MenuSlider_Toggler {
  color: white;
}
.Menu_DropDownButton {
  display: inline-block;
  *display: inline;
  *zoom: 1;
  *z-index: 200;
  /* required for IE7 */
}
.Menu_DropDownButton.open {
  z-index: 210;
  *vertical-align: top;
}
.Menu_DropDownButton.open .Menu_TopMenu {
  background-image: none;
  position: relative;
  z-index: 210;
  cursor: pointer;
  *display: block;
}
.Menu_DropDownArrow {
  position: relative;
  top: -2px;
  border-style: solid dashed dashed;
  border-color: transparent;
  border-top-color: #666;
  display: -moz-inline-box;
  display: inline-block;
  font-size: 0;
  height: 0;
  line-height: 0;
  width: 0;
  border-width: 3px 3px 0;
  padding-top: 1px;
}
.Menu_DropDownPanel {
  position: absolute;
  z-index: 200;
  display: none;
  list-style: none;
  background-color: white;
  border: 1px solid #ccc;
  margin: -1px 0 0 -1px;
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.3);
  -webkit-background-clip: padding-box;
  -moz-background-clip: padding;
  background-clip: padding-box;
}
.Menu_SubItemsPlaceholder {} .Menu_DropDownPanel a,
.Menu_DropDownPanel a:link,
.Menu_DropDownPanel a:visited {
  display: block;
  padding: 3px 10px;
  clear: both;
  font-size: 13px;
  text-decoration: none;
  line-height: 2em;
  color: #333333;
  white-space: nowrap;
  margin: 0;
  background: none;
  text-shadow: none;
  border-width: 0;
  border-radius: 0;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  min-width: 0;
  text-align: left;
  *width: 140px;
  min-width: 140px;
  height: 26px;
}
.Menu_DropDownPanel a:hover,
.Menu_DropDownPanel a:focus {
  text-decoration: none;
}
.level1 {
  position: relative;
}
/* ExcludeAllFromPickersOutsideBlock */

.level2 {
  display: none;
}
.level1:hover > .level2 {
  display: block;
}
.level2:after {
  content: "";
  clear: both;
  display: block;
}
.level2 {
  position: absolute;
  top: 0;
  left: 100%;
  border-left: 1px solid;
}
.level1 > a {
  float: left;
}
.level2 .level3 div {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
.level2 > a:first-child {
  display: none !important;
}
.Menu_DropDownButton:hover .Menu_DropDownPanel {
  display: block;
}

<div id="" class="Menu_DropDownButton OSInline">
  <div id="" class="Menu_TopMenu Menu_TopMenuActive">
    <div id="RichWidgets_wt10_block_wtMenu_wt4_RichWidgets_wt17_block_wtMenuItem"><a id="" tabindex="5" href="#">Home Page</a>  <span class="Menu_DropDownArrow"></span>
    </div>
  </div>
  <div id="" class="Menu_DropDownPanel">
    <div id="" class="Menu_SubItemsPlaceholder">
      <a id="" tabindex="6" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub 1</a>
      <div class="level1" style="margin-top: 0px">
        <a id="" tabindex="7" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"><span id="">Sub 2</span></a>
        <div id="" class="level2" style="margin-top: 0px">
          <a id="" tabindex="7" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"></a><a id="" tabindex="8" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub</a><a id="" tabindex="9" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub 1</a><a id="" tabindex="10"
          class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub Sub 2</a>
        </div>
      </div>
      <div class="level1" style="margin-top: 0px">
        <a id="" tabindex="11" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub 3</a>
        <div id="" class="level2" style="margin-top: 0px">
          <a id="" tabindex="11" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#"></a><a id="" tabindex="12" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub </a><a id="" tabindex="13" class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub 1</a><a id="" tabindex="14"
          class="Menu_SubMenuItem Menu_SubMenuItem Menu_SubMenuItemActive" href="#">Sub sub 2</a>
        </div>
      </div>
    </div>
  </div>
</div>