Intentando arreglar una barra de navegación con un menú desplegable en la parte superior de la página

Question

Estoy tratando de agregar una barra de navegación a una aplicación web que estoy creando para una clase, y quería usar un menú desplegable en ella (demasiadas cosas para incluir para poner todo en orden) .

Quiero que la barra se fije en la parte superior de la página, pero cuando pongo position: fixed;, el menú desplegable deja de funcionar. ¿Hay alguna forma de evitar esto? ¿Estoy colocando el position: fixed; en el lugar equivocado o está en conflicto con el contenido desplegable que tiene position: absolute; tal vez ...?

(Soy muy nuevo en cosas web, así que si ve algo más que pueda cambiar / aprobar, ¡hágamelo saber! Consejo muy apreciado)

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  position: fixed;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<html>

<head>
  </br>
  </br>

  <ul>
    <li><a class="active" href="/homePageAgent">Home</a></li>
    <li class="dropdown">
      <a href="javascript:void(0)" class="dropbtn">View Pages</a>
      <div class="dropdown-content">
        <a href="/agentViewFlights">View Booked Flights</a>
        <a href="/agentTopCustomers">View Top Customers</a>
      </div>
    </li>
    <li style="float:right"><a href="/logout">Logout</a></li>
  </ul>
</head>

</html>

Básicamente, "Ver páginas" debería convertirse en un menú desplegable cuando se pasa el mouse por encima, y lo hace si elimino la "posición: fija"; línea, pero ... quiero que la posición sea fija.

javascript html css

1

jho98 10 may. 2019 a las 12:18

Answer 1

Pon tu navegación en una capa. Y hacer esta capa con posición fija.

.navbar-top {
  margin: 0;
  padding: 0;
  width: 100%;
  top: 0;
  position: fixed;
}

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  /*position: fixed;*/
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<html>

<head>
</head>

<body>
  <div class="navbar-top">
    <ul>
      <li><a class="active" href="/homePageAgent">Home</a></li>
      <li class="dropdown">
        <a href="javascript:void(0)" class="dropbtn">View Pages</a>
        <div class="dropdown-content">
          <a href="/agentViewFlights">View Booked Flights</a>
          <a href="/agentTopCustomers">View Top Customers</a>
        </div>
      </li>
      <li style="float:right"><a href="/logout">Logout</a></li>
    </ul>
  </div>
</body>

</html>

2

Fozoro 11 may. 2019 a las 07:52

Answer 2

No debe solicitar el position:fixed en el UL
Puede usar un div para deformar el UL y aplicarle la posición fija.
Aquí hay una manera de lograr esto (demostración en vivo ):

.mainheader {
  height: 25px;
  position: fixed;
  display: block;
  z-index: 10;
  background: #333;
  width: 100%;
  font-size: 14px;
  top: 0;
  font-family: Calibri;
}

.nav {
  width: 100%;
  height: 25px;
  background: #333;
  margin: 0 auto;
}

ul {
  list-style-type: none;
  margin: 0;
  top: 0;
  width: 100%;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover,
.dropdown:hover .dropbtn {
  background-color: #111;
}

li.dropdown {
  display: inline-block;
}

.active {
  background-color: #4CAF50;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.dropdown-content a:hover {
  background-color: #f1f1f1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

<html>

<head>
</head>

<body>
  <div class="mainheader">
    <div class="nav">
      <ul>
        <li>
          <a class="active" href="/homePageAgent">Home
                </a>
        </li>
        <li class="dropdown">
          <a href="javascript:void(0)" class="dropbtn">View Pages
                </a>
          <div class="dropdown-content">
            <a href="/agentViewFlights">View Booked Flights
                  </a>
            <a href="/agentTopCustomers">View Top Customers
                  </a>
          </div>
        </li>
        <li style="float:right">
          <a href="/logout">Logout
                </a>
        </li>
      </ul>
    </div>
  </div>
</body>

</html>

0

Fozoro 11 may. 2019 a las 07:54

Answer 3

Puede eliminar ul {overflow: hidden;}

0

Constantin Chirila 10 may. 2019 a las 09:48

Intentando arreglar una barra de navegación con un menú desplegable en la parte superior de la página

3 respuestas

Preguntas relacionadas

Nuevas preguntas

javascript