Barra de navegación HTML con menú desplegable y estilo

Abrir en el editor Publica tu código

Recomendado

27 June 2025

Formulario de inicio de sesión animado

9 September 2024

<body>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href='https://fonts.googleapis.com/css?family=Ubuntu Sans' rel='stylesheet'>
<style>
p {
  font-size:30;
  color: white;
  font-family: Ubuntu Sans;
  position: absolute;
  top: 16%;
  left: 3%;
  right: 40%; 
  
}
p{text-align: left;}

body{
  background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0)), url('https://photojournal.jpl.nasa.gov/jpeg/PIA24466.jpg');
  background-repeat: no repeat;
  background-attachment: fixed;  
  background-size: cover;
}
ul {
  list-style-type: none;
  padding: 0;
  margin:0px;
  overflow: hidden;
  background-color: black;
  font-family: Ubuntu Sans;
  position: fixed;
  top: 0;
  width: 100%

}
li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 16px 18px;
  text-decoration: none;
  font-size: 15px;
}
li a:hover:not(.active) {
  background-color: #333;
  border-radius: 100px;
}
.active {
  background-color: black;
}
.dropdown {
  display: inline-block;
  position: absolute;
  top: 8px;
  right: 16px;  
}
.dropdown-content {
  display: none;
  position: 800% 300%;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 50px 50px;
  z-index: 1;
  border-radius: 20px;
  overflow-x: hidden;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
}
.dropdown:hover .dropdown-content {
  display: block;
  cursor:help;
}
#Drop{color:Tomato;}
#Drop:hover{cursor:help;}
#Drop{font-size: 20px;}
#Drop{font-family: Ubuntu Sans;}
#vocab{width: 90px;}
</style>
<body>
<ul>
  <li><a class="" href="Ingenuity on mars.html">Home</a></li>
  <li><a href="How does Ingenuity work.html">How does it work?</a></li>
  <li><a href="Limit.html">Limiting engineering factors</a></li>
  <li><a href="why.html">Why?</a></li>
  <li><a href="Next.html">Whats Next?</a></li>
</ul>
    <div class="dropdown">
  <span id = "Drop">Vocabulary ⯆</span>
  <div class="dropdown-content">
  <ol id = "vocab">
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  <li>...</li>
  </ol>
  </div>
</div>
</body>

Barra de navegación HTML con menú desplegable y estilo

Recomendado

Un código de Mete

Formulario de inicio de sesión animado

Tres en raya

HTML

CSS

JS

Recomendado

Un código de Mete

Formulario de inicio de sesión animado

Tres en raya

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS