How can I make a floating menu like in Wix

Question

How can I make a floating menu like in Wix

Navigation

#1 by (0 votes)

-1

I have this kind of 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>

I would like it to be like the one on WIX that has icons and that when displaying, sub menus appear as in the image

responsive menu

asked by julk3772 02.07.2018 в 04:02

source

1 answer

Error "c # object reference not set as instance of an object" obtain customer information through asp.net

score 0 · Answer 1

To make submenus you can put lists (ul) in list items (li), make them not displayed (display: none) and when you pass the pointer in an item (li: hover) the nested list is displayed (ul {display: inline-block;}), here is an example of what I have told you, I hope it will serve as a basis to get what you want.

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>