简单的Css Mega菜单 - 仅适用于[ul]

Question

我在过去的4个小时里一直没有运气，所以如果有人能够弄明白这个问题或给我提供线索，我将不胜感激。

我有一个基于Superfish（只有css）的简单下拉菜单，不使用JavaScript，我想为它添加Mega Menu样式，但是如果两个元素组合起来有两个元素不起作用，我必须注意那两个元素为了单独处理两个菜单。

以下是我的主要CSS（不包括设计部分）......

 .sf-menu {
     position: relative;
     margin: 0;
     padding: 0;
     list-style: none;
  }

  .sf-menu ul {
    min-width: 13em !important;
    text-align:left !important; 
  }
  .sf-menu, .sf-menu * {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    list-style: none;
  }
  .sf-menu li:first-child {
    margin-left:0;
  }
  .sf-menu li li{
    min-width:150px
  }
  .sf-menu {
    float: left;
    width: 100%;
  }

  /* Trouble Maker Start - REMARKED
  .sf-menu li{
    position: relative; 
  }
  .sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 8888;
  }
  /* Trouble Maker End */

  .sf-menu > li {
    float: left;
  }
  .sf-menu li:hover > ul,
  .sf-menu li.sfHover > ul {
    display: block;
  }
  .sf-menu a {
    display: block; 
    position: relative;
  }
  .sf-menu ul ul {
    top: 0;
    left: 100%;
  }
  .sf-menu .sf-mega {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
    z-index: 99;
  }
  .sf-menu li:hover > .sf-mega,
  .sf-menu li.sfHover > .sf-mega {
    display: block;
  }

好吧，那些代码，我添加了/ * Trouble Maker Code * /是Mega菜单出现问题的部分，如果我删除它，Mega Menu工作正常，但简单的菜单不起作用，反之亦然。 / p>

使用相同的CSS样式，下面是一个简单菜单（不是Mega菜单）的示例，并且没有注释麻烦制造者代码，因此简单菜单工作正常。请看一下。请进入设计部分和css。

.sf-menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu ul {
	min-width: 13em !important;
	text-align:left !important;	
}
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}
.sf-menu li:first-child {
	margin-left:0;
}
.sf-menu li li{
	min-width:150px
}

/* Trouble Maker Code Start */
.sf-menu li{
	position: relative;	
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
  z-index: 8888;
}
/* Trouble Maker End */

.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}
.sf-menu a {
	display: block;	
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}




/*** MEGA Menu dropdown ***/
.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega {
  display: block;
}

.sf-menu .sf-mega {
  box-shadow: 2px 3px 6px rgba(0,0,0,.2);
  width: 100%; /* allow long menu items to determine submenu width */
}

.sf-mega {
  background-color: red;
  padding: 1em;
  width: 100% !important;
}
.sf-mega-section {
  float: left;
  padding: 0 1em 1em 0;
  margin-right: 1em;
  border-right: 1px solid #b4c8f5;
}
.sf-mega ul {
	width:100%;
	margin: 0;
	padding-left: 1.2em;
}
.sf-mega li {
	margin-left: 0;
}



/*** DESIGN PART - NO NEED TO CHECK THIS ****/
.sf-menu a {
    color: #494949;
    font-size: 13px !important;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding: 5px 13px 5px 13px;
}
.sf-menu>li {
    background: #ffffff;
    white-space: nowrap;
    border-bottom: 2px solid #FFFFFF;
    margin-left: 2px;
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -khtml-border-radius: 2px 2px 2px 2px;
}

.sf-menu li:hover > a,
.sf-menu li.sfhover > a {
	background:#444;
    color: #FFFFFF;
    padding: 5px 13px 5px 13px;
}
.sf-menu>.sub-menu>li>li:first-child {
    border-top: 1px SOLID #e4e4e4 !important;
}
.sub-menu li a {
    min-width: 190px;
}
.sub-menu li:first-child {
    margin-top: 30px;
    border-top: 2px solid rgba(217, 102, 62, 0.95)!important;
}
.sub-menu>li li:first-child {
    margin-top: -2px !important;
}
.sf-menu .sub-menu li a,
.sf-menu .sub-menu li a:hover,
.sf-menu .sub-menu li a:hover {
    color: #444444 !important;
    padding: 5px 13px 5px 13px;
}

