How to Disable CSS Vertical Menu flyout effect - html

Question

I'm newbie with HTML Lists, I am trying to disable "Hover flyout effect" and list all sub items vertically below the main item and they should remain visible , Please help me to understand what are those properties in this particular CSS which will disable this effect
Here is the fiddle
https://jsfiddle.net/qbg6jw9p/
CSS
#prod_nav {
position: relative;
z-index: 300;
border-left: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7;
border-bottom: 2px solid #d7d7d7;
}
#prod_nav li.top {
display: block;
float: left;
width: 170px;
border-top: 1px solid #d7d7d7;
border-bottom: 1px solid #fbfbfb;
height: 31px;
}
#prod_nav li a.top_link {
font-size: 11px;
display: block;
width: 159px;
padding-left: 11px;
line-height: 31px;
color: #252525;
text-decoration: none;
font-weight: bold;
cursor:pointer;
background: #f0f0f0;
}
#prod_nav li a.top_link span, #prod_nav li a.top_link span.down {
display: block;
padding-right: 20px;
background: url(../images/productmenu-arrow.gif) no-repeat right center;
}
#prod_nav li:hover a.top_link {
color:#0072bc;
background: #fff;
}
#prod_nav li:hover a.top_link span, #prod_nav li:hover a.top_link span.down { background: url(../images/productmenu-arrow-hover.gif) no-repeat right center; }
/* Default list styling */
#prod_nav li:hover {
position:relative;
z-index:200;
}
#prod_nav li:hover ul.sub {
left: 170px;
top: -1px;
background: #fff url(../images/productmenu-leftborder.gif) no-repeat left top;
border: 1px solid #e2e2e2;
border-left: 0;
white-space: nowrap;
width: 384px;
height: auto;
z-index: 300;
}
#prod_nav li:hover ul.sub li {
display: block;
position: relative;
float: left;
width: 364px;
font-weight: normal;
background: url(../images/productmenu-section-bg.png) no-repeat right bottom;
padding: 10px 0 10px 20px;
}
#prod_nav ul, #prod_nav li:hover ul {
position:absolute;
left:-9999px;
top:-9999px;
width:0;
height:0;
margin:0;
padding:0;
list-style:none;
}
/* Overwrite the above settings */
#prod_nav li:hover ul.sub ul {
position: relative;
left: auto;
top: auto;
width: auto;
height: auto;
float: left;
width: 152px;
padding-right: 20px;
background: none;
}
#prod_nav li:hover ul.sub ul li {
background: none;
padding: 8px 0;
margin-right: 20px;
width: 132px;
}
#prod_nav li:hover ul.sub ul li a {
color: #363636;
text-decoration: none;
white-space: normal;
}
#prod_nav li:hover ul.sub li a:hover {
color: #0072bc;
text-decoration: underline;
}
#prod_nav li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover li:hover a.fly, #prod_nav li:hover li:hover li:hover li:hover li:hover a.fly {
background: none;
}

Answer 1

Change the left and top positioning on ul.sub. Currently the item dropdown ul.sub is being told to move 170px from the left, and -1px (up 1 pixel) from the top when the menu is hovered over.
#prod_nav li:hover ul.sub {
left: 0;
top: 31px;
background: #fff url(../images/productmenu-leftborder.gif) no-repeat left top;
border: 1px solid #e2e2e2;
border-left: 0;
white-space: nowrap;
width: 384px;
height: auto;
z-index: 300;
}
Updated Fiddle