Set submenu position from top - html

Question

I am a backend developer and don't know much about the designing. In my ecommerce project, I am trying to get sub-menus to be displayed from the top no matter where the parent menu position.
In my menu HTML I have:
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul style="">
<li>Yahoo Games »
<ul style="">
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul style="">
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul style="">
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul style="">
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>
And the CSS is to this menu is:
#nav{
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width:500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li{
list-style: none;
display: block;
float: left;
height: 40px;
position: relative;
border-right: 1px solid #52BDB5;
}
#nav li a{
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul{
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left:1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow:2px 2px 3px #ECECEC;
width:170px;
}
#nav .site-name,#nav .site-name:hover{
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a{
width: 129px;
overflow:hidden;
}
#nav li.facebook{
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo{
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google{
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter{
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover{
background: #3BA39B;
}
#nav li a{
display: block;
}
#nav ul li {
border-right:none;
border-bottom:1px solid #DDDDDD;
width:170px;
height:39px;
}
#nav ul li a {
border-right: none;
color:#6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom:1px solid #FFFFFF;
}
#nav ul li:hover{background:#DFEEF0;}
#nav ul li:last-child { border-bottom: none;}
#nav ul li:last-child a{ border-bottom: none;}
/* Sub menus */
#nav ul{
display: none;
visibility:hidden;
position: absolute;
top: 40px;
}
/* Third-level menus */
#nav ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
/* Fourth-level menus */
#nav ul ul ul{
top: 0px;
left:170px;
display: none;
visibility:hidden;
border: 1px solid #DDDDDD;
}
#nav ul li{
display: block;
visibility:visible;
}
#nav li:hover > ul{
display: block;
visibility:visible;
}
When executes on the server it displayed like this:
https://jsfiddle.net/uqfsvn4L/
As you can see the submenu of Google Search displays from the top of its parent position but I want it to be displayed from the top of the main menu. How can I get the submenu display from the top?
My expected output would be:

Answer 1

Remove position: relative from #nav li and then adjust the top property of #nav ul. Here is the working example
#nav {
height: 39px;
font: 12px Geneva, Arial, Helvetica, sans-serif;
background: #3AB3A9;
border: 1px solid #30A097;
border-radius: 3px;
min-width: 500px;
margin-left: 0px;
padding-left: 0px;
}
#nav li {
list-style: none;
display: block;
float: left;
height: 40px;
border-right: 1px solid #52BDB5;
}
#nav li a {
padding: 0px 10px 0px 30px;
margin: 0px 0;
line-height: 40px;
text-decoration: none;
border-right: 1px solid #389E96;
height: 40px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
}
#nav ul {
background: #f2f5f6;
padding: 0px;
border-bottom: 1px solid #DDDDDD;
border-right: 1px solid #DDDDDD;
border-left: 1px solid #DDDDDD;
border-radius: 0px 0px 3px 3px;
box-shadow: 2px 2px 3px #ECECEC;
-webkit-box-shadow: 2px 2px 3px #ECECEC;
-moz-box-shadow: 2px 2px 3px #ECECEC;
width: 170px;
}
#nav .site-name,
#nav .site-name:hover {
padding-left: 10px;
padding-right: 10px;
color: #FFF;
text-shadow: 1px 1px 1px #66696B;
font: italic 20px/38px Georgia, "Times New Roman", Times, serif;
background: url(images/saaraan.png) no-repeat 10px 5px;
width: 160px;
border-right: 1px solid #52BDB5;
}
#nav .site-name a {
width: 129px;
overflow: hidden;
}
#nav li.facebook {
background: url(../images/facebook.png) no-repeat 9px 12px;
}
#nav li.facebook:hover {
background: url(../images/facebook.png) no-repeat 9px 12px #3BA39B;
}
#nav li.yahoo {
background: url(../images/yahoo.png) no-repeat 9px 12px;
}
#nav li.yahoo:hover {
background: url(../images/yahoo.png) no-repeat 9px 12px #3BA39B;
}
#nav li.google {
background: url(../images/google.png) no-repeat 9px 12px;
}
#nav li.google:hover {
background: url(../images/google.png) no-repeat 9px 12px #3BA39B;
}
#nav li.twitter {
background: url(../images/twitter.png) no-repeat 9px 12px;
}
#nav li.twitter:hover {
background: url(../images/twitter.png) no-repeat 9px 12px #3BA39B;
}
#nav li:hover {
background: #3BA39B;
}
#nav li a {
display: block;
}
#nav ul li {
border-right: none;
border-bottom: 1px solid #DDDDDD;
width: 170px;
height: 39px;
}
#nav ul li a {
border-right: none;
color: #6791AD;
text-shadow: 1px 1px 1px #FFF;
border-bottom: 1px solid #FFFFFF;
}
#nav ul li:hover {
background: #DFEEF0;
}
#nav ul li:last-child {
border-bottom: none;
}
#nav ul li:last-child a {
border-bottom: none;
}
/* Sub menus */
#nav ul {
display: none;
visibility: hidden;
position: absolute;
top:48x;
}
/* Third-level menus */
#nav ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
/* Fourth-level menus */
#nav ul ul ul {
top: 0px;
left: 170px;
display: none;
visibility: hidden;
border: 1px solid #DDDDDD;
min-height: 100%
}
#nav ul li {
display: block;
visibility: visible;
}
#nav li:hover>ul {
display: block;
visibility: visible;
}
<ul id="nav">
<li class="site-name">Social </li>
<li class="yahoo">Yahoo
<ul>
<li>Yahoo Games »
<ul>
<li>Board Games</li>
<li>Card Games</li>
<li>Puzzle Games</li>
<li>Skill Games »
<ul>
<li>Yahoo Pool</li>
<li>Chess</li>
</ul>
</li>
</ul>
</li>
<li>Yahoo Search</li>
<li>Yahoo Answsers</li>
</ul>
</li>
<li class="google">Google
<ul>
<li>Google mail</li>
<li>Google Plus</li>
<li>Google Search »
<ul>
<li>Search Images</li>
<li>Search Web</li>
</ul>
</li>
</ul>
</li>
<li class="twitter">Twitter
<ul>
<li>New Tweets</li>
<li>Compose a Tweet</li>
</ul>
</li>
</ul>