How to add a third level to my CSS drop down menu - php

Question

I have an existing CSS that only shows a two level menu. I want to add a third level but I'm out of ideas. Could soeone please assist me on what i need to add to the CSS. Below is the current code.
#topnav{
display:block;
float:left;
//width:660px;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul{margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
Here is the HTML
<div id="topnav">
<ul>
<li <?php if($menu== 0) { echo "class='active'"; } ?>>
Home
</li>
<li class="last">
Set Up
<li class="last">
EMR
<ul>
<li class="last" >
Out-Patient
</li>
<ul>
<li>
Registration
</li>
<li>
File Edition
</li>
</ul>
<li>In-Patient</li>
</ul>
</div>
The two sub-menus under out-patient (Registration & File Edition) are not showing.
Thanks.

Answer 1

You need to close a few elements correctly and also the CSS for your solution is:
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
Closed and corrected HTML:
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>
Working Snippet
#topnav{
display:block;
float:left;
margin:0;
padding:0;
list-style:none;
font-size:10px;//was 13
font-weight:normal;
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul, #topnav li{
float:left;
list-style:none;
margin:0;
padding:0;
}
#topnav li a:link, #topnav li a:visited, #topnav li a:hover{
display:block;
margin:0;
padding:15px 20px;
color:#FFFFFF;
background-color:#000000;
}
#topnav ul ul li a:link, #topnav ul ul li a:visited{
border:none;
}
#topnav li.last a{
margin-right:0;
}
#topnav li a:hover, #topnav ul li.active a{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li li a:link, #topnav li li a:visited{
//width:150px;
float:none;
margin:0;
padding:7px 10px;
font-size:12px;
font-weight:normal;
color:#FFFFFF;
background-color:#000000;
}
#topnav li li a:hover{
color:#FFFFFF;
background-color:#059BD8;
}
#topnav li ul{
background:#FFFFFF;
z-index:9999;
position:absolute;
left:-999em;
height:auto;
width:170px;
border-left:1px solid #FFFFFF;
border-bottom:1px solid #FFFFFF;
}
#topnav li ul a{width:140px;}
#topnav li ul ul {margin:-32px 0 0 0;}
#topnav li:hover ul ul{left:-999em;}
#topnav li:hover ul, #topnav li li:hover ul{left:auto;}
#topnav li:hover{position:static;}
#topnav li.last a{margin-right:0;}
#topnav li li:hover ul {left: 160px; margin-top: -3em;}
<div id="topnav">
<ul>
<li>Home</li>
<li class="last">Set Up</li>
<li class="last">EMR
<ul>
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition</li>
</ul>
</li>
<li>In-Patient</li>
</ul>
</li>
</ul>
</div>

Answer 2

Please put your third level menu inside parent li, which makes hierarchical order or level of menu
<li class="last" >Out-Patient
<ul>
<li>Registration</li>
<li>File Edition
</li>
</ul>
<li>