title: CSS text-decoration:none; doesn't work
body: <p>So i was reading a tutorial online about flexbox and tried to make a dropdown menu. But the only thing which doesn't work is that the text-decoration:none has no effect at all? i have to use color#fff to make the text white?</p>
  
  <p>also why do i need to use the + sign and i cant use the > sign when displaying the dropdown menu?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>header {
    display: flex;
    width: 100%;
    z-index;
    1000;
    background: linear-gradient(to left, rgba(54, 194, 182, 0.96) 0, rgba(62, 188, 207, 0.96) 100%);
    border-bottom: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, .1);
  }
  header nav ul {
    list-style: none;
    margin 0;
    padding 0;
    display: flex;
    justify-content: start;
  }
  header nav ul li {
    position: relative;
    flex: 0 1 auto;
  }
  header nav ul li:hover {
    background: rgba(58, 162, 173, 1);
  }
  header nav ul li a {
    align-items: flex-start;
    display: flex;
    font-size: 1.55rem;
    font-weight: 200px;
    letter-spacing: 1px;
    max-width: 130px;
    padding: 1rem 1.5rem;
    text-decoration: none;
  }
  header nav ul li a + ul {
    border-radius: 0 0 2px 2px;
    display: none;
    font-size: 1rem;
    position: absolute;
    width: 195px;
    background: linear-gradient(to bottom, rgba(58, 162, 173, 1) 0, rgba(62, 188, 207, 0.96) 100%);
    ;
  }
  header nav ul li:hover a + ul {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;header&gt;
    &lt;nav role="navigation"&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="/"&gt;
                Home
              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/blog"&gt;
                Blog
              &lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;&lt;a href="#"&gt;Me&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Gaming&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Sport&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Web Design&lt;/a&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="#"&gt;Web Development&lt;/a&gt;
            &lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/contact"&gt;      
                  Contact      
              &lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a href="/forum"&gt;
                  Forum
              &lt;/a&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/nav&gt;
  &lt;/header&gt;</code></pre>
  </div>
  </div>
  </p>