html - 粘性下拉菜单。（溢出）

Question

我想要一个粘性导航栏，包括下拉菜单。但是，当我将鼠标悬停在下拉菜单上时，它没有显示。

如果我删除溢出：隐藏；在无序列表中，当我向下滚动时，导航栏设法停留在顶部，但是导航栏是不可见的，只有当我将鼠标悬停在它上面时才会显示（不包括主页按钮）。如果我只删除位置：粘性；它也有效，但我希望它具有粘性。

ul {
     list-style-type: none;
     margin: 0;
     padding: 0;
     background-color: grey;
     position:sticky;
     position: -webkit-sticky; /* Safari */
     overflow: hidden;
     top: 0;
     font-size: 20px;
     width: 100%;
}
li {
  float: left;
}
li a, .dropbtn {
   display: inline-block;
   color: white;
   text-align: center;
   padding: 14px 20px;
   text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
     background-color: darkgrey;
}
li.dropdown {
    display: inline-block;
}    
.active {
    background-color: lightblue;
}
.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;
}

<ul>
  <li>
    <a href="#home" class="active">Home</a>
  </li>
  <li class="dropdown">
    <a href="#simulationen" class="dropbtn">Simulationen</a>
    <div class="dropdown-content">
      <a href="#">Pendel</a>
      <a href="#">Hebel</a>
    </div>
  </li>
  <li><a href="#übungsaufgaben">Übungsaufgaben</a></li>
  <li style ="float:right"><a href="#links">Links</a></li>
</ul>

我希望导航栏是粘性的并且能够放下子导航，但是无论哪种方式解决问题，都会出现一个新的问题。

标签： htmlcss

Answer 1

我想你正在寻找的是position: fixed;

ul {
 list-style-type: none;
 margin: 0;
 padding: 0;
 background-color: grey;
 position: fixed;
 overflow: hidden;
 font-size: 20px;
 width: 100%;
 top: 0;
 left: 0;
}

li {
 float: left;
   }

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

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

li.dropdown {
 display: inline-block;
}

.active {
 background-color: lightblue;
}

.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;
                                 
}

<ul>
    <li><a href="#home" class="active">Home</a></li>

    <li class="dropdown">
    <a href="#simulationen" class="dropbtn">Simulationen</a>
    <div class="dropdown-content">
      <a href="#">Pendel</a>
      <a href="#">Hebel</a>
    </div>
    </li>

    <li><a href="#übungsaufgaben">Übungsaufgaben</a></li>
    <li style ="float:right"><a href="#links">Links</a></li>
 </ul>
 <div id="scroll"><!-- only here added this to demonstrate the bar being sticky when scrolling -->
  Spicy jalapeno bacon ipsum dolor amet sunt occaecat shoulder spare ribs turducken pastrami. Fugiat est swine, beef ribs alcatra corned beef ball tip do eu chicken labore proident. Tail sed excepteur tempor, ut beef ribs shank eu beef swine laborum veniam. Corned beef pork chop incididunt in, buffalo spare ribs t-bone meatloaf short ribs tail. Frankfurter ea pariatur, cillum sunt lorem sint aliqua tongue pork belly laboris. Deserunt culpa tail short ribs ribeye, enim in minim ad ball tip andouille non tempor est.

Sirloin et shoulder, rump do tenderloin frankfurter turkey incididunt velit kevin non tri-tip magna tempor. Sirloin non sunt pork chop sausage, kevin ribeye proident pastrami. Anim ipsum et elit in spare ribs, aliqua pancetta t-bone meatloaf strip steak est salami tail cillum. Consequat sed aliqua, short loin proident ut brisket pastrami turkey nisi sausage commodo pork loin. Turducken incididunt meatball minim beef ribs tail. Duis shank ribeye id jerky.

In enim cillum qui ut exercitation filet mignon. Aliquip labore meatball sint rump mollit doner prosciutto ham deserunt shank hamburger jowl. Culpa ham hamburger, jowl short ribs pastrami laborum t-bone brisket duis eiusmod ex. Turkey hamburger pork loin dolore. Frankfurter ipsum dolor, tail prosciutto in pastrami pork chop tenderloin non sed lorem jerky proident drumstick. Laboris cupidatat bacon landjaeger pork belly swine, ground round sausage aliquip fatback reprehenderit pig.

Qui non magna, laboris pig buffalo nostrud beef. Beef ribs sunt enim pork belly, officia turkey andouille ullamco. Est fugiat anim capicola, labore pork ut ad. In tenderloin in, eiusmod filet mignon aliquip esse pork loin ut ea swine.

Strip steak pancetta eiusmod, leberkas sirloin ham hock spare ribs tongue quis. Duis deserunt sirloin, flank ex nostrud voluptate in in filet mignon pancetta pariatur. Boudin sed aute cow, ribeye beef ribs aliqua ex prosciutto labore. Chicken lorem quis bresaola picanha nisi, adipisicing shoulder ea tri-tip. Aliqua tri-tip eiusmod brisket beef ham chicken biltong tail strip steak pancetta fatback kielbasa. Culpa chuck aliquip tail kielbasa exercitation, laboris chicken.

Picanha in t-bone venison, laborum irure boudin et voluptate capicola beef ribs. Nulla prosciutto ham hock jowl. Voluptate esse swine short loin tri-tip. Beef ribs tenderloin velit ut dolore jerky minim officia pork bresaola shankle chicken. Alcatra flank et short ribs buffalo ex, strip steak shankle ut excepteur tri-tip pork.

