css second level dropdowns disappearing - html

Question

My issue is the Html/Css dropdown second level disappears ans I move the cursor, currently works fine on Safari on Iphone but no other browsers I have tried.
Seems to be something to do with the width in the CSS, if I set a fixed px value all seems to fuction but then it does not reize correctly for all screens.
All parameters are % based througout the site and so far that is working fine cross platform.
.third-level-menu {
position: absolute;
top: 0;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #FFF;
}
.third-level-menu>li:hover {
background: #FFF;
}
.second-level-menu {
position: absolute;
top: 30px;
left: 0;
height: auto;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
z-index: 100;
}
.second-level-menu>li {
position: relative;
height: auto;
background: #FFF;
width: auto;
}
.second-level-menu>li:hover {
background: #FFF;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: left;
height: auto;
width: auto;
}
.top-level-menu>.style4 {
float: left;
height: auto;
position: relative;
width: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.top-level-menu>li:hover {
background: #FFF;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
white-space: nowrap;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #093;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: auto;
}
.top-level-menu a:hover {
color: #3F6;
white-space: nowrap
}
.top-level-menu a {
color: #093;
white-space: nowrap
}
<div id="topmenu">
<ul class="top-level-menu">
<li>Home</li>
<li class="style4">//</li>
<li>Eeeeeeeeee eeeeeeeeeee
<ul class="second-level-menu">
<li>Dddddddd</li>
<li>Dddddddddd</li>
<li>Dddddddddd</li>
</ul>
<li class="style4">//</li>
<li>AAAAAAAAAA
<ul class="second-level-menu">
<li>Two long words</li>
<li>Two very long words</li>
</ul>
<li class="style4">//</li>
<li>Two long words</li>
<li class="style4">//</li>
<li>two words
<ul class="second-level-menu">
<li>single</li>
<li>single</li>
<li class="style4">//</li>
</ul>
<li class="style4">//</li>
<li>Eeeeeee</li>
</ul>
</div>

Answer 1

There is a gap between your main menu and second level menu. Because of that your hover effect is no longer exist. To check try this code
.top-level-menu > li > a { border: 1px solid blue; }
.second-level-menu { border: 1px solid red; }
and to resolve this use
.top-level-menu > li > a { padding:8px 0px; }

Answer 2

Removing top:30px from .second-level-menu will fix the issue.
If you want some gap between the main menu and the second level menu. You can give some padding to the first menu option by adding below-given css -
.second-level-menu > li:first-child {
padding-top: 10px;
}
.third-level-menu {
position: absolute;
top: 0;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
}
.third-level-menu>li {
height: 30px;
background: #FFF;
}
.third-level-menu>li:hover {
background: #FFF;
}
.second-level-menu {
position: absolute;
left: 0;
height: auto;
width: auto;
list-style: none;
padding: 0;
margin: 0;
display: none;
z-index: 100;
}
.second-level-menu>li {
position: relative;
height: auto;
background: #FFF;
width: auto;
}
.second-level-menu>li:hover {
background: #FFF;
}
.top-level-menu {
list-style: none;
padding: 0;
margin: 0;
}
.top-level-menu>li {
position: relative;
float: left;
height: auto;
width: auto;
}
.top-level-menu>.style4 {
float: left;
height: auto;
position: relative;
width: auto;
padding-top: 0px;
padding-right: 10px;
padding-bottom: 10px;
padding-left: 10px;
}
.top-level-menu>li:hover {
background: #FFF;
}
.top-level-menu li:hover>ul {
/* On hover, display the next level's menu */
display: inline;
white-space: nowrap;
}
.top-level-menu a {
font: bold 14px Arial, Helvetica, sans-serif;
color: #093;
text-decoration: none;
padding: 0 0 0 10px;
display: block;
line-height: auto;
}
.top-level-menu a:hover {
color: #3F6;
white-space: nowrap
}
.top-level-menu a {
color: #093;
white-space: nowrap
}
<div id="topmenu">
<ul class="top-level-menu">
<li>Home</li>
<li class="style4">//</li>
<li>Eeeeeeeeee eeeeeeeeeee
<ul class="second-level-menu">
<li>Dddddddd</li>
<li>Dddddddddd</li>
<li>Dddddddddd</li>
</ul>
<li class="style4">//</li>
<li>AAAAAAAAAA
<ul class="second-level-menu">
<li>Two long words</li>
<li>Two very long words</li>
</ul>
<li class="style4">//</li>
<li>Two long words</li>
<li class="style4">//</li>
<li>two words
<ul class="second-level-menu">
<li>single</li>
<li>single</li>
<li class="style4">//</li>
</ul>
<li class="style4">//</li>
<li>Eeeeeee</li>
</ul>
</div>