How to create an absolutely positioned submenu which appears on css hover - css

Question

I have a menu which needs to expand to show the child elements on hover. According to the design the expanded child ul needs to expand across the full width of the page so needs to be absolutely positioned in order to break out from the width of the parent li.
The problem is that I need the child ul to remain visible as you hover over it. Because it is absolutely positioned it no longer contained by the parent li, so as soon as my mouse moves off that it disappears.
If I change the parent li to position:relative the ul remains visible when the mouse moves over it, but the child ul no longer fills 100% width of the page.
Here is a fiddle to demonstrate:
https://jsfiddle.net/sx2aouht/12/
Here is abbreviated markup (full code on the fiddle link above):
<nav class="priority-nav">
<ul class="menu">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
</ul>
</li>
</ul>
</nav>
Here is the css:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 40px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}

Answer 1

The menu already stays open when you hover the submenu, the problem is that when the mouse goes down to the submenu, it leaves the hovered li element, in order to avoid this make sure that when the mouse enters the submenu, it will not leave the main li you hover, the submenu is in the li item, so hovering it is considered hovering the main li.
You just have to avoid leaving the main li until you enter the submenu, I used some padding in your example:
.priority-nav ul li {
//if this is uncommented the ul will remain visible when
//the mouse is over it, but the ul will not fill the page 100%
//position: relative;
float: left;
padding: 0 10px 5px;
list-style-type: none;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 35px;
left: 0;
background-color: red;
width: 100%;
padding: 50px 130px;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu"><li class="first expanded active-trail active menu-mlid-178 help">Help & Advice<ul class="menu"><li class="first leaf menu-mlid-526">Find your local services</li>
<li class="leaf menu-mlid-528">Join CarerSmart</li>
<li class="leaf menu-mlid-527">Join our online community</li>
<li class="leaf menu-mlid-530">Help and advice topic 4</li>
<li class="leaf menu-mlid-531">Help and advice topic 5</li>
<li class="leaf menu-mlid-532">Help and advice topic 6</li>
<li class="leaf menu-mlid-533">Help and advice topic 7</li>
<li class="leaf menu-mlid-534">Help and advice topic 8</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9</li>
</ul></li>
<li class="expanded menu-mlid-184 community">Online Community<ul class="menu"><li class="first leaf menu-mlid-536">Discussion board</li>
<li class="last leaf menu-mlid-537">Chat</li>
</ul></li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved<ul class="menu"><li class="first leaf menu-mlid-529">Donate</li>
<li class="leaf menu-mlid-538">Events</li>
<li class="leaf menu-mlid-539">Volunteer</li>
<li class="last leaf menu-mlid-540">Corporate opportunities</li>
</ul></li>
<li class="more"><span>More</span></li>
</ul>
</nav>

Answer 2

If the submenu is to be 100% width of the page but the top-level menu is not then we can still position the submenu in relation to the parent menu and not the li.
.priority-nav >.menu {
position: relative;
}
But we size the submenu to the width of the page with viewport units.
.priority-nav ul li ul {
display: none;
position: absolute;
top:100%;
left: 0;
background-color: red;
width: 100vw;
}
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.cf:before,
.cf:after {
content: " ";
display: table;
/* clearfix */
}
.cf:after {
clear: both;
}
.priority-nav {
position: relative;
width: 70%;
}
.priority-nav > .menu {
background: #c0ffee;
}
.priority-nav ul li {
float: left;
padding: 0 10px;
list-style-type: none;
padding: 10px;
}
.priority-nav ul li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: red;
width: 100vw;
}
.priority-nav ul li:hover ul {
display: block;
}
<nav class="priority-nav">
<ul class="menu cf">
<li class="first expanded active-trail active menu-mlid-178 help">Help & Advice
<ul class="menu">
<li class="first leaf menu-mlid-526">Find your local services
</li>
<li class="leaf menu-mlid-528">Join CarerSmart
</li>
<li class="leaf menu-mlid-527">Join our online community
</li>
<li class="leaf menu-mlid-530">Help and advice topic 4
</li>
<li class="leaf menu-mlid-531">Help and advice topic 5
</li>
<li class="leaf menu-mlid-532">Help and advice topic 6
</li>
<li class="leaf menu-mlid-533">Help and advice topic 7
</li>
<li class="leaf menu-mlid-534">Help and advice topic 8
</li>
<li class="last leaf menu-mlid-535">Help and advice topic 9
</li>
</ul>
</li>
<li class="expanded menu-mlid-184 community">Online Community
<ul class="menu">
<li class="first leaf menu-mlid-536">Discussion board
</li>
<li class="last leaf menu-mlid-537">Chat
</li>
</ul>
</li>
<li class="last expanded menu-mlid-176 get-involved">Get Involved
<ul class="menu">
<li class="first leaf menu-mlid-529">Donate
</li>
<li class="leaf menu-mlid-538">Events
</li>
<li class="leaf menu-mlid-539">Volunteer
</li>
<li class="last leaf menu-mlid-540">Corporate opportunities
</li>
</ul>
</li>
<li class="more"><span>More</span>
</li>
</ul>
</nav>