.sf-menu .sub-menu li {
    background: rgba(244, 244, 244, 0.95);
    border: 0;
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}
.sf-menu .sub-menu ul li:hover,
.sf-menu .sub-menu ul li.sfHover {
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu .sub-menu li a:hover {
    padding: 5px 13px 5px 13px;
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu .sub-menu li:hover a {
    padding: 5px 13px 5px 13px;
}
.sf-menu ul {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-top: 2px !important;
}
.sf-menu>.sub-menu>li:last-child {
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -khtml-border-radius: 0 0 3px 3px;
    border-bottom: 2px solid #cccccc;
}
.sf-menu li a span {
    font-size: 10px;
    color: #898989;
    font-weight: bold;
}
.sf-menu li:hover>a span {
    color: #efefef;
}

<ul class="sf-menu">
	<li class="hasdropdown">
		<a href="#">Menu Item 1</a>
		
		<ul class="sub-menu" style="min-width: inherit;">
			<li class="hasdropdown"><a href="#">Section 1</a>
				<ul class="sub-menu" style="min-width: inherit;">
					<li><a href="#">Sub Item 1</a></li>
					<li><a href="#">Sub Item 2</a></li>
					<li><a href="#">Sub Item 3</a></li>
					<li><a href="#">Sub Item 4</a></li>
				</ul>
			</li>
			<li class="hasdropdown"><a href="#">Section 2</a>
				<ul class="sub-menu" style="min-width: inherit;">
					<li><a href="#">Sub Item 1</a></li>
					<li><a href="#">Sub Item 2</a></li>
					<li><a href="#">Sub Item 3</a></li>
					<li><a href="#">Sub Item 4</a></li>
				</ul>
			</li>
			<li class="hasdropdown" id="menu-item-943"><a href="#">Section 3</a>
				<ul class="sub-menu" style="min-width: inherit;">
					<li><a href="#">Sub Item 1</a></li>
					<li><a href="#">Sub Item 2</a></li>
					<li><a href="#">Sub Item 3</a></li>
					<li><a href="#">Sub Item 4</a></li>
				</ul>
			</li>
		</ul>
	</li>
	<li><a href="#">Menu Item 2</a></li>
	<li><a href="#">Menu Item 3</a></li>
	<li><a href="#">Menu Item 4</a></li>
</ul>

现在，如果添加Mega Menu类，使用相同的样式，代码如下所示：

.sf-menu {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sf-menu ul {
	min-width: 13em !important;
	text-align:left !important;	
}
.sf-menu, .sf-menu * {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	list-style: none;
}
.sf-menu li:first-child {
	margin-left:0;
}
.sf-menu li li{
	min-width:150px
}
.sf-menu {
  float: left;
  width: 100%;
}


/* Trouble Maker Start */
.sf-menu li{
	position: relative;	
}
.sf-menu ul {
	position: absolute;
	display: none;
	top: 100%;
	left: 0;
  z-index: 8888;
}
/* Trouble Maker End */

.sf-menu > li {
	float: left;
}
.sf-menu li:hover > ul,
.sf-menu li.sfHover > ul {
	display: block;
}
.sf-menu a {
	display: block;	
	position: relative;
}
.sf-menu ul ul {
	top: 0;
	left: 100%;
}

.sf-menu .sf-mega {
  position: absolute;
  display: none;
  top: 100%;
  left: 0;
  z-index: 99;
}

.sf-menu li:hover > .sf-mega,
.sf-menu li.sfHover > .sf-mega {
  display: block;
}




/*** DEMO SKIN ***/

.sf-menu .sf-mega {
  box-shadow: 2px 3px 6px rgba(0,0,0,.2);
  width: 100%; /* allow long menu items to determine submenu width */
}


/*** mega menu dropdown ***/
.sf-mega {
  background-color: #CFDEFF;
  padding: 1em;
  box-sizing: border-box;
  width: 100%;
}
.sf-mega-section {
  float: left;
  width: 8em; /* optional */
  padding: 0 1em 1em 0;
  margin-right: 1em;
  border-right: 1px solid #b4c8f5;
}
.sf-mega ul {
	list-style-type: auto;
	margin: 0;
	padding-left: 1.2em;
}
.sf-mega li {
	margin-left: 0;
}



/*** DESIGN PART ****/
.sf-menu a {
    color: #494949;
    font-size: 13px !important;
    font-family: 'Open Sans', Arial, Helvetica, sans-serif;
    font-weight: 400;
    padding: 5px 13px 5px 13px;
}
.sf-menu>li {
    background: #ffffff;
    white-space: nowrap;
    border-bottom: 2px solid #FFFFFF;
    margin-left: 2px;
    border-radius: 2px 2px 2px 2px;
    -webkit-border-radius: 2px 2px 2px 2px;
    -moz-border-radius: 2px 2px 2px 2px;
    -khtml-border-radius: 2px 2px 2px 2px;
}

.sf-menu li:hover > a,
.sf-menu li.sfhover > a {
	background:#444;
    color: #FFFFFF;
    padding: 5px 13px 5px 13px;
}
.sf-menu>.sub-menu>li>li:first-child {
    border-top: 1px SOLID #e4e4e4 !important;
}
.sub-menu li a {
    min-width: 190px;
}
.sub-menu li:first-child {
    margin-top: 30px;
    border-top: 2px solid rgba(217, 102, 62, 0.95)!important;
}
.sub-menu>li li:first-child {
    margin-top: -2px !important;
}
.sf-menu .sub-menu li a,
.sf-menu .sub-menu li a:hover,
.sf-menu .sub-menu li a:hover {
    color: #444444 !important;
    padding: 5px 13px 5px 13px;
}

.sf-menu .sub-menu li {
    background: rgba(244, 244, 244, 0.95);
    border: 0;
    -webkit-box-shadow: 0 0 0 0;
    -moz-box-shadow: 0 0 0 0;
    box-shadow: 0 0 0 0;
}
.sf-menu .sub-menu ul li:hover,
.sf-menu .sub-menu ul li.sfHover {
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu .sub-menu li a:hover {
    padding: 5px 13px 5px 13px;
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu ul li:hover,
.sf-menu ul li.sfHover {
    background: rgba(255, 255, 255, 0.95);
}
.sf-menu .sub-menu li:hover a {
    padding: 5px 13px 5px 13px;
}
.sf-menu ul {
    border-left: 0;
    border-right: 0;
    border-bottom: 0;
    padding-top: 2px !important;
}
.sf-menu>.sub-menu>li:last-child {
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    -khtml-border-radius: 0 0 3px 3px;
    border-bottom: 2px solid #cccccc;
}
.sf-menu li a span {
    font-size: 10px;
    color: #898989;
    font-weight: bold;
}
.sf-menu li:hover>a span {
    color: #efefef;
}

<ul class="sf-menu">
        <li class="current">
          <a href="#" class="">menu item 1</a>
          <div class="sf-mega" style="">
            <h2>Arbitrary stuff here. Here's a random unstyled table for example:</h2>
            <div class="neat tabular"><table cellspacing="0"><thead><tr><th scope="col">Year level</th><th scope="col">Tuition fee per term</th><th scope="col">Composite fee per term</th><th scope="col">Total per term</th><th scope="col">Total annual charges</th></tr></thead><tbody><tr><td>ELC &ndash; 2 days</td><td>$1,700</td><td>$57</td><td>$1,757</td><td>$7,028</td></tr><tr><td>ELC &ndash; 3 days</td><td>$2,390</td><td>$79</td><td>$2,469</td><td>$9,876</td></tr><tr><td>ELC - 4 days</td><td>$3,095</td><td>$104</td><td>$3,199</td><td>$12,796</td></tr><tr><td>ELC/Pre-Prep</td><td>$3,865</td><td>$122</td><td>$3,987</td><td>$15,948</td></tr><tr><td>Prep</td><td>$3,300</td><td>$128</td><td>$3,428</td><td>$13,712</td></tr><tr><td>Year 1</td><td>$3,585</td><td>$128</td><td>$3,713</td><td>$14,852</td></tr><tr><td>Year 2</td><td>$3,950</td><td>$128</td><td>$4,078</td><td>$16,312</td></tr><tr><td>Year 3</td><td>$3,950</td><td>$275</td><td>$4,225</td><td>$16,900</td></tr><tr><td>Year 4</td><td>$4,420</td><td>$275</td><td>$4,695</td><td>$18,780</td></tr><tr><td>Year 5</td><td>$4,495</td><td>$309</td><td>$4,804</td><td>$19,216</td></tr><tr><td>Year 6</td><td>$4,495</td><td>$449</td><td>$4,944</td><td>$19,776</td></tr><tr><td>Year 7</td><td>$5,147</td><td>$393</td><td>$5,540</td><td>$22,160</td></tr><tr><td>Year 8</td><td>$5,147</td><td>$508</td><td>$5,655</td><td>$22,620</td></tr><tr><td>Year 9</td><td>$5,650</td><td>$552</td><td>$6,202</td><td>$24,808</td></tr></tbody></table></div>
          </div>
        </li>
        <li>
          <a href="#">menu item 2</a>
        </li>
        <li class="">
          <a href="#" class="">menu item 3</a>
          <div class="sf-mega" style="">
            <div class="sf-mega-section">
              <h2>list heading:</h2>
              <ul>
                <li class="current"><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
              </ul>
            </div>

            <div class="sf-mega-section">
              <h2>list heading:</h2>
              <ul>
                <li class="current"><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item that is longer</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
              </ul>
            </div>

            <div class="sf-mega-section">
              <h2>list heading:</h2>
              <ul>
                <li class="current"><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
              </ul>
            </div>

            <div class="sf-mega-section">
              <h2>list heading:</h2>
              <ul>
                <li class="current"><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
                <li><a href="#">menu item</a></li>
              </ul>
            </div>
          </div>
        </li>
        <li>
          <a href="#">menu item 4</a>
        </li> 
</ul>

但是，如果我注意下面的代码，Mega菜单工作正常，下面是唯一需要修复的代码，使其适用于Simple和Mega Menus ....

 /* Trouble Maker Start */
 .sf-menu li{
    position: relative; 
 }
 .sf-menu ul {
    position: absolute;
    display: none;
    top: 100%;
    left: 0;
   z-index: 8888;
 }
 /* Trouble Maker End */

这里是jsFiddle，我在Mega Menu Example中注释了这段代码。 https://jsfiddle.net/oxnqrvsd/

谢谢你的时间。 问候