Barre de navigation HTML avec menu déroulant et style

936 FunTechnology

Ouvrir dans l'éditeur Publiez votre code

Barre de navigation HTML avec menu déroulant et style

Recommandé

10 May 2026

Formulaire HTML d'envoi de pièces TikTok

26 August 2025

Site Web de portfolio turc : HTML, CSS, JS, Tailwind

21 September 2024

Menu mobile

HTML

<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>

CSS