1

Tengo un menú desplegable en horizontal y todo funciona bien al parecer, solo hay un pequeño problema, cuando paso el mouse encima de una opción desplegable funciona a la perfección, pero si lo paso por debajo del menú tambié se despliega y no quiero eso porque se supone que solamente se despliegue cuando paso el mouse sobre la opción, no fuera de la opción. Espero que me puedan ayudar con esto porfavor, mi área más que todo es Backend, asi que con este ejercicio de CSS ya tope jajaja. Muchisimas gracias y que tenga un buen dia! Por cierto las variables $dark-green y $superate-green son porque estoy usando SASS.

//CSS
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap');
$dark-green: #039403;
$superate-green:#00c800;

* {
    margin: 0;
    padding: 0;
}

.navbar{
    width: 90%;
    max-width: 1000px;
    height: 60px;
    position: relative;
    background-color: $superate-green;
    display: flex;
    left: 500px;
    justify-content: flex-start;
    font-family: "Open Sans";
}

.navbar ul{
    list-style: none;
    display: flex;
}

.navbar ul li a{
    display: block;
    padding: 20px;
    color: white;
    font-weight: bolder;
    text-decoration: none;
}

.navbar ul ul{
    display: block;
    position: absolute;
    top: 60px;
    background-color: $superate-green;
    transform: translateX(60%);
    opacity: 0;
    transition: all .6s;
}

.navbar ul li a span{
    transition: all .6s;
}

.navbar ul li:hover{
    background-color: $dark-green;
}

.navbar ul li a:hover span{
    transform: translateY(10px);
    visibility: 1;
}

.navbar>ul>li:hover ul{
    opacity: 1;
    transform: translateX(0%);
}

.active{
    background-color:$dark-green;
}


//HTML

<nav class="navbar">
    <ul>
        <li><a href="#">Inicio</a></li>
        <li><a href="#">SUBMENU 1 &nbsp <span class="fa fa-angle-down"></span></a>
            <ul>
                <li><a href="#">Opcion 1</a></li>
                <li><a href="#">Opcion 2</a></li>
                <li><a href="#">Opcion 3</a></li>
                <li><a href="#">Opcion 4</a></li>
                <li><a href="#">Opcion 5</a></li>
            </ul>
        </li>
        <li><a href="#">SUBMENU 2 &nbsp <span class="fa fa-angle-down"></span></a>
            <ul>
                <li><a href="#">Opcion 1</a></li>
                <li><a href="#">Opcion 2</a></li>
                <li><a href="#"></a>Opcion 3</li>
            </ul>
        </li>
        <li><a href="#">SUBMENU3 &nbsp <span class="fa fa-angle-down"></span></a>
            <ul>
                <li><a href="#">Opcion 1</a></li>
                <li><a href="#">Opcion 2</a></li>
                <li><a href="#">Opcion 3</a></li>
                <li><a href="#">Opcion 4</a></li>
                <li><a href="#">Opcion 5</a></li>
                <li><a href="#">Opcion 6</a></li>
                <li><a href="#">Opcion 7</a></li>
                <li><a href="#">Opcion 8</a></li>
                <li><a href="#">Opcion 9</a></li>
                <li><a href="#">Opcion 10</a>
                </li>
            </ul>
        </li>
        <li><a href="#">Nuestros</a></li>
        <li><a href="#">Contáctanos</a></li>
    </ul>
</nav>

1 respuesta 1

0

En el código utiliza el hover encima de los a:

.navbar  ul  li a:hover + ul {
  opacity: 1;
  transform: translateX(0%);
}

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap");
* {
  margin: 0;
  padding: 0;
}

.navbar {
  width: 90%;
  max-width: 1000px;
  height: 60px;
  position: relative;
  background-color: #00c800;
  display: flex;
  /*left: 500px;*/
  justify-content: flex-start;
  font-family: "Open Sans";
  font-size:12px;
}

.navbar ul {
  list-style: none;
  display: flex;
}

.navbar ul li a {
  display: block;
  height:100%;
  padding: 20px;box-sizing:border-box;
  color: white;
  font-weight: bolder;
  text-decoration: none;
}

.navbar ul li ul {
  display: block;
  position: absolute;
  top: 60px;
  background-color: #00c800;
  transform: translateX(60%);
  opacity: 0;
  transition: all .6s;
}


.navbar ul li a:hover {
  background-color: #039403;
}

.navbar  ul  li a:hover + ul {
  opacity: 1;
  transform: translateX(0%);
}

.active {
  background-color: #039403;
}
<nav class="navbar">
  <ul>
    <li><a href="#">Inicio</a></li>
    <li><a href="#">SUBMENU 1 &nbsp <span class="fa fa-angle-down"></span></a>
      <ul>
        <li><a href="#">Opcion 1</a></li>
        <li><a href="#">Opcion 2</a></li>
        <li><a href="#">Opcion 3</a></li>
        <li><a href="#">Opcion 4</a></li>
        <li><a href="#">Opcion 5</a></li>
      </ul>
    </li>
    <li><a href="#">SUBMENU 2 &nbsp <span class="fa fa-angle-down"></span></a>
      <ul>
        <li><a href="#">Opcion 1</a></li>
        <li><a href="#">Opcion 2</a></li>
        <li><a href="#"></a>Opcion 3</li>
      </ul>
    </li>
    <li><a href="#">SUBMENU3 &nbsp <span class="fa fa-angle-down"></span></a>
      <ul>
        <li><a href="#">Opcion 1</a></li>
        <li><a href="#">Opcion 2</a></li>
        <li><a href="#">Opcion 3</a></li>
        <li><a href="#">Opcion 4</a></li>
        <li><a href="#">Opcion 5</a></li>
        <li><a href="#">Opcion 6</a></li>
        <li><a href="#">Opcion 7</a></li>
        <li><a href="#">Opcion 8</a></li>
        <li><a href="#">Opcion 9</a></li>
        <li><a href="#">Opcion 10</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Nuestros</a></li>
    <li><a href="#">Contáctanos</a></li>
  </ul>
</nav>

1
  • 1
    Muchisimas gracias, me funcionó a la perfección el 13 jul. 2020 a las 2:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.