Dropdown menu in SilverStripe - html

Question

I have a dropdown menu in SilverStripe that works although when you hover over the space where the downdown part it shows up when I only want it to show up when you hover over the main menu item. I don't really know if that makes sense. I have included my code so you can maybe see what I mean.
CSS
.menu, .menu ul, .menu li, .menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.menu {
height: 40px;
width: auto;
padding: 0;
margin: 0;
float: left;
}
.menu li {
position: relative;
list-style: none;
float: left;
display: block;
}
/* Links 8*/
.menu li a {
display: block;
padding: 0 20px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 14px;
color: #f3f3f3;
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
text-transform: uppercase;
}
.menu li:first-child a {
border-left: none;
}
.menu li:last-child a {
border-right: none;
}
.menu li:hover > a {
color: #D12D3C;
}
.menu li > a:hover {
color: #D12D3C;
}
.menu li > a.current {
color: #000;
background-color: #fff;
}
.menu li > a.section {
color: #000;
background-color: #fff
}
/* Sub Menu */
.menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
}
.menu ul li {
height: auto;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.sub-menu li:hover {
height: auto;
overflow: visible;
padding: 0;
}
.menu ul li a {
width: 210px;
padding: 4px 0 4px 30px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.menu ul li:last-child a {
border: none;
}
HTML
<div class="large-12 medium-12 header columns">
<img src="themes/Connected/images/Connected-banner.png" alt="banner" />
</div>
<div class="large-12 medium-12 band columns">
<ul class="menu">
<% control ChildrenOf(Home) %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML" style="text-transform:uppercase;">$MenuTitle</a>
<% if Children %>
<ul class="sub-menu">
<!-- Sub Menu -->
<% control Children %>
<li><a class="$LinkingMode" href="$Link" title="$Title.XML" alt="$Title.XML">$MenuTitle</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
<img src="/themes/Connected/images/search-icon.png" alt="search-icon" />
</div>

Answer 1

We can move the sub menu off screen until it is hovered by adjusting the top value.
CSS
.menu ul {
position: absolute;
top: -100000px;
left: 0;
opacity: 0;
background: #1f2024;
text-transform: none;
text-transform: none;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s, top 0s .35s;
transition: opacity .25s ease .1s, top 0s .35s;
z-index: 9999;
}
.menu li:hover > ul {
opacity: 1;
top: 40px;
-webkit-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
Demo
The benefit of doing this instead of hiding and showing the menu with display: none and display: block is this allows us to have a nice css transitions fade the menu in and out.

Answer 2

Try removing "opacity 0;" and change it to "display: none;" and "opacity: 1" to "display: block;". Because the sub menu is actually there even though you can't see it, so it is still being hovered on. This seems to be a pure css issue from what I can see. Hope that helps