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>