I'm new to HTML Lists and trying to figure out how to disable the "Hover flyout effect" so that all sub items are listed vertically below the main item while remaining visible. Can someone please help me understand which specific CSS properties can be used to 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;
}