title: Sub-menu wont display as block
body: <p>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.</p>
  
  <p>Heres the fiddle: <a href="https://jsfiddle.net/9xt45qrt/" rel="nofollow">https://jsfiddle.net/9xt45qrt/</a> </p>
  
  <p>html
     </p>
  
  <pre><code> &lt;head&gt;
       &lt;meta charset="utf-8"&gt;
       &lt;title&gt;E&amp;L &lt;/title&gt;
       &lt;link rel="stylesheet" href="Envy.css"&gt;
   &lt;/head&gt;
   &lt;body&gt;
       &lt;header id="M_head"&gt;
              &lt;nav id="M_nav"&gt;
                 &lt;ul&gt;
                   &lt;div id="tit"&gt;E&amp;L &lt;/div&gt;
                   &lt;li&gt;M&lt;span&gt;e&lt;/span&gt;n
                       &lt;ul class="SSM"&gt;
                           &lt;li&gt;Sub&lt;/li&gt;
                           &lt;li&gt;Sub&lt;/li&gt;
                           &lt;li&gt;Sub&lt;/li&gt;
                       &lt;/ul&gt;
                   &lt;/li&gt;
                   &lt;li&gt;Wo&lt;span&gt;me&lt;/span&gt;n&lt;/li&gt;
                   &lt;li&gt;K&lt;span&gt;id&lt;/span&gt;z&lt;/li&gt;
                   &lt;li&gt;Acce&lt;span&gt;ssor&lt;/span&gt;ies&lt;/li&gt;
                 &lt;/ul&gt;
              &lt;/nav&gt;            
       &lt;/header&gt;
  
       &lt;section id="M_section"&gt;
  
       &lt;/section&gt;
   &lt;/body&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><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:90%;
  margin:1em auto;
  word-spacing:5em;
  background:-webkit-linear-gradient(black,black,grey,black,black);
  }
  
  #M_head ul &gt;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 &gt;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;
  }
  </code></pre>