HTML Menu with CSS

Question

HTML Menu with CSS

Navigation

#1 by (0 votes)

0

My menu is as follows:

<html>
<head>
    <title>Menu Desplegable</title>
    <style type="text/css">

        * {
            margin:0px;
            padding:0px;
        }

        #header {
            margin:auto;
            width:500px;
            font-family:Arial, Helvetica, sans-serif;
        }

        ul, ol {
            list-style:none;
        }

        .nav > li {
            float:left;
        }

        .nav li a {
            background-color:#000;
            color:#fff;
            text-decoration:none;
            padding:10px 12px;
            display:block;
        }

        .nav li a:hover {
            background-color:#434343;
        }

        .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;
        }

    </style>
</head>
<body>
    <div id="header">
        <ul class="nav">
            <li><a href="">...</a>
                <ul>
                    <li><a href="">Descargar</a></li>
                    <li><a href="">Play</a></li>
                </ul>
            </li>
        </ul>
    </div>
</body>

But I would like the menu to be shown as follows:

That is, by clicking on the three dots (...) the menu is shown above and not below, how can I modify my css to achieve it?

html css

asked by userNNNN 19.11.2018 в 15:26

source

1 answer

Fatal error: Call to a member function bind_param () on boolean What is the solution to all present, past and future NullPointerException errors?

score 0 · Accepted Answer

Instead of setting the top you set the bottom, something like this:

* {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  margin: auto;
  width: 500px;
}

ul,
ol {
  list-style: none;
}

.nav>li {
  float: left;
}

.nav li a {
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  display: block;
}

.nav li a:hover {
  background-color: #434343;
}

.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;
}

#main {
  clear: both;
  width: 100;
}


#footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

/*  modificaciones para footer */

#footer .nav li ul li ul {
  right: -140px;
  bottom: 0px;
}

#footer .nav li ul {
  bottom: 38px;
}

<html>

<head>
  <title>Menu Desplegable</title>
</head>

<body>
  <div id="header">
    <ul class="nav">
      <li><a href="">...</a>
        <ul>
          <li><a href="">Descargar</a></li>
          <li><a href="">Play</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="main">Cosas</div>
  <div id="footer">
    <ul class="nav">
      <li><a href="">...</a>
        <ul>
          <li><a href="">Descargar</a></li>
          <li><a href="">Play</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>

Version with clicks (we use a hidden checkbox)

* {
  margin: 0px;
  padding: 0px;
  font-family: Arial, Helvetica, sans-serif;
}

#header {
  margin: auto;
  width: 500px;
}

ul,
ol {
  list-style: none;
}

.nav>li {
  float: left;
}

.nav li label,
.nav li a {
  background-color: #000;
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  display: block;
  cursor: pointer;
}

.nav li a:hover {
  background-color: #434343;
}

.nav li ul {
  display: none;
  position: absolute;
  min-width: 140px;
}

.nav li input.showmore {
  display: none;
}

.nav li input.showmore:checked~ul {
  display: block;
}

.nav li ul li {
  position: relative;
}

.nav li ul li ul {
  right: -140px;
  top: 0px;
}

#main {
  clear: both;
  width: 100;
}

#footer {
  position: fixed;
  bottom: 0;
  left: 0;
}


/*  modificaciones para footer */

#footer .nav li ul li ul {
  right: -140px;
  bottom: 0px;
}

#footer .nav li ul {
  bottom: 38px;
}

<html>

<head>
  <title>Menu Desplegable</title>
</head>

<body>
  <div id="header">
    <ul class="nav">
      <li>
        <input type="checkbox" id="menu-top" class="showmore" />
        <label for="menu-top">...</label>
        <ul>
          <li><a href="">Descargar</a></li>
          <li><a href="">Play</a></li>
        </ul>
      </li>
    </ul>
  </div>
  <div id="main">Cosas</div>
  <div id="footer">
    <ul class="nav">
      <li>
        <input type="checkbox" id="menu-bottom" class="showmore" />
        <label for="menu-bottom">...</label>
        <ul>
          <li><a href="">Descargar</a></li>
          <li><a href="">Play</a></li>
        </ul>
      </li>
    </ul>
  </div>
</body>