Here is the CSS code I am using:
.nav li a {
background-color:#000;
color:#fff;
text-decoration:none;
padding:10px 15px;
display:block;
}
.nav > li {
float:left;
}
.nav li a:hover {
background-color:#4db4fa;
}
.nav li ul {
display:none;
position:absolute;
min-width:140px;
}
.nav li:hover > ul {
display:block;
}
.nav li ul li {
position:relative;
}
.nav li ul li ul {
right:-140px;
top:0px;
}
And this is the HTML structure I have:
<div class="row-2">
<nav> <a href="./index.php"><img class="logo" src="http://aavirtual.net/images/aanewlogo1.png"></a>
<ul class="nav">
<li><a href="index.php">Home Page</a>
</li>
<li><a href="./index_public.php?page=about_us">Sobre nosotros</a>
<ul>
<li><a href="#nuevos">Nuevos</a>
</li>
<li><a href="#reacondicionados">Reacondicionados</a>
</li>
<li><a href="#cilindrados">Cilindrados a medida</a>
</li>
<li><a href="#compra">Compra de Tanques</a>
</li>
</ul>
</li>
<li><a href="./index_public.php?page=pilots_public">Pilotos</a>
</li>
<li><a href="./index_public.php?page=fleet_public">Flota</a>
</li>
<li><a href="./index_public.php?page=contacts_form">Contacta</a>
</li>
</ul>
</nav>
</div>
The issue is that my dropdown menu appears behind another element, which has a slideshow. Due to this, the dropdown menu cannot be fully visible.
To resolve the issue, try searching for /Slider/ in your CSS and adjust the z-index or positioning accordingly.