I am struggling to figure out why my drop-down menu is not appearing on my website. Even after removing the 'hidden' property, it still doesn't look right when I hover over the 'servicios' tab. I can't seem to pinpoint the issue causing it to not show up.
{
margin: 0;
padding: 0;
font-family: sans-serif;
}
.hero{
height: 100vh;
background-image: linear-gradient(rgba(0,0,0,0.8), rgba(0,0,0,0.6)), url(bp.jpg);
background-position: center;
background-size: cover;
overflow-x: hidden;
position: relative;
}
.nav_bar{
display: flex;
padding: 40px 120px;
}
.nav-logo img{
width: 135px;
}
.nav_links{
flex: 1;
}
.nav_links ul{
margin-left: 50px;
display: inline;
list-style: none;
}
.nav_links ul li{
list-style: none;
display: inline-block;
padding: 8px 25px;
}
.nav_links ul a{
color: #fff;
text-decoration: none;
font-size: 18px;
}
.nav_links ul li::after{
content: '';
width: 0;
height: 2px;
background: red;
display: block;
margin: auto;
transition: 0.45s;
}
.nav_links ul li:hover::after{
width: 100%;
}
.btn{
padding: 10px 10px;
border: 0;
background: red;
font-weight: bold;
cursor: pointer;
}
.nav_links .btn{
float: center;
}
.frase{
margin: 100px 130px;
color: #fff;
}
.frase h1{
font-size: 56px;
margin-bottom: 30px;
}
.vertical_bar{
height: 100%;
background: red;
top: 0;
left: 0;
position: absolute;
}
.icono_busqueda{
height: 60%;
width: 80px;
}
.icono_busqueda .fa{
margin: 45px 23px;
display: block;
color: white;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 60%;
width: 80px;
}
.iconos_sociales .fa{
margin: 45px 23px;
display: block;
color:black;
font-size: 30px;
cursor: pointer;
}
.iconos_sociales{
height: 35%;
width: 80px;
background: white;
text-align: center;
padding-top: 27%;
bottom: 0;
position: absolute;
}
.iconos_sociales .fa{
margin: 15px 15px;
display: block;
padding: 8px;
border: 1px solid black;
border-radius: 0;
cursor: pointer;
}
*{
margin: 0;
padding: 0;
}
.sub_menu_ser
{
display: none;
}
.nav_links ul li:hover .sub_menu_ser
{
display: block;
position: absolute;
background: red;
margin-top: 15px;
margin-left: -15px;
}
.nav_links ul li:hover .sub_menu_ser ul
{
display: block;
margin: 10px;
}
.nav_links ul li:hover .sub_menu_ser li
{
width: 150px;
padding: 10px;
border-bottom: 1px dotted white;
background: transparent;
border-radius: 0;
text-align: left;
}
:last-child
{
border-bottom: none;
}
.nav_links ul li:hover .sub_menu_ser ul li a:hover
{
color: red;
}
<html>
<head>
<title> Animal Care</title>
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="hero">
<div class="nav_bar">
<div class="nav_logo">
<img src="logo.png">
</div>
<div class="nav_links">
<ul>
<a href="#"><li>Sobre Nosotros</li></a>
<a href="#"><li>Servicios</li></a>
<div class="sub_menu_ser">
<ul>
<li><a href="#">Peluqueria</a></li>
<li><a href="#">Veterinario</a></li>
<li><a href="#">Cirugia</a></li>
<li><a href="#">Limpieza</a></li>
</ul>
</div>
<a href="#"><li>Contacto</li></a>
</ul>
<button type="button" class="btn">Registrarse</button>
</div>
<div class="frase">
<h1>Cuidando a Nuestros <br> Mas Queridos</h1>
<button type="button" class="btn">Explorar</button>
</div>
<div class="vertical_bar">
<div class="icono_busqueda">
<i class="fa fa-search"></i>
<i class="fa fa-list"></i>
</div>
<div class="iconos_sociales">
<i class="fa fa-facebook"></i>
<i class="fa fa-instagram"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-envelope-o"></i>
</div>
</div>
</div>
</body>
</html>