Question

我是CSS的新手。请有人帮我理解我在这里做错了什么。我特别关注下拉菜单的背景，它似乎从父级ul继承。但我想创建一个输出，其中背景独立于父ul。我的输出是这样的： Output 而预期产量是： Expected output 我正在尝试从w3schools网站学习创建CSS下拉列表。代码：

＆＃13;

    .navbar {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
    }

    li {
        float: left;
    }

    li a, .dropdown-button {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }

    .navbar li:hover a,  .navbar .dropdown .dropdown-button {
        background-color: red;
    }

    .navbar .dropdown {
        display: inline-block;
    }

    .navbar .dropdown .dropdown-content {
        z-index: 1;
        background-color: grey;
        color: orange;
        display: none;
        width: 200px;
    }

    .navbar .dropdown .dropdown-content a {
        display: block;
        padding: 15px 20px;
        background-color: white;
        color: black;
        text-align: center;
        vertical-align: center;
    }

    .navbar .dropdown .dropdown-content a:hover {
        background-color: red;
    }

    .navbar .dropdown:hover .dropdown-content {
        display: block;
    }

    .page-content {
        display: inline-block;
    }

＆＃13;

<ul class="navbar">
    <li><a href="www.google.com" title="Google">Google</a></li>
    <li><a href="www.facebook.com" title="Facebook">Facebook</a></li>
    <li><a href="www.careerlauncher.com" title="Career Launcher">Career Launcher</a></li>
    <li><a href="www.cleducate.in" title="CL Educate">CL Educate</a></li>
    <li class="dropdown">
        <a class="dropdown-button" href="www.more.com" title="More...">More...</a>
        <div class="dropdown-content">
            <a href="www.1.com" title="1">1</a>
            <a href="www.2.com" title="2">2</a>
            <a href="www.3.com" title="3">3</a>
            <a href="www.4.com" title="4">4</a>
        </div>
    </li>
</ul>

＆＃13;

Answer 1

您可以在下拉菜单中添加以下css：

请参阅Fiddle Demo

CSS：

.navbar .dropdown:hover .dropdown-content {
        display: block;
        position: absolute;
        box-shadow: 0px 1px 2px 0px #c5c5c5;
    }

Answer 2

您需要从文档流程中删除div - 使用position: absolute

More info

.navbar {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
}

li a,
.dropdown-button {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

.navbar li:hover a,
.navbar .dropdown .dropdown-button {
  background-color: red;
}

.navbar .dropdown {
  display: inline-block;
}

.navbar .dropdown .dropdown-content {
  z-index: 1;
  background-color: grey;
  color: orange;
  display: none;
  width: 200px;
  position: absolute;
  box-shadow: -2px 3px 7px #BBB;
}

.navbar .dropdown .dropdown-content a {
  display: block;
  padding: 15px 20px;
  background-color: white;
  color: black;
  text-align: center;
  vertical-align: center;
}

.navbar .dropdown .dropdown-content a:hover {
  background-color: red;
}

.navbar .dropdown:hover .dropdown-content {
  display: block;
}

.page-content {
  display: inline-block;
}

<ul class="navbar">
  <li><a href="www.google.com" title="Google">Google</a></li>
  <li><a href="www.facebook.com" title="Facebook">Facebook</a></li>
  <li><a href="www.careerlauncher.com" title="Career Launcher">Career Launcher</a></li>
  <li><a href="www.cleducate.in" title="CL Educate">CL Educate</a></li>
  <li class="dropdown">
    <a class="dropdown-button" href="www.more.com" title="More...">More...</a>
    <div class="dropdown-content">
      <a href="www.1.com" title="1">1</a>
      <a href="www.2.com" title="2">2</a>
      <a href="www.3.com" title="3">3</a>
      <a href="www.4.com" title="4">4</a>
    </div>
  </li>
</ul>

Answer 3

.navbar .dropdown .dropdown-content {
z-index: 1;
background-color: grey;
color: orange;
display: none;
width: 200px;
}

向此添加position: absolute并瞧瞧。

Answer 4

在.dropdown-content中使用position absolute，在.dropdown中使用position relative。下面是css。

.navbar .dropdown {
    display: inline-block;
    position: relative;
}

.navbar .dropdown .dropdown-content {
    z-index: 1;
    background-color: grey;
    color: orange;
    display: none;
    width: 200px;
    position: absolute;
    left: 0px;
    top: 100%;
}

无法从下拉菜单中删除背景

4 个答案: