-1

Tengo este tipo de menu:

 <div class="call">

    <a href="#"><p class="call-items" title="About">Hola</p></a>
    <a href="#"><p class="call-items" title="Home">Como</p></a>
    <a href="#"><p class="call-items" title="Something">Es</p></a>
    <a href="#"><p class="call-items" title="ANother">Enlace 1</p></a>
    <a href="#"><p class="call-items" title="Some">Enlace 2</p></a>
    <a href="#"><p class="call-items" title="Done"><i class="fa fa-github"></i></p></a>
    <p class="call-menu" title="Menu"><i class="fa fa-bars"></i></p>

</div>

quisiera que fuera como el de WIX que tiene iconos y que al deplegar aparecen sub menus como en la imagen

Menu Wix

1
  • 1
    Bienvenido a Stack Overflow en español, te sugiero que hagas el recorrido de bienvenida para aprender el funcionamiento del sitio y de paso ganes tu primera medalla, también es muy importante que leas Cómo preguntar para poder mejorar tu pregunta y que esta sea bien recibida por la comunidad
    – ElGerar
    el 2 jul. 2018 a las 5:39

1 respuesta 1

0

Para hacer submenús puedes meter listas (ul) dentro de items de listas (li), hacer que no esten desplegadas (display:none) y cuando pases el puntero en un item (li:hover) que se desplegue la lista anidada (ul{display:inline-block;}), aquí tienes un ejemplo de lo que te he dicho, espero que te sirva como base para conseguir lo que quieres.

header {
  background: black;
  color: white;
  width: 100%;
  margin-bottom:2em;
}
header ul {
  list-style: none;
}
header > ul > li {
  display: inline-block;
  width:25%;
}
header > ul > li a {
  display: block;
  font-size: 2em;
  padding: 0.5em;
}
header > ul li:hover > ul {
  display: inline-block;
}
header > ul li:hover {
  cursor: pointer;
  background: #585858;
}
header ul li ul {
  display: none;
  position: absolute;
  background: black;
  width: 15%;
}
header ul li ul li {
  display: block;
  font-size: 1em;
  padding: 0.5em 1em;
  position: relative;
}
<header>
  <ul>
    <li><a>A</a>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>4</li>
      </ul>
    </li>
    <li><a>B</a>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </li>
    <li><a>C</a>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </li>
  </ul>
</header>

1
  • y como puedo alinear el menu a la izquierda de manera fija o flotante
    – julk3772
    el 3 jul. 2018 a las 1:46

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.