Respiant Respiant - 2 months ago 7
CSS Question

Having problems with a dropdown list (hover) CSS HTML5

I'm having a problem with a dropdown list. Here is the HTML code I got.

Screenshot: http://i.imgur.com/zIAhQkj.png

<nav>
<a href="index.php"> Hjem </a>

<ul>
<li class="nav_link">
<a onclick="extern_link_warning()" class="dropdown_hover"
href="http://bbc.com">Innleveringer</a>
<ul class="preview_box">
<li>
<a onclick="extern_link_warning()" href="http://bbc.com">Link 1</a>
</li>
<li>
<a href="link2.html">Link 2</a>
</li>
</ul>
</li>
<li><a href="index.php?p=ommeg"> Om meg </a></li>

<!-- Kun admin brukere ser disse sidene: -->

<?php
if ($isLoggedIn){
echo '<li><a href="index.php?ap=admin"> Admin </a></li>';
}
?>
</ul>
</nav>


My CSS code for the dropdown:

.preview_box {
display: none;
}

a:hover + .preview_box,.preview_box:hover {
display: block;
}


The code above works, but the problem is that I want the ".preview_box" to appear when hovering a ".nav_link" tag instead of an "a" tag, but I can't get it to work. This is what I've tried:

.nav_link:hover + .preview_box, .preview_box:hover {

}

.nav_link:hover + .nav_link .preview_box, .nav_link .preview_box:hover {

}


Any ideas how I can get this to work?

Answer

Well after reading and reading your questions I think what you want is when you hover the li with the class nav_linkyou want to appear the .preview-box instead of hovering the anchor inside it...

Well, this should fix the problem...

.nav_link:hover .preview_box {
  display: block;
}
Comments