Trying to center this submenu in this css menu

Looking for some CSS help, if there is some kind soul out there ๐Ÿ™‚

I have made a little CSS button menu bar to go above my WordPress posts. The first bar has dropdowns for regions, which contain countries. The first two have only one entry, so they are centred below the button which looks ok. The second two have multiple entries and are not centred, they are to the right.

I would like these two dropdowns to centre horizontally on the page. Any idea how to achieve this? I have been fumbling about for maybe 2 hours on this D:

I know I am missing something here, so any ideas would be gratefully received ๐Ÿ™‚

CodePen of this code -https://codepen.io/obsidianurbex/pen/qBqKRzO

/*top-nav*/

#cat-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Oswald;
  font-weight: 300;
  text-align: center;
}

#cat-nav a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  height: 30px;
  text-transform: uppercase;
}

#cat-nav li {
  background: #2573a7;
  text-align: center;
  padding: 7px 4px;
  cursor: pointer;
  width: 125px;
  list-style: none;
  margin: 10px 8px;
  border-radius: 5px;
  display: inline-table;
}


/*dropdown*/

#cat-nav li ul {
  margin-top: 14px;
  margin-left: -8px;
  padding: 0;
  display: none;
  font-size: 12px;
  list-style: none;
  position: absolute;
}

#cat-nav li ul li {
  border: 1px solid #fff;
  background: #000;
  padding: 8px 8px;
  margin: 0px;
}

#cat-nav li ul li a {
  font-size: 14px;
}

#cat-nav li:hover {
  colour: #000;
}

#cat-nav li:hover ul {
  display: block;
}

#cat-nav li:hover ul li {
  clear: left;
}
View Locations by Category
<div id="cat-nav" class="location-menu">
  <ul id="my-nav">
    <li><a href="#">Americas</a>
      <ul>
        <li class="location-menu"><a href="/locations/usa/">USA ๐Ÿ‡บ๐Ÿ‡ธ</a></li>
      </ul>
    </li>
    <li><a href="#">Asia</a>
      <ul>
        <li class="location-menu"><a href="/locations/japan/">Japan ๐Ÿ‡ฏ๐Ÿ‡ต</a></li>
      </ul>
    </li>
    <li><a href="#">East Europe</a>
      <ul>
        <li class="location-menu"><a href="/locations/bulgaria/">Bulgaria ๐Ÿ‡ง๐Ÿ‡ฌ</a></li>
        <li class="location-menu"><a href="/locations/hungary/">Hungary ๐Ÿ‡ญ๐Ÿ‡บ</a></li>
        <li class="location-menu"><a href="/locations/romania/">Romania ๐Ÿ‡ท๐Ÿ‡ด</a></li>
        <li class="location-menu"><a href="/locations/ukraine/">Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ</a></li>
      </ul>
    </li>
    <li><a href="#">West Europe</a>
      <ul>
        <li class="location-menu"><a href="/locations/austria/">Austria ๐Ÿ‡ฆ๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/belgium/">Belgium ๐Ÿ‡ง๐Ÿ‡ช</a></li>
        <li class="location-menu"><a href="/locations/france/">France ๐Ÿ‡ซ๐Ÿ‡ท</a></li>
        <li class="location-menu"><a href="/locations/germany/">Germany ๐Ÿ‡ฉ๐Ÿ‡ช</a></li>
        <li class="location-menu"><a href="/locations/great-britain/">Great Britain ๐Ÿ‡ฌ๐Ÿ‡ง</a></li>
        <li class="location-menu"><a href="/locations/italy/">Italy ๐Ÿ‡ฎ๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/luxembourg/">Luxembourg ๐Ÿ‡ฑ๐Ÿ‡บ</a></li>
        <li class="location-menu"><a href="/locations/portugal/">Portugal ๐Ÿ‡ต๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/sweden/">Sweden ๐Ÿ‡ธ๐Ÿ‡ช</a></li>
      </ul>
    </li>
  </ul>
</div>



<p class="has-text-align-center" id="h-country">View Locations by Category</p>


<div id="cat-nav" class="location-menu">
  <ul id="my-nav">
    <li><a href="/locations/">All</a></li>
    <li><a href="/locations/education/">Education</a></li>
    <li><a href="/locations/industrial/">Industrial</a></li>
    <li><a href="/locations/leisure/">Leisure</a></li>
    <li><a href="/locations/medical/">Medical</a></li>
    <li><a href="/locations/military/">Military</a></li>
    <li><a href="/locations/other/">Other</a></li>
    <li><a href="/locations/religious/">Religious</a></li>
    <li><a href="/locations/residential/">Residential</a></li>
  </ul>
