Drop Down Menu Not Working in my Blog - html

Question

In my blog (http://www.khyberacademy.blogspot.com), the dropdown menu is not working. Please guide me. The HTML & CSS codes are given below.
On hover it doesn't drop down and also I have tried to change the display to block & inline, but it didn't solve my problem.
HTML:
<!-- begin #topMenu -->
<div class='clearfix' id='navigation-wrapper'>
<select id='responsive-main-nav-menu' onchange='javascript:window.location.replace(this.value);'><option selected='selected'>Menu</option></select>
<nav class='main-menu' id='main-navigation'>
<ul class='sf-menu' id='menu-top-menu'>
<li>
<a href='#' style='padding-right: 23px;'>Engineering<span class='downarrowclass'/></a>
<ul class='sub-menu' style='top: 127px; visibility: visible; left: 0px; width: 175px; display: none;'>
<li><a href='http://khyberacademy.blogspot.com/search/label/Bridge%20Engineering'>Bridge Engineering</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/Pre-stressed%20Concrete'>Pre-stressed Concrete</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/CAD%2FCAM'>CAD/CAM</a></li>
</ul>
</li>
<li>
<a href='#' style='padding-right: 23px;'>COMMERCE<span class='downarrowclass'/></a>
<ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
<li><a href='http://khyberacademy.blogspot.com/search/label/AUDITING'>AUDITING</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/Business%20Communication'>BUSINESS COMMUNICATION</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/ECONOMICS'>ECONOMICS</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/STATISTICS'>STATISTIC</a></li>
</ul>
</li>
<li>
<a href='#' style='padding-right: 23px;'>COMPUTER<span class='downarrowclass'/></a>
<ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
<li><a href='http://khyberacademy.blogspot.com/search/label/Joomla%21'>JOOMLA</a></li>
<li><a href='http://khyberacademy.blogspot.com/search/label/Windows%20Tricks'>WINDOWS TRICKS</a></li>
<li><a href='#'>WORDPRESS</a></li>
<li><a href='#'>BLOGGING</a></li>
</ul>
</li>
<li>
<a href='#' style='padding-right: 23px;'>GRAPHICS<span class='downarrowclass'/></a>
<ul class='sub-menu' style='top: 127px; visibility: visible; display: none;'>
<li><a href='http://khyberacademy.blogspot.com/search/label/CAD%2FCAM'>CAD/CAM</a></li>
</ul>
</li>
<li>
<a href='http://khyberacademy.blogspot.com/p/contact-us.html'>Contact</a>
</li>
</ul>
</nav>
</div>
<!-- end #topMenu -->
CSS:
/* -------------------------------------------------- */
/* MAVIGATION
/* -------------------------------------------------- */
.downarrowclass {
position: absolute;
top: 53px;
right: 5px;
}
.rightarrowclass {
position: absolute;
top: 10px;
right: 10px;
}
#main-navigation select { display: none }
#main-navigation { float: right }
#main-navigation > ul { margin: -30px 0 0 0px }
#main-navigation ul li {
list-style: none;
float: left;
position: relative;
}
#main-navigation li a {
color: #898989;
font-family: 'Dosis', 'Verdana', sans-serif;
font-size: 16px;
font-weight: normal;
padding: 47px 12px 50px 12px;
margin: 0px 0px 10px 0;
position: relative;
text-align: center;
text-transform: uppercase;
float: left;
overflow: hidden;
line-height: 20px;
}
#main-navigation ul li a:hover,
#main-navigation ul li.current-menu-ancestor > a,
#main-navigation ul li.current-menu-item > a {
color: #9dcedf;
background: #f8f8f8;
border-bottom: 1pt solid #9dcedf;
}
#main-navigation ul ul li a {
display: block;
float: none;
}
#main-navigation ul ul {
background: url("http://1.bp.blogspot.com/-iIDMdP-Ub9I/UkEjY7k9a5I/AAAAAAAAJ-0/ZWPPe0dkcoA/s1600/menu-drop-bg.png") 20% 0% no-repeat;
padding-top: 8px;
display: none;
left: 0;
margin-top: -18px;
position: absolute;
width: 175px;
z-index: 99;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#main-navigation ul ul ul {
background: url("http://1.bp.blogspot.com/-3LBiTw7Ht0U/UkEjYHu05eI/AAAAAAAAJ-k/pCHPYKrpKak/s1600/menu-drop-bg-2.png") 0% 50% no-repeat;
padding-left: 8px;
display: none;
left: 0;
position: absolute;
width: 175px;
z-index: 99;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#main-navigation ul ul ul ul {
background: url("http://1.bp.blogspot.com/-3LBiTw7Ht0U/UkEjYHu05eI/AAAAAAAAJ-k/pCHPYKrpKak/s1600/menu-drop-bg-2.png") 0% 50% no-repeat;
padding-left: 8px;
display: none;
margin-left: 10px;
left: 0;
position: absolute;
width: 175px;
z-index: 99;
border-radius: 2px;
-moz-border-radius: 2px;
-webkit-border-radius: 2px;
}
#main-navigation ul ul li,
#main-navigation ul ul li a {
padding: 0px 0 0 0px;
margin: 0px;
color: #FFF;
background: #615951;
font-family: "Arial", "Verdana";
}
#main-navigation ul ul li { }
#main-navigation ul ul li { float: none }
#main-navigation ul li {
padding: 0;
margin: 0 0 0 20px;
}
#main-navigation ul ul a {
border: 0;
color: #fff;
display: block;
font-size: 11px;
font-weight: 400;
padding: 5px 10px !important;
text-align: left;
margin: 0;
text-transform: none;
}
#main-navigation ul ul a:hover,
#main-navigation ul ul .hover > a,
#main-navigation ul ul .current-menu-item > a,
#main-navigation ul ul .current-menu-item > a:hover {
background: #9dcedf ;
color: #fff !important;
border: 0 !important;
}
#main-navigation ul li ul {
position: absolute;
left: 0px;
display: block;
visibility: hidden;
margin-left: 0px;
top: 0;
}
.downarrowclass,
.rightarrowclass {
width:8px;
height:8px;
background:url(http://2.bp.blogspot.com/-bkf-TLVpTn4/UkEjaEMyKaI/AAAAAAAAJ_E/dyM2NDVqNNo/s1600/plus.png) top left no-repeat;
display:inline-block;
position: absolute;
right: 5px;
top: 53px
}
.rightarrowclass {
background-image:url(http://3.bp.blogspot.com/-ivF1y3GR6rw/UkEjZ8YMXlI/AAAAAAAAJ-8/xCB_X7XVIbw/s1600/plus-white.png);
}

Answer 1

Just Add this class, it will work well.
Hopefully, this will resolve your issue.
#main-navigation ul li:hover ul{display:block!important;}

Answer 2

Remove display:none in every "ul"
and set visiblity:none. Then add below Javascript code.
$("ul").hover(function(){
$(this).css("visibility", "visibile");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>