CODEWITHSUNDEEP
htmlcss
Syed Omar Noor
Syed Omar Noor

Reputation: 15

Make dropdown menu same width as button/parent

I have a problem where I want the dropdown menu to be the same width as the button to activate it.

I tried:

html {
	--main-text-color: white;
	--main-background-color: black;
	--main-navbar-color: rgb(51, 51, 51);
	--main-link-color: rgb(200, 200, 255);
	overflow-x: hidden;
	background-color:var(--main-background-color);
}

/*Navbar section*/



@font-face {
	font-family: arrow;
	src: url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/fonts/fontawesome-webfont.woff2?v=4.7.0');
}

/*Below from w3schools*/



/* Navbar container */
.navbar {
	overflow: hidden;
	background-color: rgb(51, 51, 51);
	font-family: "arrow", "Impact", "Impactincase", serif;
}

	.navbar a {
		float: left;
		font-size: 50px;
		color: var(--main-text-color);
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

		.navbar a:hover {
			color: rgb(225, 225, 255);
			text-decoration: none;
		}

	.navbar .dropdown .dropdown-content a:hover {
		color: black;
	}

	/* Links inside the navbar */
	.navbar .notlogo {
		float: right;
		font-size: 16px;
		color: var(--main-text-color);
		text-align: center;
		padding: 14px 16px;
		text-decoration: none;
	}

/* The dropdown container */
.dropdown {
	float: right;
	overflow-x: hidden;
}

	/* Dropdown button */
	.dropdown .dropbtn {
		font-size: 50px;
		border: none;
		outline: none;
		color: var(--main-text-color);
		padding: 14px 16px;
		background-color: inherit;
		font-family: inherit; /* Important for vertical align on mobile phones */
		margin: 0; /* Important for vertical align on mobile phones */
	}

	/* Add a blue background color to navbar links on hover */
	.navbar .notlogo:hover, .dropdown:hover .dropbtn {
		background-color: rgb(51, 51, 100);
	}

/* Dropdown content (hidden by default) */
.dropdown-content {
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	width: inherit;
	z-index: 1;
	white-space: nowrap;
}

	/* Links inside the dropdown */
	.dropdown-content a {
		float: none;
		color: black;
		display: block;
		font-size: 16px;
		padding: 12px 16px;
		text-decoration: none;
		text-align: left;
		width: 100%;
	}

		/* Add a grey background color to dropdown links on hover */
		.dropdown-content a:hover {
			background-color: #ddd;
		}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
	display: block;
}


/*End of copying from w3schools*/


#normallogo {
	display: inline-block;
}

#smalllogo {
	display: none;
}


@media screen and (max-width: 840px) {
	#normallogo {
		display: none;
	}

	#smalllogo {
		display: inline-block;
	}
}
<body style="margin:0;padding:0;">
        <div class="navbar" id="loadcorrectly">
            <a class="ImpactD" href="index" id="normallogo">JDM Cars Galore</a>
            <a class="ImpactD" href="index" id="smalllogo">JDMCG</a>
            <div class="dropdown">
                <button class="dropbtn">
                    Enquiries &#xf0d7;
                </button>
                <div class="dropdown-content">
                    <a href="request">Request a car</a>
                    <a href="about">About</a>
                    <a href="contact">Contact us</a>
                    <a href="copyright">Copyright</a>
                </div>
            </div>

            <div class="dropdown">
                <button class="dropbtn">
                    Cars &#xf0d7;
                </button>
                <div class="dropdown-content">
                    <a href="86">Sprinter</a>
                    <a href="RX7">RX-7</a>
                    <a href="GTR">GT-R</a>
                    <a href="Corona">Corona</a>
                    <a href="EG6">Civic</a>
                </div>
            </div>
        </div>
    </body>

This code is essentially the same as https://www.w3schools.com/howto/howto_css_dropdown.asp but changed.

Upvotes: 1

Views: 2423

Answers (4)

Amelia-may Wilson
Amelia-may Wilson

Reputation: 33

have you tried setting 'width' to 'min-width'

Upvotes: 0

Tarek Adra
Tarek Adra

Reputation: 510

Updated your code check :

https://jsfiddle.net/adratarek/7yw6nvka/6/

changes:

  .dropdown-content {
    position: absolute;
    width: 100%;
    }
    .navbar {
      /*overflow: hidden;  removed and adding static height */
      height: 88px; 
    }

Upvotes: 0

Ali Ali
Ali Ali

Reputation: 1864

You need to alter the position of the .dropdown-content class to be relative:

/* Dropdown content (hidden by default) */
.dropdown-content {
    display: none;
    position: relative;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    width: inherit;
    z-index: 1;
    white-space: nowrap;
}

Upvotes: 0

541justus
541justus

Reputation: 43

There are several ways to accomplish this depending on your preference. The biggest issue you're facing, is that you assume the dropdown-content should know the width of it's parent. An absolute positioned element can only know the width of it's parent under certain conditions - and those conditions aren't being met.

Option #1. (Simplest) way to make the the drop-down the same width is to set a fixed width to your class (.dropdown-content) that matches the fixed width of your button that activates it.

Option #2. A more (Dynamic) way is to set the parent class (.dropdown) a position:relative. Due to your structure, there are several other changes you'll have to make to get the desired result such as getting rid of the overflow:hidden on .navbar & .dropdown.

Option #3. The (Recommended) way would be changing your structure of the Nav Bar & it's contents completely. The .navbar should be position:absolute or position:fixed (depending on how you want the nav bar to behave.) Then each of the .dropdown buttons can be position:absolute or position:relative. Then, your .dropdown-content can be set to width:100%. (Which is the behavior you're looking for).

Upvotes: 3

Related Questions