</div>

Answer

Can you please check the below code? Hope it will work for you. We have set the position of the dropdown menu with respect to its parent element <li>.

Please refer to this link: https://jsfiddle.net/yudizsolutions/7r1z0v9o/

/*top-nav*/

#cat-nav {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: Oswald;
  font-weight: 300;
  text-align: center;
}

#cat-nav a {
  color: #fff;
  font-size: 15px;
  text-decoration: none;
  height: 30px;
  text-transform: uppercase;
}

#cat-nav li {
  background: #2573a7;
  position: relative;
  text-align: center;
  padding: 7px 4px;
  cursor: pointer;
  width: 125px;
  list-style: none;
  margin: 10px 8px;
  border-radius: 5px;
  display: inline-table;
}


/*dropdown*/

#cat-nav li ul {
  margin-top: 14px;
  margin-left: 0px;
  padding: 0;
  display: none;
  font-size: 12px;
  list-style: none;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 55;
}

#cat-nav li ul li {
  border: 1px solid #fff;
  background: #000;
  padding: 8px 8px;
  margin: 0px;
}

#cat-nav li ul li a {
  font-size: 14px;
}

#cat-nav li:hover {
  colour: #000;
}

#cat-nav li:hover ul {
  display: block;
}

#cat-nav li:hover ul li {
  clear: left;
}
View Locations by Category
<div id="cat-nav" class="location-menu">
  <ul id="my-nav">
    <li><a href="#">Americas</a>
      <ul>
        <li class="location-menu"><a href="/locations/usa/">USA ๐Ÿ‡บ๐Ÿ‡ธ</a></li>
      </ul>
    </li>
    <li><a href="#">Asia</a>
      <ul>
        <li class="location-menu"><a href="/locations/japan/">Japan ๐Ÿ‡ฏ๐Ÿ‡ต</a></li>
      </ul>
    </li>
    <li><a href="#">East Europe</a>
      <ul>
        <li class="location-menu"><a href="/locations/bulgaria/">Bulgaria ๐Ÿ‡ง๐Ÿ‡ฌ</a></li>
        <li class="location-menu"><a href="/locations/hungary/">Hungary ๐Ÿ‡ญ๐Ÿ‡บ</a></li>
        <li class="location-menu"><a href="/locations/romania/">Romania ๐Ÿ‡ท๐Ÿ‡ด</a></li>
        <li class="location-menu"><a href="/locations/ukraine/">Ukraine ๐Ÿ‡บ๐Ÿ‡ฆ</a></li>
      </ul>
    </li>
    <li><a href="#">West Europe</a>
      <ul>
        <li class="location-menu"><a href="/locations/austria/">Austria ๐Ÿ‡ฆ๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/belgium/">Belgium ๐Ÿ‡ง๐Ÿ‡ช</a></li>
        <li class="location-menu"><a href="/locations/france/">France ๐Ÿ‡ซ๐Ÿ‡ท</a></li>
        <li class="location-menu"><a href="/locations/germany/">Germany ๐Ÿ‡ฉ๐Ÿ‡ช</a></li>
        <li class="location-menu"><a href="/locations/great-britain/">Great Britain ๐Ÿ‡ฌ๐Ÿ‡ง</a></li>
        <li class="location-menu"><a href="/locations/italy/">Italy ๐Ÿ‡ฎ๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/luxembourg/">Luxembourg ๐Ÿ‡ฑ๐Ÿ‡บ</a></li>
        <li class="location-menu"><a href="/locations/portugal/">Portugal ๐Ÿ‡ต๐Ÿ‡น</a></li>
        <li class="location-menu"><a href="/locations/sweden/">Sweden ๐Ÿ‡ธ๐Ÿ‡ช</a></li>
      </ul>
    </li>
  </ul>
</div>



<p class="has-text-align-center" id="h-country">View Locations by Category</p>


<div id="cat-nav" class="location-menu">
  <ul id="my-nav">
    <li><a href="/locations/">All</a></li>
    <li><a href="/locations/education/">Education</a></li>
    <li><a href="/locations/industrial/">Industrial</a></li>
    <li><a href="/locations/leisure/">Leisure</a></li>
    <li><a href="/locations/medical/">Medical</a></li>
    <li><a href="/locations/military/">Military</a></li>
    <li><a href="/locations/other/">Other</a></li>
    <li><a href="/locations/religious/">Religious</a></li>
    <li><a href="/locations/residential/">Residential</a></li>
  </ul>
</div>

Leave a Reply

Your email address will not be published. Required fields are marked *