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

Abrir en el editor Video Publica tu código

Recomendado

7 December 2024

Página de inicio de Matriz Roja

21 January 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 slowlogic9

Página de inicio de Matriz Roja

Código de Icono Social en 3D

HTML

CSS

JS

Recomendado

Un código de slowlogic9

Página de inicio de Matriz Roja

Código de Icono Social en 3D

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS