html - 尝试获取到 "drop-up"的下拉菜单

body {
 background: url('nature.jpg') no-repeat;
 background-size: none;
 margin-left: 10%;
}

ul {
 margin: 0px;
 padding: 0px;
 list-style: none;
 font-family: arial;
}

ul li {
 float: left;
 width: 200px;
 height: 40px;
 background-color: black;
 opacity: .8;
 line-height: 40px;
 text-align: center;
 font-size: 20px;
 margin-top: 7800px;
 bottom: 100%;
}

ul li a {
 text-decoration: none;
 color: white;
 display: block;
}

ul li a:hover {
 background-color: green;
}

ul li ul li{
 display: none;
}

ul li:hover ul li {
 display: block;
}
body {
  background-image:url("hintergrundbild.png"),url("hg2.jpg");
  background-attachment: scroll,fixed;
  background-repeat:no-repeat,no-repeat;
}
html body {
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" type="text/css" href="style.css">
    <title>
      Motorräder
    </title>
    <meta charset="utf-8">
  </head>
  <body>
    <ul>
      <li id="navi1"><a href="index.html">Motorradarten</a>
      <ul>
        <li id="typen"><a href="kontakt.html">Chopper</a></li>
        <li id="typen"><a href="kontakt.html">Supersportler</a></li>
        <li id="typen"><a href="kontakt.html">Naked Bike</a></li>
        <li id="typen"><a href="kontakt.html">Tourer</a></li>
        <li id="typen"><a href="kontakt.html">Enduro</a></li>
      </ul></li>
      <li id="navi2"><a href="kontakt.html">Motorradmarken</a></li>
      <li id="navi3"><a href="kontakt.html">Gefahren & Sicherheit</a></li>
    </ul>
  </body>
</html>

大家好，我正在尝试制作一个带有“下拉”菜单的网站。下拉菜单正在工作，但我无法让它向上。背景图像有点像介绍，这就是为什么下拉菜单如此靠下的原因。当我将鼠标悬停在不同的菜单点上时，我还希望背景发生变化，这可能吗？我希望你们能帮助我，如果是的话谢谢大家的帮助!

最佳答案

尝试使用 transform: translateY(-100%); 到下拉列表

body {
  background: url('nature.jpg') no-repeat;
  background-size: none;
  margin-left: 10%;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  font: 13px Verdana;
}

ul li {
  float: left;
  width: 160px;
  height: 40px;
  background-color: black;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  margin-top: 700px;
  bottom: 100%;
  position: relative;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background-color: green;
}

ul li ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 160px;
  display: none;
  transform: translateY(-100%);
}

ul li ul li {
  margin: 0;
}

ul li:hover ul {
  display: block;
}

body {
  background-image: url("hintergrundbild.png"), url("hg2.jpg");
  background-attachment: scroll, fixed;
  background-repeat: no-repeat, no-repeat;
}

html body {
  padding: 0px;
  margin: 0px;
}

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" type="text/css" href="style.css">
  <title>
    Motorräder
  </title>
  <meta charset="utf-8">
</head>

<body>
  <ul>
    <li id="navi1"><a href="index.html">Motorradarten</a>
      <ul>
        <li id="typen"><a href="kontakt.html">Chopper</a></li>
        <li id="typen"><a href="kontakt.html">Supersportler</a></li>
        <li id="typen"><a href="kontakt.html">Naked Bike</a></li>
        <li id="typen"><a href="kontakt.html">Tourer</a></li>
        <li id="typen"><a href="kontakt.html">Enduro</a></li>
      </ul>
    </li>
    <li id="navi2"><a href="kontakt.html">Motorradmarken</a></li>
    <li id="navi3"><a href="kontakt.html">Gefahren & Sicherheit</a></li>
  </ul>
</body>

</html>

希望对您有所帮助!

关于html - 尝试获取到 "drop-up"的下拉菜单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48192880/

html - 尝试获取到 "drop-up"的下拉菜单

上一篇：javascript - 使用javascript在svg中设置动画半径

下一篇：CSS 验证 : "Parse Error: @keyframes"