Dropdown menu do not working correctly - css

Question

The submenu is not working correctly. It should appears when hover on specific item, but its appearing when hover any item
HTML
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
CSS
.sty {
background:#aaa;
float:left;
width:600px;
}
.sty ul li {
list-style:none;
position:relative;
padding:25px 10px;
float:left;
}
.sty ul ul{
display:none;
}
.met_clean_list:hover ul {
display:block;
background:red;
}
https://jsfiddle.net/59opc6tj/119/

Answer 1

That's because the hover rule you specified doesn't do what you wish it will do.
You have written: If I hover on .met_clean_list, make all uls within it displayed.
What you wanted to write: If I hover on one of the lis, make the following ul visible.
Thus, you should write .met_clean_list li:hover + ul
.sty {
background: #aaa;
float: left;
width: 600px;
}
.sty ul li {
list-style: none;
position: relative;
padding: 25px 10px;
float: left;
}
.sty ul ul {
display: none;
}
.met_clean_list li:hover + ul {
display: block;
background: red;
}
.sty ul ul:hover {
display: block;
}
<div class="sty">
<ul class="met_clean_list">
<li>Link 01</li>
<ul>
<li><b>Sublink 01</b></li>
<li><b>Sublink 02</b></li>
</ul>
<li>Link 02</li>
<li>Link 03</li>
</ul>
</div>
Notice that I also added:
.sty ul ul:hover {
display: block;
}
So the dropdown won't disappear when you hover on it.

Answer 2

I hope this code will be useful for you
Html:
<ul>
<li>Home</li>
<li>Blog</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
</ul>
css:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1}
.dropdown:hover .dropdown-content {
display: block;
}
demo:
https://jsfiddle.net/faridvatani/54qypuds/