如何使导航菜单的大小与导航菜单子项的大小相等？

Question

如何使导航菜单的大小与导航菜单子项的大小相等？

3

我正在创建一个导航菜单，在导航菜单中有子菜单。我想让导航菜单的大小等于子菜单的大小。

我创建了三个超链接标签，然后是一个div元素，是在超链接标签之后的元素。我将三个超链接标签和div元素向左浮动。 div元素包含一个按钮和div。我将子div元素设置为绝对定位，使其在按钮下方绘制。我希望按钮的大小与包含子链接的div元素的大小相等。我认为如果将根div元素设置为相对定位，则它将具有与按钮相同的宽度，但这并不起作用。这里是CSS和HTML代码。非常感谢任何答案。

/* css */

<style>
        .navbar {
            background: #006669;
            overflow: hidden;
        }
        .navbar a{
            float: left;
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav{
            float: left;
            border:1px solid black;
        }
        .navbar .subnav .subnavbutton{
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            border: none;
            outline: none;
            background: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav .subnavcontent{
            position:absolute;
            border: 1px solid red;
            min-width: 100px;
            display: none;
        }
        .navbar .subnav .subnavcontent a{
            float: none;
            color: #444;
            background: white;
            display: block;

        }
        .navbar .subnav .subnavcontent a:hover{
            background: #a0a0a0;
        }
        .navbar .subnav:hover .subnavcontent{
            display: block;
        }

    </style>

     here is the body content

<div class="navbar">
        <a href="#">Home</a>
        <a href="#">News</a>
        <div class="subnav">
            <button class="subnavbutton">Contact</button>
            <div class="subnavcontent">
                <a href="#">link1</a>
                <a href="#">link2</a>
                <a href="#">link3</a>
            </div>
        </div>
</div>

- Rahul Singh

使用Bootstrap框架并因此使用它们预编程的下拉菜单不是更好吗？ - Martin

这个回答解决了你的问题吗？全宽下拉菜单 - Martin

你能帮我看一下我写的代码并提出建议吗？ - Rahul Singh

你好。为什么在根div上使用CSS overflow: hidden？这是一个次要问题。我对你的答案的潜在解决方案是使用百分比或者最好使用像素来设置nav divs的大小。让我知道你的想法如何？ - Lexus de Vinco

我正在使用CSS的overflow:hidden属性来设置根div，因为这可以清除浮动。另一种方法是在根div上使用clear fix。这两种解决方案都可以清除浮动。包装容器将具有所需的宽度和高度。谢谢你的提问，AlexDev。 - Rahul Singh

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Niall Flannery · Answer 1

我可以使用基于 flex-box 的导航栏来实现您想要的内容

html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li class="dropdown"><a href="dropdown-menu">Menu</a>
      <ul id="dropdown-menu" class="dropdown-menu">
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
      </ul>
    </li>
  </ul>
</nav>

CSS

nav ul {
  background: #006669;
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

nav a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  display: block;
  padding: 1rem;
}

nav a:hover {
  background: white;
  color: #006669;
}

nav ul ul {
  display: flex;
  flex-flow: column nowrap;
  justify-content:flex-start;
  align-items: center;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-menu {
  display: block;
  width: 100%;
  padding:0;
  border: 1px solid #006669;
}