title: CSS dropdown navigation bar
body: <p>Can someone help me what is wrong with my code why the "admin's" tab drop down menu does not stay on place where it should be. It should be below the admin tab, however when you put the mouse on the admin tab the drop down goes on the tab beside the admin. I tried to designate an id for the admin's ul however, nothing works. Stays the same. Thank you very much!! </p>
  
  <p>HTML code</p>
  
  <pre><code>&lt;div id="navbar"&gt;
      &lt;ul&gt;
          &lt;li&gt; &lt;a href="admin_home.php"&gt;Home&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href="admin_about.php"&gt;About us&lt;/a&gt;&lt;/li&gt;
  
          &lt;li&gt; &lt;a href="admin_games_all.php"&gt;Games&lt;/a&gt;
              &lt;ul&gt;
                  &lt;li&gt; &lt;a href="admin_games_all.php"&gt;All Games&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="admin_games_outdoor.php"&gt;Outdoor Games&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="admin_games_indoor.php"&gt;Indoor Games&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt; &lt;a href="admin_games_groups.php"&gt;Games in Groups&lt;/a&gt; &lt;/li&gt;
                  &lt;li&gt; &lt;a href="admin_games_pair.php"&gt;Games in Pair&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt;&lt;a href="admin_tab.php"&gt;Admin&lt;/a&gt;
              &lt;ul id="list"&gt;
                  &lt;li&gt;&lt;a href="admin_add.php"&gt;Add entry&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="admin_database.php"&gt;Passwor request / suggestions&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
          &lt;/li&gt;
          &lt;li&gt; &lt;a href="admin_contact_form.php"&gt;Contact us&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt; &lt;a href="logout.php"&gt;Log out&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;  
  </code></pre>
  
  <p>CSS code: </p>
  
  <pre><code>/*CSS Naigation Bar*/
  #navbar {
  width: 100%;
  height: 100%; }
  
  #navbar ul {
  width: 90%;
  position: fixed;
  list-style: none;
  padding: 0;
  margin: 0;
  top: 0;
  left: 12.5%;
  right: 0;
  z-index: 1;}
  
  #navbar ul li {
  background-color: black;
  opacity: 0.7;
  float: left;
  height: 25%;
  width: 16.5%;
  padding: 0;
  margin: 0;
  font-family: Arial;
  font-weight: bold;
  font-size: 16.5px;
  text-align: center;
  line-height: 20px;}
  
  #navbar ul li a {
  display: block;
  padding: 7% 10%;
  text-decoration: none;
  color: #E4E4E4;}
  
  #navbar ul li a:hover {
  background-color: transparent;
  color: white;
  text-shadow: 0px 0px 2px white, 0px 0px 2px white, 0px 0px 2px white;}
  
  #navbar ul li ul {
  list-style: none;
  width: 20%;
  padding: 0;
  margin: 0;
  position: absolute;
  display: none;
  top: 100%;
  left: 32%;
  right: 40%;
  z-index: 1;}
  
  #navbar ul li ul li {
  width: 100%;
  float: none;
  background-color: black;
  opacity: 10;
  text-align: center;}
  
  #navbar ul li:hover ul {
  display: block;} 
  
  #navbar ul li ul #list{
  list-style: none;
  width: 20%;
  padding: 0;
  margin: 0;
  position: absolute;
  display: none;
  top: 100%;
  left: 50%;
  right: 40%;
  z-index: 1;}
  /*end*/
  </code></pre>