I am having trouble accessing my submenu when I move the mouse away from the parent element.
Could you please test the link provided [username and password both set to vts ]
Lowering the resolution seems to resolve the issue for me.
My current screen resolution is 1920x1080.
This is a snippet of My CSS:
nav {
/*background:#0099FF;*/
background: none repeat scroll 0 0 #fafafa;
border-bottom: 1px solid #7e7e7e;
padding: 0 0 0 10px;
min-height:10vh;
position: absolute;
right: 0;
top: 0;
width: 100%;
z-index: 11;
}
nav ul {
text-align: center;
/*display: inline;*/
list-style: none;
/*20150113*/
min-height:10vh;
display: inline;
list-style: none;
width: 100%;
float: left;
margin-top: -2px;
}
nav ul ul {
margin-left: 0% !important;
}
nav ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
position: relative;
vertical-align: middle;
-moz-appearance: none;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
color: #262638;
margin: 0px -1px;
line-height:1;
top:1vh;
}
ul#nav > li li {display: table-row;}
nav ul li a {
margin: 5px 5px 0px 10px; /*20150113*/
text-decoration: none;
color: #262638;
display: block;
}
nav ul li a:hover {
text-decoration: none;
margin: 5px 5px 0px 10px;
color: #000000;
display: block;
font-size: 12px;
font-family: arial, helvetica, sans-serif;
text-decoration: none;
display: inline-block;
font-weight: bold;
}
nav ul li ul {
display: none;
width: 960px;
position: fixed;
left: 17%;
top: 10vh;
border-top: none;
margin-top: 1pt;
overflow: scroll;
height: 32%;
overflow-x: hidden;
text-align: left;
border-bottom:5px solid #cccccc;
padding-bottom:10px;
}
nav ul li ul li {
width: 33.333%;
border-left: solid 1px #ccc;
margin: 0 -3px;
/*padding:0px 25.5px;*/
background: #FAFAFA !important;
border-radius: 0px;
text-align: left;
}
nav ul li ul li a {
font-family: 'Arial', Helvetica Neue, Helvetica, sans-serif !important;
-webkit-font-smoothing: antialiased;
font-size: 12px;
text-decoration: none;
color: #666;
background: #fff;
cursor: pointer;
padding: 14px;
}
nav ul li ul li a:hover {
text-decoration: none;
color: #de4a4a;
cursor: pointer;
padding: 14px;
}
nav ul li ul li h5 {
font-family: 'Arial', Helvetica Neue, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
font-size: 16px;
font-weight: normal;
margin-bottom: 10px;
}
nav ul li ul li p {
font-size: 12px;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
padding: 0 16px;
}
nav ul li:hover ul {
display: block;
background: #fff;
width: 64.1%;
border: 1px solid #ccc;
position: fixed;
left: 18%;
border-top: none;
}