Q:

Sub-menu wont display as block

i am trying to create a drop down menu but it seems that the sub-menu is inheriting traits from the main menu.  The sub- menu is displaying horizontally rather than downwards and the background color is also being inherited.   If you could help that would be fantastic. I'm still fairly new to css so please bear with my simple mistakes. 
Heres the fiddle: 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;
}

A:

You had CSS written in wrong orders and the CSS #M_head ul and #M_head ul >li would apply to the sub navigation as well as the main navigation.  I have reordered the CSS and added some specificity to the selectors.  instead of #M_head ul i have added #M_head > nav > ul for the main nav and #M_head > nav > ul > li:hover ul. SSM for the sub nav when hovered. 
Updated jsFiddle link
and here's the code. 

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

Hope this helps.