Question

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>

大家好，我正在尝试使用“下拉”菜单创建一个网站。下拉工作正在进行，但我不能让它上升。背景图像类似于介绍，这就是下拉菜单远远落后的原因。当我将鼠标悬停在不同的菜单上时，我还希望背景发生变化，这可能吗？我希望你们可以帮助我，如果是的话谢谢大家的帮助！

Answer 1

尝试将 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>

我希望这会对你有所帮助！

试图让一个下拉菜单“下拉”

1 个答案: