子菜单不会显示为块

时间：2015-03-20 03:42:02

标签： html css drop-down-menu

我正在尝试创建一个下拉菜单，但似乎子菜单是从主菜单继承特征。子菜单是水平显示而不是向下显示，背景颜色也是继承的。如果你能提供帮助那就太棒了。我对css还是比较新的，所以请忍受我的简单错误。

继承人：https://jsfiddle.net/9xt45qrt/

HTML    

 <head>
     <meta charset="utf-8">
     <title>E&L </title>
     <link rel="stylesheet" href="Envy.css">
 </head>
 <body>
     <header id="M_head">
            <nav id="M_nav">
               <ul>
                 <div id="tit">E&L </div>
                 <li>M<span>e</span>n
                     <ul class="SSM">
                         <li>Sub</li>
                         <li>Sub</li>
                         <li>Sub</li>
                     </ul>
                 </li>
                 <li>Wo<span>me</span>n</li>
                 <li>K<span>id</span>z</li>
                 <li>Acce<span>ssor</span>ies</li>
               </ul>
            </nav>            
     </header>

     <section id="M_section">

     </section>
 </body>

CSS：

*{
list-style-type:none;
}
span{
color:#33ff00;
}
#tit{
float:left;
position:relative;
left:-42px;
background:-webkit-linear-gradient(black,green,white,green,black);
font-size:3em;
font-style:italic;
font-weight:bold;
border-left:2px solid black;
}

#M_head ul {
text-align:left;
border:2px solid black;
width:90%;
margin:1em auto;
word-spacing:5em;
background:-webkit-linear-gradient(black,black,grey,black,black);
}

#M_head ul >li{
color:white;
display:inline-block;
margin:0em -1em;
font-size:2em;
padding: 10px 60px;
cursor:pointer;
-webkit-transform: all 0.2s;
-moz-transform: all 0.2s;
-o-transform:all 0.2s;
transform: all 0.2s;
}

#M_head ul >li:hover{
color:#33ff00;
background-color:black;
}
#M_head  li:hover ul{
visibility:visible;
}
ul.SSM {
display:block !important;
position:absolute;
font-size:0.5em;
width:50%;
visibility:hidden;
background-color:#33ff00;
}
ul.SSM li{
display:none;
}

2 个答案:

答案 0 :(得分：0)

