Nested unordered list with hover - html

Question

I have this (simplified) navigation:
.ctmenu {
display: none;
float: right;
}
li:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>
When I hover an li, the direct child .ctmenu should be visible. That works, but I only wan't the element that the mouse is currently on to show .ctmenu. When I hover "Sub menu", .ctmenu for "Main page" is also visible, because I'm hovering that too.
I'd prefer a CSS-fix only, but javascript/jQuery can be okay.
EDIT:
I made a little mistake in my first example that I can see from the answers is important:
The .ctmenu is before the a in the structure and with a float:right, so I can't use the a + .ctmenu selector. Is there an equivalent the other way around?

Answer 1

You need to add one extra div after LI tag. Please check below example
.ctmenu {
display: none;
float: right;
}
.ct-div:hover > .ctmenu {
display: inline-block;
}
<ul class="menu">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Main page
</div>
<ul class="menu sub">
<li>
<div class="ct-div">
<span class="ctmenu">CT Menu</span>
Sub page
</div>
</li>
</ul>
</li>
</ul>

Answer 2

Try This:
.ctmenu { display: none; }
li a:hover + .ctmenu, .ctmenu:hover { display: inline-block; }
<ul class="menu">
<li>
Main page<span class="ctmenu">C Menu 1</span>
<ul class="menu sub">
<li>
Sub page<span class="ctmenu">C Menu 2</span>
</li>
</ul>
</li>
</ul>

Answer 3

Try This:
.ctmenu { display:none }
li a:hover+.ctmenu,
.ctmenu:hover {
display: inline-block;
}
<ul class="menu">
<li>
Main page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
<ul class="menu sub">
<li>
Sub page
<span class="ctmenu">Demo 1</span>
<span class="ctmenu">Demo 2</span>
<span class="ctmenu">Demo 3</span>
<span class="ctmenu">Demo 4</span>
</li>
</ul>
</li>
</ul>

Answer 4

If the HTML structure doesn't change, you can do it with JavaScript, because there is no parent selector in CSS.
With the usage of mouseover, mouseout and classList, you can do something like:
var menu = document.querySelector(".menu");
var items = menu.querySelectorAll("li");
[].forEach.call(items, function(item) {
item.addEventListener("mouseover", function(e) {
e.stopPropagation();
this.children[0].classList.add("active");
});
item.addEventListener("mouseout", function(e) {
e.stopPropagation();
this.children[0].classList.remove("active");
});
})
.ctmenu {
display: none;
float: right;
}
.active {
display: inline-block;
}
<ul class="menu">
<li>
<span class="ctmenu a">CT Menu</span>
Main page
<ul class="menu sub">
<li>
<span class="ctmenu b">CT Menu</span>
Sub page
</li>
</ul>
</li>
</ul>