CSS dropdown navigation bar - html

Question

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!!
HTML code
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li> Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>
CSS 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*/

Answer 1

Add position: relative to the parent list item.
#navbar ul li {
position: relative;
}
And you might want to add a width to the child list item, so it is readable.
#navbar ul li ul li {
width: 150px; /* for example */
}
Think that was your issue? Here's the fiddle I created

Answer 2

Remove list id; you don't need it; and replace this one css :
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
position: relative;
display: none;
top: 100%;
left: 0;
right: 0;
z-index: 1;
}

Answer 3

Remove left right from #navbar ul li ul
add top padding to #navbar ul li ul
Set width 100% #navbar ul li ul
add position relative to #navbar ul li
#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;
position:relative;}
#navbar ul li ul {
list-style: none;
width: 100%;
padding: 0;
margin: 0;
padding-top:10px;
position: absolute;
display: none;
top: 100%;
z-index: 1;}
Fiddle:
http://jsfiddle.net/f3sokdxt/

Answer 4

refer https://jsfiddle.net/95rqykjx/
CSS changes are follows,
#navbar ul li ul, remove width: 20%; and left: 32%;
#navbar ul li add position: relative;

Answer 5

Add position: relative to #navbar ul li and
left: 0; width: 100%; to #navbar ul li ul
Hope this will solve your problem.
#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;
position: relative;
}
#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: 100%;
padding: 0;
margin: 0;
position: absolute;
display: none;
top: 100%;
left: 0;
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;
}
<div id="navbar">
<ul>
<li> Home</li>
<li> About us</li>
<li>
Games
<ul>
<li> All Games</li>
<li> Outdoor Games</li>
<li> Indoor Games</li>
<li> Games in Groups </li>
<li> Games in Pair</li>
</ul>
</li>
<li>
Admin
<ul id="list">
<li>Add entry</li>
<li>Passwor request / suggestions</li>
</ul>
</li>
<li> Contact us</li>
<li> Log out</li>
</ul>
</div>