无法更改下拉元素的宽度答案

【问题标题】：Unable to alter width of dropdown element无法更改下拉元素的宽度
【发布时间】：2023-03-14 02:20:02
【问题描述】：

我的目的是制作一个顶部导航栏，其中列表项PROJECTS 应该是一个下拉菜单。到目前为止，下拉菜单正在工作，但它需要与父元素一样多的宽度。我想在不更改格式属性的情况下将下拉内容与导航项分离，以便它占用其项目所需的空间，并且也位于 PROJECTS 的正下方。

我的代码：

body{
  margin: 0;
  padding: 0;
}
nav ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  background-color: #666666;
  position: fixed;
  top: 0px;
}

nav li{
  float: left;
}
nav li a{
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  padding: 15px;
  display: block;
}
nav li a:hover:not(.active){
  background-color: #444;
}
nav li a.active{
  background-color: rgba(0, 150, 0, 1);
}

main{
  padding-top: 30px;
}
.dropdown_content{
  display: none;
  width: auto;
}
.dropbtn:hover .dropdown_content{
  display: block;
}

  <body>
    <header>
      <nav class="nav">
        <ul>
          <li> <a href="#" class="active">Home</a> </li>
          <li> <a href="#">About</a> </li>
          <li class="dropbtn">
            <a href="#">Projects</a>
            <div class="dropdown_content">
              <a href="#">HTML</a>
              <a href="#">CSS</a>
              <a href="#">JavaScript</a>
            </div>
          </li>
          <li> <a href="#">Contact</a> </li>
        </ul>
      </nav>
    </header>
    <main>

    </main>
    <footer>

    </footer>
  </body>

结果现在的样子：

我希望它看起来如何（图像已编辑）

提前谢谢你。

【问题讨论】：

标签： html css dropdown

【解决方案1】：

只需为dropdown_content 添加position: fixed 和background-color: #666666。像这样：

.dropdown_content {
    ...
    position: fixed;
    background-color: #666666;
}

这不会破坏下拉菜单的定位，因为ul标签也有固定的定位。

body {
    margin: 0;
    padding: 0;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    background-color: #666666;
    position: fixed;
    top: 0px;
}

nav li {
    float: left;
}

nav li a {
    color: #fff;
    text-decoration: none;
    text-transform: uppercase;
    font-family: sans-serif;
    padding: 15px;
    display: block;
}

nav li a:hover:not(.active) {
    background-color: #444;
}

nav li a.active {
    background-color: rgba(0, 150, 0, 1);
}

main {
    padding-top: 30px;
}

.dropdown_content {
    display: none;
    width: auto;
    position: fixed;
    background-color: #666666;
}

.dropbtn:hover .dropdown_content {
    display: block;
}

<body>
    <header>
        <nav class="nav">
            <ul>
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About</a></li>
                <li class="dropbtn">
                    <a href="#">Projects</a>
                    <div class="dropdown_content">
                        <a href="#">HTML</a>
                        <a href="#">CSS</a>
                        <a href="#">JavaScript</a>
                    </div>
                </li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main></main>
    <footer></footer>
</body>

【讨论】：

【解决方案2】：

你可以试试absolute positioning。

body {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  width: 100%;
  background-color: #666666;
  position: fixed;
  top: 0px;
  font-size: 0;
}

nav li {
  display: inline-block;
}

nav li a {
  color: #fff;
  text-decoration: none;
  text-transform: uppercase;
  font-family: sans-serif;
  padding: 15px;
  display: block;
  font-size: 16px;
}

nav li a:hover:not(.active) {
  background-color: #444;
}

nav li a.active {
  background-color: rgba(0, 150, 0, 1);
}

main {
  padding-top: 30px;
}

.dropdown_content {
  position: absolute;
  display: none;
  background-color: #666666;
}

.dropbtn:hover .dropdown_content {
  display: block;
}

<body>
  <header>
    <nav class="nav">
      <ul>
        <li> <a href="#" class="active">Home</a> </li>
        <li> <a href="#">About</a> </li>
        <li class="dropbtn">
          <a href="#">Projects</a>
          <div class="dropdown_content">
            <a href="#">HTML</a>
            <a href="#">CSS</a>
            <a href="#">JavaScript</a>
          </div>
        </li>
        <li> <a href="#">Contact</a> </li>
      </ul>
    </nav>
  </header>
  <main>

  </main>
  <footer>

  </footer>
</body>

【讨论】：

我看到除了将绝对定位添加到下拉列表之外，您还从导航样式中删除了overflow: hidden;。让我知道原因会有所帮助
如果父级上有overflow: hidden，则超出其范围的子级将被隐藏。