title: Submenu with z-index doesn't want to go over content
body: <p>For some unknown reason z-index doesn't seem to work. I try to make the submenu. i.e. the 2nd bar. To go over the #content which it fails to do....</p>
  
  <p><a href="http://jsfiddle.net/PaD2v/" rel="nofollow">http://jsfiddle.net/PaD2v/</a></p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Мэрия Skrillax-RP&lt;/title&gt;
          &lt;meta http-equiv="content-type" content="text/html; charset=utf-8"&gt;
          &lt;link rel="stylesheet" type="text/css" href="master.css" /&gt;
          &lt;link rel="stylesheet" type="text/css" href="http://meyerweb.com/eric/tools/css/reset/reset.css" /&gt;
          &lt;link href='http://fonts.googleapis.com/css?family=Poiret+One&amp;subset=cyrillic' rel='stylesheet' type='text/css'&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="master.js"&gt;&lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="wrapper"&gt;
              &lt;div id="banner"&gt;&lt;img src="http://i.imgur.com/f2EWgQP.png?1"&gt;&lt;p id="banner text"&gt;&lt;/div&gt;
              &lt;ul id="navigation"&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Главная Страница&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Задачи&lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                          &lt;li&gt;&lt;a href=""&gt;Охрана&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Министерство Обороны&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Министерство Юстиций&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Министерство Культуры&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Министрество&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Список Сотрудников&lt;/a&gt;
                      &lt;ul class="submenu"&gt;
                          &lt;li&gt;&lt;a href=""&gt;Hello&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=""&gt;Hello2&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Вакансии&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Авторизация&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
              &lt;div id="content"&gt;
                  &lt;p&gt;Hello! Welcome to the www.mayor.freeiz.com!&lt;br&gt;&lt;br&gt; Currently I am working on adding different types of information&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
              &lt;div id="footer"&gt;Hello&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>CSS</strong></p>
  
  <pre>
  
  
      html {
          height:;
      }
      body {
          background-image: url("http://www.gtagaming.com/images/potd/200604/10501.jpg");
          background-attachment: fixed;
          background-size: 100% 100%;
          height:100%;
      }
      #wrapper {
          width:1024px;
          min-height: 100%;
          margin:0 auto;
      }
      #banner {
          height:216px;
      }
      #navigation {
          position:relative;
          list-style-type:none;
          font-size: 18px;
          background-color: orange;
          font-family: 'EB Garamond', serif;
          opacity:0.8;
          z-index: 15000001;
  
      }
  
      #navigation>li {
          float:left;
  
      }
      #navigation a {
          display:block;
          padding:10px 10px;
          color:white;
          font-weight: bold;
          width:183.81px;
          height:40px;
          text-align: center;
          background-color: blue;
          border-left:1px solid black;
          text-decoration:none;
      }
      #navigation a:hover {
          background-color:white;
          color:blue;
          border-top:3px solid red;
          opacity:0.9999;
          margin-bottom: -3px;
      }
      #banner h1 {
          font-size: 20px;
          text-align: center;
          position: relative;
          top: 1024px;
      }
      #content {
          position:relative;
          height:500px;
          background-color:white;
          opacity:0.9;
          clear: both;
          z-index:1;
      }
  
      #content p{
          position:relative;
          top:6px;
          font-size: 30px;
          z-index:1;
      }
  
      #footer {
          vertical-align: bottom;
          background-color: orange;
          width:1024px;
          height:50px;
          margin:0 auto;
      }
  
      .submenu {
          display:none;
          position:relative;
  
      }
      .submenu li {
          border-top: 2px solid black;
      }
      #navigation li:hover .submenu {
          display:block;
          z-index:99999999999999999999999999999999999999;
      }
  
  </pre>