下拉菜单确实有效，但不是我想要的方式？

Question

现在，它可以工作，但不是我想要的方式。我想要 dropbox 作为下拉列表的宽度。并且仅在其下方。不是其他人。

另外，指出我所犯的错误。我不认为我的代码是完美的。我从 w3schools.com 那里学到了东西，我想和他们一起做不同的事情。另一种方法。

 .bar {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 100%;
  overflow: hidden;
}

a {
  text-decoration: none;
}

.bar li > a {
  display: block;
  float: left;
  width: 33.33%;
  box-sizing: border-box;
  background: lightskyblue;
  text-align: center;
  padding: 15px;
  border-left: 1px solid black;
}

.dd {
  border-right: 1px solid black;
}

.bar li > a:hover {
  background: deepskyblue;
}

.dd_content {
  display: none;
  z-index: 1;
}

.dd_content a  {
  clear: both;
  display: block;
  background: rgba(0, 0, 255, 0.2);
  padding: 10px 20px;
  min-width: 200px;
}

.dd_content a:hover {
  background: #aaa;
}

.dropdown:hover .dd_content {
  display: block;
}

<body>
  <ul class="bar">
    <li><a href="#Home">Home</a></li>
    <li><a href="#News">News</a></li>
    <li class="dropdown">
      <a href="#Dropdown" class="dd">Dropdown</a>
      <div class="dd_content">
        <a href="#link1">Link 1</a>
        <a href="#link2">Link 2</a>
        <a href="#link3">Link 3</a>
      </div>
    </li>
  </ul>
</body>

Answer 1

一个简单的方法是指定下拉菜单的宽度 <li>。当下拉菜单变得可见时，它将调整整个东西的大小。它有 8 个字符，所以请在 .dropdown.

中尝试 max-width: 8ch;

Answer 2

按照你的解释试试这个对我有用

只需将代码片段放在给定的 blew dd_content class

width: 33.33%;float: right;

完整代码

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <ul class="bar">
        <li><a href="#Home">Home</a></li>
        <li><a href="#News">News</a></li>
        <li class="dropdown"><a href="#Dropdown" class="dd">Dropdown</a>
            <div class="dd_content">
                <a href="#link1">Link 1</a>
                <a href="#link2">Link 2</a>
                <a href="#link3">Link 3</a>
            </div>
        </li>
    </ul>
    <style>
        .bar {
            list-style-type: none;
            padding: 0;
            margin: 0;

            width: 100%;
            overflow: hidden;
        }

        a {
            text-decoration: none;
        }

        .bar li>a {
            display: block;
            float: left;
            width: 33.33%;
            box-sizing: border-box;
            background: lightskyblue;
            text-align: center;
            padding: 15px;
            border-left: 1px solid black;
        }

        .dd {
            border-right: 1px solid black;
        }

        .bar li>a:hover {
            background: deepskyblue;
        }

        .dd_content {
            display: none;
            z-index: 1;
            width: 33.33%;
            float: right;
        }

        .dd_content a {
            clear: both;
            display: block;
            background: rgba(0, 0, 255, 0.2);
            padding: 10px 20px;
            min-width: 200px;
        }

        .dd_content a:hover {
            background: #aaa;
        }

        .dropdown:hover .dd_content {
            display: block;
        }
    </style>
</body>

</html>

下拉菜单确实有效，但不是我想要的方式？

dropdown does work but not the way I want?

html

css

drop-down-menu