( function( $ ) {
$( document ).ready(function() {
$('#cssmenu li.has-sub>a').on('click', function(){
		$(this).removeAttr('href');
		var element = $(this).parent('li');
		if (element.hasClass('open')) {
			element.removeClass('open');
			element.find('li').removeClass('open');
			element.find('ul').slideUp();
		}
		else {
			element.addClass('open');
			element.children('ul').slideDown();
			element.siblings('li').children('ul').slideUp();
			element.siblings('li').removeClass('open');
			element.siblings('li').find('li').removeClass('open');
			element.siblings('li').find('ul').slideUp();
		}
	});

	$('#cssmenu>ul>li.has-sub>a').append('<span class="holder"></span>');

	(function getColor() {
		var r, g, b;
		var textColor = $('#cssmenu').css('color');
		textColor = textColor.slice(4);
		r = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		g = textColor.slice(0, textColor.indexOf(','));
		textColor = textColor.slice(textColor.indexOf(' ') + 1);
		b = textColor.slice(0, textColor.indexOf(')'));
		var l = rgbToHsl(r, g, b);
		if (l > 0.7) {
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 1px rgba(0, 0, 0, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(0, 0, 0, .35)');
		}
		else
		{
			$('#cssmenu>ul>li>a').css('text-shadow', '0 1px 0 rgba(255, 255, 255, .35)');
			$('#cssmenu>ul>li>a>span').css('border-color', 'rgba(255, 255, 255, .35)');
		}
	})();

	function rgbToHsl(r, g, b) {
	    r /= 255, g /= 255, b /= 255;
	    var max = Math.max(r, g, b), min = Math.min(r, g, b);
	    var h, s, l = (max + min) / 2;

	    if(max == min){
	        h = s = 0;
	    }
	    else {
	        var d = max - min;
	        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
	        switch(max){
	            case r: h = (g - b) / d + (g < b ? 6 : 0); break;
	            case g: h = (b - r) / d + 2; break;
	            case b: h = (r - g) / d + 4; break;
	        }
	        h /= 6;
	    }
	    return l;
	}
});
} )( jQuery );
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a {
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  line-height: 1;
  display: block;
  position: relative;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
#cssmenu {
  width: 200px;
  font-family: Helvetica, Arial, sans-serif;
  color: #ffffff;
}
#cssmenu ul ul {
  display: none;
}
.align-right {
  float: right;
}
#cssmenu > ul > li > a {
  padding: 15px 20px;
  border-left: 1px solid #1682ba;
  border-right: 1px solid #1682ba;
  border-top: 1px solid #1682ba;
  cursor: pointer;
  z-index: 2;
  font-size: 14px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.35);
  background: #36aae7;
  background: -webkit-linear-gradient(#36aae7, #1fa0e4);
  background: -moz-linear-gradient(#36aae7, #1fa0e4);
  background: -o-linear-gradient(#36aae7, #1fa0e4);
  background: -ms-linear-gradient(#36aae7, #1fa0e4);
  background: linear-gradient(#36aae7, #1fa0e4);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15);
}
#cssmenu > ul > li > a:hover,
#cssmenu > ul > li.active > a,
#cssmenu > ul > li.open > a {
  color: #eeeeee;
  background: #1fa0e4;
  background: -webkit-linear-gradient(#1fa0e4, #1992d1);
  background: -moz-linear-gradient(#1fa0e4, #1992d1);
  background: -o-linear-gradient(#1fa0e4, #1992d1);
  background: -ms-linear-gradient(#1fa0e4, #1992d1);
  background: linear-gradient(#1fa0e4, #1992d1);
}
#cssmenu > ul > li.open > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 1px 1px rgba(0, 0, 0, 0.15);
  border-bottom: 1px solid #1682ba;
}
#cssmenu > ul > li:last-child > a,
#cssmenu > ul > li.last > a {
  border-bottom: 1px solid #1682ba;
}
.holder {
  width: 0;
  height: 0;
  position: absolute;
  top: 0;
  right: 0;
}
.holder::after,
.holder::before {
  display: block;
  position: absolute;
  content: "";
  width: 6px;
  height: 6px;
  right: 20px;
  z-index: 10;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
.holder::after {
  top: 17px;
  border-top: 2px solid #ffffff;
  border-left: 2px solid #ffffff;
}
#cssmenu > ul > li > a:hover > span::after,
#cssmenu > ul > li.active > a > span::after,
#cssmenu > ul > li.open > a > span::after {
  border-color: #eeeeee;
}
.holder::before {
  top: 18px;
  border-top: 2px solid;
  border-left: 2px solid;
  border-top-color: inherit;
  border-left-color: inherit;
}
#cssmenu ul ul li a {
  cursor: pointer;
  border-bottom: 1px solid #32373e;
  border-left: 1px solid #32373e;
  border-right: 1px solid #32373e;
  padding: 10px 20px;
  z-index: 1;
  text-decoration: none;
  font-size: 13px;
  color: #eeeeee;
  background: #49505a;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.open > a,
#cssmenu ul ul li.active > a {
  background: #424852;
  color: #ffffff;
}
#cssmenu ul ul li:first-child > a {
  box-shadow: none;
}
#cssmenu ul ul ul li:first-child > a {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
}
#cssmenu ul ul ul li a {
  padding-left: 30px;
}
#cssmenu > ul > li > ul > li:last-child > a,
#cssmenu > ul > li > ul > li.last > a {
  border-bottom: 0;
}
#cssmenu > ul > li > ul > li.open:last-child > a,
#cssmenu > ul > li > ul > li.last.open > a {
  border-bottom: 1px solid #32373e;
}
#cssmenu > ul > li > ul > li.open:last-child > ul > li:last-child > a {
  border-bottom: 0;
}
#cssmenu ul ul li.has-sub > a::after {
  display: block;
  position: absolute;
  content: "";
  width: 5px;
  height: 5px;
  right: 20px;
  z-index: 10;
  top: 11.5px;
  border-top: 2px solid #eeeeee;
  border-left: 2px solid #eeeeee;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -ms-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
}
#cssmenu ul ul li.active > a::after,
#cssmenu ul ul li.open > a::after,
#cssmenu ul ul li > a:hover::after {
  border-color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id='cssmenu'>
	<ul>
		<li><a href=''><span>E and L</span></a></li>

		<li class='active has-sub'><a href='#'><span>Men</span></a>
			<ul>
				<li><a href=''><span>Sub</span></a>
					<ul>
						<li><a href='#'><span>Sub Product</span></a></li>
						<li class='last'><a href='#'><span>Sub Product</span></a></li>
					</ul>
				</li>

				<li><a href=''><span>Kid</span></a>
					<ul>
						<li><a href='#'><span>Sub Product</span></a></li>
						<li class='last'><a href='#'><span>Sub Product</span></a></li>
					</ul>
				</li>

				<li><a href=''><span>Women</span></a>
					<ul>
						<li><a href='#'><span>Sub Product</span></a></li>
						<li class='last'><a href='#'><span>Sub Product</span></a></li>
					</ul>
				</li>

			</ul>
		</li>

		<li class='active has-sub'><a href='#'><span>Accessories</span></a>
			<ul>
				<li><a href=''><span>One</span></a></li>
			</ul>
		</li>

		<li class='active has-sub'><a href='#'><span>Two</span></a>
			<ul>
				<li><a href=''><span>Three</span></a></li>

				<li><a href=''><span>Four</span></a></li>
				
				<li><a href=''><span>Five</span></a></li>
				
				<li><a href=''><span>Six</span></a></li>
			</ul>
		</li>

		<li><a href=''><span>Games</span></a></li>

		<li class='last'><a href=''><span>Mobiles</span></a></li>

	</ul>
