Center and contain menu div - html

Question

I'm building a hover menu using css and bootstrap(for flex grid). If I try to put my menu in any parent div, my menu only goes as wide as the parent div.
Also I can't seem to center my hover menu to the length of my menu item.
So, how can I make my menu items stretch the width so the text does not wrap onto a new line and how do I center the whole menu relevant to it's link?
html
<div class="d-flex flex-row">
<div class="dropdown">
<button class="dropbtn">Small</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">a really long Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
</div>
CSS
/* Dropdown Button */
.dropbtn {
color: #3a3a3a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: #fff;
border: 1px solid #cecece;
color:#3a3a3a;
z-index: 1;
box-sizing: border-box;
}
.dropdown-content:after, .dropdown-content:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.dropdown-content:after {
border-bottom-color: #fff;
border-width: 13px;
margin-left: -13px;
}
.dropdown-content:before {
border-bottom-color: #cecece;
border-width: 14px;
margin-left: -14px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:$green;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
//background-color: #3e8e41;
}

Answer 1

how can I make my menu items stretch the width so the text does not wrap onto a new line?
You can use the css property white-space: nowrap;, so Text will never wrap to the next line. See docs: https://www.w3schools.com/cssref/pr_text_white-space.asp
new line and how do I center the whole menu relevant to it's link?
So you can set a position left:50% and then use the transform property setting the value translateX(50%) to bring it back 50% of its size. Add the following to .dropdown-content :
left: 50%;
transform: translateX(-50%);
/* Dropdown Button */
.dropbtn {
color: #3a3a3a;
padding: 16px;
font-size: 16px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background: #fff;
border: 1px solid #cecece;
color:#3a3a3a;
z-index: 1;
box-sizing: border-box;
left: 50%;
transform: translateX(-50%);
}
.dropdown-content:after, .dropdown-content:before {
bottom: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.dropdown-content:after {
border-bottom-color: #fff;
border-width: 13px;
margin-left: -13px;
}
.dropdown-content:before {
border-bottom-color: #cecece;
border-width: 14px;
margin-left: -14px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
white-space: nowrap;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {
color:$green;
}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
display: block;
}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
//background-color: #3e8e41;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="d-flex flex-row">
<div class="dropdown">
<button class="dropbtn">Small</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
<div class="dropdown">
<button class="dropbtn">a really long Long Menu item</button>
<div class="dropdown-content">
Link 1 long link
Link 2
Link 3
</div>
</div>
</div>