Bootstrap Dropdown Hoverable Dropdown menu using CSS only - css

Question

I tried to make this part of my code hoverable using CSS only but didn't work, I followed steps right here, http://www.w3schools.com/howto/howto_css_dropdown.asp , But i couldn't put anything correctly in its place on my code, I either make the hoverable or instead i make the entire .list hoverable but yet the .list doesn't work hover hover
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="list">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
</div>
</div>
</li>
</ul>
</div>
</nav>
CSS (What I've tried by myself)
<style>
.dropdown-menu {
visibility: hidden;
}
.dropdown-menu:hover > .list {
visibility: visible;
}
</style>

Answer 1

This is a strange structure, but the core of the issue was in your targetting of the wrong classes.
.dropdown{
display: block;
}
.dropdown-menu {
display: none;
}
.dropdown:hover .dropdown-menu {
display: block;
}
<nav class="navbar navbar-toggleable-md navbar-light">
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="list">
<a class="dropdown-item" href="#">1</a>
<a class="dropdown-item" href="#">2</a>
<a class="dropdown-item" href="#">3</a>
<a class="dropdown-item" href="#">4</a>
<a class="dropdown-item" href="#">5</a>
</div>
</div>
</li>
</ul>
</div>
</nav>

Answer 2

.dropdown-menu:hovern .list {
visibility: visible;
}
this would work, You forgot to remove the '>' from the code that didn't allow css to access the list class, just remove'>' from the code and it may work.
in CSS, any class present in another class can be targeted by just writing the class name with '.'operator.
example- HTML code:
<div class="A">
<div class="B"></div>
</div>
CSS code:
.A .B{
}
this is how you access a subClass with parent class.