Question

我想制作一个下拉菜单

为了在悬停之前隐藏子菜单，我设置了.dropdown-content display: none;
因为我设置了position: absolute;所以div缩小了，但我想要宽度子菜单的大小适合内容的大小。我知道display: inline-block;可以使块元素适合内容的大小，但是如何解决这种情况呢？请帮帮我，我真的很感激！

＆＃13;

nav.dropdown-nav {
  background: #000000;
  list-style-type: none;
  display: flex;			 /**/
  display: -weblit-flex;
}
nav.dropdown-nav>li {
  position: relative;
}
nav.dropdown-nav>li>a {
  text-decoration: none;
  color: #FFFFFF;
  border-right: 1px solid #FFFFFF;
  padding: 12px 30px;
  margin: 8px 0;
  display: block;
}
div.dropdown-content {
  position: absolute; /**/
  top: 60px;
  background: #333333;
  opacity: 0.9;
  padding: 0 30px;
  display: none;
  width: 100%;
}
div.dropdown-content a {
  text-decoration: none;
  color: #FFFFFF;
  padding: 10px 0;
  display: block;
}
nav.dropdown-nav>li:hover>a {
  color: #B3B3B3;
}
nav.dropdown-nav>li:hover div.dropdown-content {
  display: block;
}
div.dropdown-content li:hover a {
  color: #B3B3B3;
}

＆＃13;

<html>
  <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="css/reset.css" />
    <link rel="stylesheet" type="text/css" href="css/basic.css" />
    <link rel="stylesheet" type="text/css" href="css/nav-style.css" />
  </head>
  <body>
    <nav class="dropdown-nav">
      <li>
        <a href="#">WOMEN</a>
        <div class="dropdown-content">
          <ul>
            <li><a href="#">Accessories</a></li>
            <li><a href="#">Bags & Purses</a></li>
            <li><a href="#">Blazers</a></li>
            <li><a href="#">Coats & Jackets</a></li>
            <li><a href="#">Dresses</a></li>
            <li><a href="#">Hoodies & Sweatshirts</a></li>
          </ul>
        </div>
      </li>
      <li>
        <a href="#">MEN</a>
      </li>
    </nav>
  </body>
</html>

＆＃13;

Answer 1

将子菜单宽度设置为子菜单项的长度。

＆＃13;

ul {
  margin: 0;
  padding: 0;
}
.dropdown-nav > li {
  position: relative;
  display: inline-block;
  width: auto;
}
.dropdown-menu {
  background: aliceblue;
}
.dropdown-content {
  display: none;
  position: absolute;
  background: salmon;
  width: auto; /* This will make the sub menu auto fit it's content */
}
.dropdown-content a{
  white-space: nowrap; /* This will stop the long sub items from wrapping */
}
.dropdown-menu:hover ~ .dropdown-content,
.dropdown-content:hover {
  display: block;
}

＆＃13;

<nav class="dropdown-nav">
  <li>
    <a class="dropdown-menu" href="#">WOMEN</a>
    <div class="dropdown-content">
      <ul>
        <li><a href="#">Accessories Accessories Accessories Accessories </a></li>
        <li><a href="#">Bags & Purses</a></li>
      </ul>
    </div>
  </li>
  <li>
    <a href="#">MEN</a>
    
  </li>
</nav>

＆＃13;

您的代码示例：

＆＃13;

nav.dropdown-nav {
	background: #000000;
	list-style-type: none;
	display: flex;			 /**/
	display: -weblit-flex;
}
nav.dropdown-nav>li {
	position: relative;
}
nav.dropdown-nav>li>a {
	text-decoration: none;
	color: #FFFFFF;
	border-right: 1px solid #FFFFFF;
	padding: 12px 30px;
	margin: 8px 0;
	display: block;
}
div.dropdown-content {
	position: absolute; /**/
	top: 60px;
	background: #333333;
	opacity: 0.9;
	padding: 0 30px;
	display: none;
	width: auto;
}
div.dropdown-content a {
	text-decoration: none;
	color: #FFFFFF;
	padding: 10px 0;
	display: block;
    white-space: nowrap;
}
nav.dropdown-nav>li:hover>a {
	color: #B3B3B3;
}
nav.dropdown-nav>li:hover div.dropdown-content {
    display: block;
}
div.dropdown-content li:hover a {
	color: #B3B3B3;
}

＆＃13;

<html>
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/basic.css" />
	<link rel="stylesheet" type="text/css" href="css/nav-style.css" />
</head>
<body>
	<nav class="dropdown-nav">
		<li>
			<a href="#">WOMEN</a>
			<div class="dropdown-content">
				<ul>
					<li><a href="#">Accessories</a></li>
					<li><a href="#">Bags & Purses</a></li>
					<li><a href="#">Blazers</a></li>
					<li><a href="#">Coats & Jackets</a></li>
					<li><a href="#">Dresses</a></li>
					<li><a href="#">Hoodies & Sweatshirts</a></li>
				</ul>
			</div>
		</li>
		<li>
			<a href="#">MEN</a>
		</li>
	</nav>
</body>
</html>

＆＃13;

在绝对定位后更改div的宽度以适合内容

1 个答案: