couldn't show submenu of horizontal menu on hover - html

Question

there are navigation panel(div id=#nav) in which is located horizontal menu(nav_main_ul). It has submenu. When I load site main horizontal is appear but on hover submenu of main manu is not appear.
I write:
.nav_main_ul li a:hover .submenu{
top:150;
}
What is wrong?
Everything did work while I use flexbox for sidebar, content and footer.
I'm newbie in html and css. I think reason of failure is conflict between position(absolute, relative) and flexbox.
Thanks in advance.
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
/*.nav_main_ul li a:hover .submenu{
top:50;
}*/
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>

Answer 1

Edit
Hi Delphi - To answer your question about the + selector, let's take a look at your HTML markup:
<li>
Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
We need to understand that in the above markup, we can express it as:
LI (Parent / Root)
- A (Child of LI, Sibling of UL)
- UL (Child of LI, Sibling of A)
- LI (Child of UL, Grand-Child of LI)
Your desired action is that when a user hovers over the A, we show the UL.
USUALLY with CSS, we think of NESTED (or PARENT/CHILD) use-cases. But in YOUR use case, the A and UL are NOT in a parent/child relationship. Rather, they are siblings.
So, what we want is: When a user hovers over the A, we want the SIBLING(s) of A (in this case, only UL) to have TOP: 50PX.
There are TWO sibling selectors in CSS, "Adjacent" and "General". Adjacent means that it will ONLY apply when the siblings are directly together. For example:
<div>
<p></p>
<span></span>
<span></span>
<p></p>
</div>
OR:
DIV
- P
- SPAN
- SPAN
- P
Let's assume in the above, we wanted to select every SPAN that is a SIBLING of P. If we did:
p + span { color : red }
Only the FIRST span would be applied. That's because, it's the only span that immediately is next to a P element. Demo: http://jsfiddle.net/ucq5pg13/
What if we wanted ALL spans following a P to be red? That's where our GENERAL sibling selector comes into play:
p ~ span { color: red }
What this says is that ANY span that's a SIBLING of P, that comes AFTER IT, will be red.
It's important to note that it MUST come after. For example:
p ~ span { color: red }
<div>
<span></span> <!-- I WOULD NOT BE RED -->
<p></p>
<span></span> <!-- I WOULD BE RED -->
<span></span> <!-- I WOULD BE RED -->
<p></p>
</div>
Demo: http://jsfiddle.net/kb7n5236/
Hopefully that helps :)
Original:
When you hover over the a link, you'll need to position the .submenu. You can do something like:
<!-- On hover, show submenu -->
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
JSFiddle: http://jsfiddle.net/1us0q4m3/1/
* {
margin: 0;
padding: 0;
list-style: none;
}
html,
body {
height: 100%;
}
#nav {
left: 0;
top: 120px;
background-color: #00004d;
width: 100%;
}
.nav_main_ul {
position: relative;
margin: 0px 0 0 400px;
}
#nav ul {
height: 50px;
list-style: none;
background-color: #00004d;
}
#nav li {
display: block;
float: left;
font-family: Arial, sans-serif;
font-size: 20px;
position: relative;
}
#nav li a {
color: #fff;
display: block;
height: 50px;
padding: 0 10px;
text-decoration: none;
line-height: 50px;
}
.nav_main_ul li a:hover {
background: #000080;
}
.nav_main_ul li a:hover + .submenu,
.nav_main_ul li a + .submenu:hover {
top: 50px;
}
.submenu {
position: absolute;
width: 250px;
top: -9999em;
}
.submenu li {
width: 100%;
height: 40px;
background: #00004d;
}
.submenu li a {
line-height: 50px;
height: 50px;
transition: background 0.5s;
}
.submenu li a:hover {
background-color: red;
}
li:hover .submenu li {
display: block;
z-index: 100;
}
<div id="nav">
<ul class="nav_main_ul">
<li>Main
<ul class="submenu">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
</li>
<li> News
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</li>
<li>About us
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Gallery
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
<li>Contacts
<ul class="submenu">
<li>link 5</li>
<li>link 6</li>
<li>link 7</li>
<li>link 8</li>
<li>link 9</li>
<li>link 10</li>
</ul>
</li>
</ul>
</div>