Venison spare ribs proident, cillum et exercitation shankle labore. Velit pancetta veniam, swine kevin strip steak dolor pastrami capicola ullamco ut jowl id elit pariatur. Pancetta id landjaeger, beef ribs nisi pork loin officia in rump tail brisket. Chuck laborum alcatra, ribeye in doner ut cupidatat id. Venison picanha nostrud porchetta deserunt minim capicola occaecat ullamco commodo. Ut eiusmod tail ground round. Jerky occaecat doner et ut officia ut ham hock sint chicken pastrami laborum.

Ea tempor ipsum sed, est meatball labore excepteur. Kielbasa spare ribs porchetta brisket deserunt. Ipsum minim irure beef beef ribs qui, excepteur tongue. Salami magna biltong laboris, swine chuck dolore. Buffalo ad venison do pork loin. Veniam venison dolore ipsum. Capicola consectetur beef ribs anim aliqua, ball tip ullamco prosciutto sausage tongue shank.

Minim shank dolor dolore mollit. Filet mignon nostrud sint, nisi porchetta ut consequat meatloaf in laborum qui aliquip. Porchetta ball tip dolore, lorem tri-tip pariatur brisket duis cillum et eiusmod rump biltong. Pork loin enim pork shankle cillum salami ground round chuck elit nisi lorem sed. Ipsum flank shank, minim tail pork belly tri-tip boudin et sirloin in. Turducken anim fugiat pork, turkey sausage corned beef excepteur bacon kielbasa frankfurter. Meatball tri-tip proident, kielbasa quis ham hock shoulder bacon flank nostrud pariatur chuck in.

Laborum spare ribs prosciutto deserunt fatback mollit proident sint, short loin elit adipisicing biltong. Eiusmod ut fatback t-bone aliquip adipisicing ipsum id beef. Deserunt chuck dolor proident occaecat venison shankle landjaeger aliqua leberkas. Meatball salami pancetta, consequat pig brisket eu reprehenderit dolor sed lorem. Porchetta spare ribs magna eiusmod leberkas jerky. Voluptate labore kevin eiusmod biltong doner aute elit ipsum nisi est deserunt.

Capicola proident velit, spare ribs pork loin pastrami cupidatat exercitation brisket adipisicing magna pork belly ground round salami elit. Turkey in consequat deserunt aute qui. Nulla in tempor leberkas. Lorem capicola in, mollit aute short ribs voluptate.

Commodo in beef ribs ground round. Consectetur eiusmod laborum, rump hamburger alcatra pork loin ground round chicken ex ad nulla proident venison. Lorem brisket pancetta venison pastrami corned beef, hamburger pork proident fatback mollit short ribs tenderloin. Short ribs turducken do, eu pork loin ipsum irure. Kielbasa frankfurter consectetur short loin, voluptate doner sausage tail pork belly pork nisi dolore ribeye id ut. Short ribs reprehenderit pariatur tail cupim boudin dolore. Kevin capicola flank minim filet mignon rump.

Enim nulla dolor kielbasa, eu chuck ad rump in. Alcatra elit labore, ut prosciutto pork loin ex corned beef. Shankle beef ribs tail, chuck buffalo turducken ut venison ex voluptate filet mignon occaecat short loin. T-bone voluptate leberkas ex, chicken ad ea irure pig buffalo short loin beef kielbasa. Laboris incididunt pariatur, aute ipsum pig landjaeger quis brisket capicola swine cillum ut. Rump eiusmod adipisicing, pariatur tongue aliquip tempor prosciutto chicken ut sunt ut porchetta beef.

Aliqua fatback rump, dolore est enim adipisicing ground round cillum tongue ad. Ut turkey eiusmod lorem nulla corned beef. Swine laborum sunt, short loin fugiat incididunt ribeye pancetta picanha tail elit corned beef shank ground round. Excepteur corned beef ham hock, in in pork belly meatloaf. Enim ball tip consequat salami ut esse.

Sausage mollit sunt fugiat. Swine strip steak lorem alcatra officia duis biltong pancetta capicola tongue meatloaf sed t-bone exercitation porchetta. Cow nostrud meatball burgdoggen, turkey cupidatat officia excepteur eu aliqua. Eiusmod ham minim sausage flank chuck, deserunt adipisicing tail fatback.

Hamburger in esse chuck kielbasa qui ut consectetur laborum pork belly minim ea. Mollit pork belly lorem ex dolore est pork sint in. Leberkas nulla chuck kevin, consectetur magna voluptate sausage ribeye tongue esse. Anim kielbasa ipsum boudin spare ribs ex, flank aliquip short loin rump sint andouille quis nisi minim. Ipsum tail ham cupidatat, pork chop doner bacon frankfurter adipisicing cow boudin ham hock turducken. Consectetur shoulder ut pork chuck bacon turducken kevin sed doner tongue lorem ut. Tongue frankfurter jowl occaecat enim ut deserunt ut nisi sirloin shoulder labore consectetur aute adipisicing.

Magna quis irure, strip steak duis fugiat tongue beef tri-tip pork brisket beef ribs drumstick. Sunt commodo frankfurter tempor prosciutto labore. Ribeye picanha shoulder do adipisicing ham hock irure consequat. Consectetur tri-tip doner, ut dolor irure occaecat corned beef strip steak mollit drumstick tail veniam shankle ullamco. Spare ribs nisi in incididunt pork chuck.

Aliquip consectetur ad filet mignon beef ribs incididunt burgdoggen bacon doner porchetta. Aute turkey buffalo, spare ribs filet mignon pig excepteur alcatra. Tenderloin lorem dolor fatback. In consequat irure, porchetta fatback meatball venison. Ut landjaeger irure, ut meatball nisi ex consequat chicken sausage tempor nostrud sint.
 </div>