Html 子菜单不会显示为块_Html_Css_Drop Down Menu

Html 子菜单不会显示为块

html css drop-down-menu

Html 子菜单不会显示为块,html,css,drop-down-menu,Html,Css,Drop Down Menu,我试图创建一个下拉菜单，但子菜单似乎继承了主菜单的特性。子菜单水平显示，而不是向下显示，并且背景颜色也被继承。如果你能帮忙的话，那就太棒了。我对css还是相当陌生的，所以请容忍我的简单错误小提琴在这里： html （函数（$）{ $（文档）.ready（函数（）{ $（'cssmenu li.has sub>a'）。在（'click'，function（）上{ $（this.removeAttr（'href'）； var元素=$（this.parent（'li'）； if（element.

我试图创建一个下拉菜单，但子菜单似乎继承了主菜单的特性。子菜单水平显示，而不是向下显示，并且背景颜色也被继承。如果你能帮忙的话，那就太棒了。我对css还是相当陌生的，所以请容忍我的简单错误

小提琴在这里：

html

（函数（$）{
$（文档）.ready（函数（）{
$（'cssmenu li.has sub>a'）。在（'click'，function（）上{
$（this.removeAttr（'href'）；
var元素=$（this.parent（'li'）；
if（element.hasClass（'open'））{
元素。removeClass（“打开”）；
元素。find（'li'）。removeClass（'open'）；
元素。find（'ul'）。slideUp（）；
}
否则{
元素addClass（'open'）；
element.children（'ul'）.slideDown（）；
元素。兄弟姐妹（'li'）。子元素（'ul'）。slideUp（）；
元素。同级（'li'）。removeClass（'open'）；
元素。同级（'li'）。查找（'li'）。removeClass（'open'）；
元素。同级（'li'）。查找（'ul'）。slideUp（）；
}
});
$（'#cssmenu>ul>li.has sub>a'）。追加（'''）；
（函数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）；
如果（l>0.7）{
$（'cssmenu>ul>li>a'）.css（'text-shadow'，'01px1pxrgba（0,0,0,35）'）；
$（'cssmenu>ul>li>a>span'）.css（'border-color'，'rgba（0,0,0,35）'）；
}
其他的
{
$（'cssmenu>ul>li>a'）.css（'text-shadow'，'01px0rgba（255,255,255,35）'）；
$（'cssmenu>ul>li>a>span'）.css（'border-color'，'rgba（255,255,255,35）'）；
}
})();
函数rgbToHsl（r、g、b）{
r/=255，g/=255，b/=255；
var max=Math.max（r，g，b），min=Math.min（r，g，b）；
变量h，s，l=（最大+最小）/2；
如果（最大=最小）{
h=s=0；
}
否则{
var d=最大-最小值；
s=l>0.5？d/（2-最大-最小）：d/（最大+最小）；
开关（最大值）{
案例r:h=（g-b）/d+（g
#cssmenu，
#cssmenu ul，
#cssmenu ul li，
#cssmenu ul li a{
保证金：0；
填充：0；
边界：0；
列表样式：无；
线高：1；
显示：块；
位置：相对位置；
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
#cssmenu{
宽度：200px；
字体系列：Helvetica、Arial、无衬线字体；
颜色：#ffffff；
}
#cssmenu ul{
显示：无；
}
.右对齐{
浮动：对；
}
#cssmenu>ul>li>a{
填充：15px 20px；
左边框：1px实心#1682ba；
右边框：1px实心#1682ba；
边框顶部：1px实心#1682ba；
光标：指针；
z指数：2；
字体大小：14px；
字体大小：粗体；
文字装饰：无；
颜色：#ffffff；
文本阴影：0 1px 1px rgba（0,0,0,0.35）；
背景#36aae7；
背景：-webkit线性梯度（#36aae7，#1fa0e4）；
背景：-moz线性梯度（#36aae7，#1fa0e4）；
背景：-o-线性梯度（#36aae7，#1fa0e4）；
背景：-ms线性梯度（#36aae7，#1fa0e4）；
背景：线性梯度（#36aae7，#1fa0e4）；
框阴影：插入0 1px 0 rgba（255、255、255、0.15）；
}
#cssmenu>ul>li>a:悬停，
#cssmenu>ul>li.active>a，
#cssmenu>ul>li.open>a{
颜色：#eeeeee；
背景：#1fa0e4；
背景：-webkit线性梯度（#1fa0e4，#1992d1）；
背景：-莫兹线性梯度（#1fa0e4，#1992d1）；
背景：-o-线性梯度（#1fa0e4，#1992d1）；
背景：-ms线性梯度（#1fa0e4，#1992d1）；
背景：线性梯度（#1fa0e4，#1992d1）；
}
#cssmenu>ul>li.open>a{
框阴影：插入0 1px 0 rgba（255，255，255，0.15），0 1px 1px rgba（0，0，0.15）；
边框底部：1px实心#1682ba；
}
#cssmenu>ul>li:最后一个孩子>a，
#cssmenu>ul>li.last>a{
边框底部：1px实心#1682ba；
}
.持有人{
宽度：0；
身高：0；
位置：绝对位置；
排名：0；
右：0；
}
.霍尔德：：之后，
.霍尔德：以前{
显示：块；
位置：绝对位置；
内容：“；
宽度：6px；
高度：6px；
右：20px；
z指数：10；
-webkit变换：旋转（-135度）；
-moz变换：旋转（-135度）；
-ms变换：旋转（-135度）；
-o变换：旋转（-135度）；
变换：旋转（-135度）；
}
.霍尔德：：之后{
顶部：17px；
边框顶部：2个实心#ffffff；
左边框：2px实心#ffffff；
}
#cssmenu>ul>li>a:悬停>span:：之后，
#cssmenu>ul>li.active>a>span:：之后，
#cssmenu>ul>li.open>a>span:：after{
边框颜色：#eeeeee；
}
.霍尔德：以前{
顶部：18px；
边框顶部：2倍实心；
左边框：2倍实心；
边框顶部颜色：继承；
边框左颜色：继承；
}
#cssmenu ul li a{
光标：指针；
边框底部：1px实心#32373e；
左边框：1px实心#32373e；
右边框：1px实心#32373e；
填充：10px 20px；
z指数：1；
文字装饰：无；
字体大小：13px；
颜色：#eeeeee；
背景#49505a；
框阴影：插入0 1px 0 rgba（255、255、255、0.1）；
}
#cssmenu ul li:悬停>a，
#cssmenu ul li.open>a，
#cssmenu ul li.active>a{
背景#424852；
颜色：#ffffff；
}
#cssmenu ul li：第一个孩子>a{
盒影：无；
}
#cssmenu ul li：第一个孩子>a{
框阴影：插入0 1px 0 rgba（255、255、255、0.1）；
}
#cssmenu ul li a{
左侧填充：30px；
}
#cssmenu>ul>li>ul>li:最后一个孩子>a，
#cssmenu>ul>li>ul>li.last>a{
边界底部：0；
}
#cssmenu>ul>li>ul>li.打开：最后一个子项>a，
#cssmenu>ul>li>ul>li.last.open>a{
边框底部：1px实心#32373e；
}
#cssmenu>ul>li>ul>li。打开：最后一个子项>ul>li:最后一个子项>a{
边界底部：0；
}
#cssmenu ul li.has-sub>a:：after{
D
 <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>

*{
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;
}