</div>

试试这个我觉得这就是你想要的！

答案 1 :(得分：0)

您使用错误的订单编写了CSS，并且CSS #M_head ul和#M_head ul >li将应用于子导航以及主导航。我重新排序了CSS并为选择器添加了一些特性。而不是#M_head ul我已经为主要导航添加了#M_head > nav > ul，并且在悬停时为子导航添加了#M_head > nav > ul > li:hover ul.SSM。

更新了jsFiddle link

以及这里的代码。

＆＃13;
＆＃13; 
* {
    list-style-type: none;
}
span {
    color: #33ff00;
}
#tit {
    float: left;
    position: relative;
    left: -42px;
    background: -webkit-linear-gradient(black, green, white, green, black);
    font-size: 3em;
    font-style: italic;
    font-weight: bold;
    border-left: 2px solid black;
}
#M_head ul {
    text-align: left;
    border: 2px solid black;
    width: 100%;
    margin: 1em auto;
    word-spacing: 3em;
    background: -webkit-linear-gradient(black, black, grey, black, black);
}
#M_head > nav > ul >li {
    display: inline-block;
    margin: 0em -1em;
}
#M_head ul >li {
    color: white;
    font-size: 2em;
    padding: 10px 20px;
    cursor: pointer;
    -webkit-transform: all 0.2s;
    -moz-transform: all 0.2s;
    -o-transform: all 0.2s;
    transform: all 0.2s;
}
#M_head ul >li:hover {
    color: #33ff00;
    background-color: black;
}
#M_head > nav > ul > li ul.SSM {
    display: none;
    position: absolute;
    font-size: 0.5em;
    width: 50%;
    background-color: #33ff00;
    margin: 0;
}
#M_head > nav > ul > li:hover ul.SSM {
    display: block;
}
＆＃13; 
<body>
  <header id="M_head">
    <nav id="M_nav">
      <ul>
        <div id="tit">E&L </div>
        <li>M<span>e</span>n
          <ul class="SSM">
            <li>Sub</li>
            <li>Sub</li>
            <li>Sub</li>
          </ul>
        </li>
        <li>Wo<span>me</span>n</li>
        <li>K<span>id</span>z</li>
        <li>Acce<span>ssor</span>ies</li>
      </ul>
    </nav>
  </header>
  <section id="M_section"> </section>
</body>
＆＃13;
＆＃13;
＆＃13;

希望这有帮助。

相关问题
最新问题