Barra di navigazione HTML con menu a discesa e stile

66 FunTechnology

Apri nell'Editor Pubblica il Tuo Codice

Barra di navigazione HTML con menu a discesa e stile

Consigliato

21 September 2024

Inserimento password Luce

19 November 2024

Mostra testo al passaggio del mouse

18 September 2024

Hacker Login (AGGIORNAMENTO) Edizione Turca

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>

Barra di navigazione HTML con menu a discesa e stile

Consigliato

Inserimento password Luce

Mostra testo al passaggio del mouse

Hacker Login (AGGIORNAMENTO) Edizione Turca

HTML

CSS

JS

Consigliato

Inserimento password Luce

Mostra testo al passaggio del mouse

Hacker Login (AGGIORNAMENTO) Edizione Turca

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS