hayley hayley - 4 months ago 18
CSS Question

Change the width of div to fit the content after absolutely positioned

I want to make a dropdown menu


In order to hide the sub menu before the hovering, I set my .dropdown-content

display: none;

And because I set
position: absolute;
so the div is shrinked, but I want the width of the sub menu to fit the size of the content. I know
display: inline-block;
can make block element to fit the size of the content, but how can solve this situation? Please help me, I'll really appreciate!



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;
}

<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>




Answer

Set the sub menu width by the length of the sub menu items.

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;
}
<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>

Your code sample:

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;
}
<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>

Comments