CSS button with dropdown – unable to centralise dropdown menu with button

Question

I am trying to make a simple button, which when hovered will have a dropdown menu with region names and below this buttons for countries.

I have made the menu with css using some code I scavenged online, and after tweaking it looks as broadly as intended. My one issue is that the dropdown is not aligned in the center.

After playing with the code I can get;
a) 100% width of the dropdown, which is a bit excessive
b) centralised, but the rest of the content is shunted down when dropdown opens
c) off-centre, but slides over below content (as in the attached code). The left part of the dropdown aligns with the left margin of the button, instead of being centralised.

Any ideas how I can centralise this dropdown? I also don’t want it full width, say maybe min 400px and max 80%

Preview

On codepen: https://codepen.io/obsidianurbex/pen/oNNOgvw

HTML

<center><div class="dropdown">
  <a class="category-link">View Locations by Country&nbsp;<i class="fas fa-chevron-down fa-sm"></i>&nbsp;</a>
  <div class="dropdown-content">
    Americas</br><a class="category-link" href="https://www.obsidianurbexphotography.com/locations/usa/">USA</a>&nbsp;</br></br>
         Asia</br><a class="category-link" href="https://www.obsidianurbexphotography.com/locations/japan/">Japan</a>
         </br></br>
        Central & Western Europe</br><a class="category-link" href="https://www.obsidianurbexphotography.com/locations/austria/">Austria</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/belgium/">Belgium</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/germany/">Germany</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/italy/">Italy</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/luxembourg/">Luxembourg</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/portugal/">Portugal</a></br></br>
       Eastern Europe</br><a class="category-link" href="https://www.obsidianurbexphotography.com/locations/bulgaria/">Bulgaria</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/hungary/">Hungary</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/romania/">Romania</a>&nbsp;<a class="category-link" href="https://www.obsidianurbexphotography.com/locations/ukraine/">Ukraine</a></br></br>
      Great Britain</br><a class="category-link" href="https://www.obsidianurbexphotography.com/locations/great-britain/">Great Britain</a></div></div></center>


<center>SOME OTHER CONTENT BELOW THAT DOESNT NEED SHIFT DOWN WHEN MENU OPENS</center>

CSS

/* Dropdown Button */
.category-link {
padding: 2px 8px 4px 8px;
    color: #fff;
    font-size: 16px;
    border-radius: 2px;
    margin-right: 2px;
    cursor: pointer;
    -moz-background-clip: padding;
    -webkit-background-clip: padding-box;
    box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -moz-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    -webkit-box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
    margin-top: 2px;
    display: inline-block;
    text-decoration: none;
    border-color: #2573A7;
    background-color: #2573A7;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
  position: relative;
   display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #0c0c0c;
  min-width: 400px;
   max-width: 80%;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  font-family: "Oswald";
  font-size: 16px;
    text-transform: uppercase;
  color: #fff;
  padding: 20px 15px 20px 15px;
}

/* Links inside the dropdown */
.dropdown-content a {
  color: #fff;
  font-family: "Titillium Web";
    font-size: 16px;
  text-decoration: none;
    text-transform: none;
  display: inline-block;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
0
, , Obsidian 3 years 2019-11-22T12:43:24-05:00 0 Answers 121 views 0

Leave an answer

Browse
Browse