How To Center A CSS Drop Down Menu
68,026
Solution 1
replace this css with what you have for #cssmenu > ul > li:
#cssmenu > ul > li {
display:inline-block;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
and add this to your css codes:
#cssmenu > ul {
text-align:center;
}
here it is: http://jsfiddle.net/y4vDC/10/
Solution 2
You need your li
elements to be inline
, and then use text-align
on the parent element to center them:
#cssmenu ul {
text-align:center;
}
#cssmenu ul li {
display: inline;
}
In order that they stay as inline
, you need to delete the float from the list elements.
Solution 3
you have at least 2 easy options:
- set ul as
display:table
andmargin:auto;
http://jsfiddle.net/y4vDC/11/ - set ul as
display:inline-block
andtext-align:center
on parent http://jsfiddle.net/y4vDC/12/
edit 11/2019 : and nowdays you can also use:
-
width:max-content;
+margin:auto;
#cssmenu ul {
margin: 0 auto;/* UPDATE 1/2 */
padding:0;
width:max-content;/* UPDATE 2/2 */
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px; /* This is for the main menu bit at the top */
width: 100%; /* This means on every screen no matter the size, the width will cover the top */
line-height: normal;
text-align: center;
background-color: rgb(35, 35, 35);
box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
vertical-align: middle;
}
#cssmenu>ul>li {
float: left;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
#cssmenu>ul>li>a {
color: rgb(160, 160, 160);
font-family: Verdana, 'Lucida Grande';
font-size: 14px;
line-height: 70px; /* This bit chances the size of the text on the main heading */
padding: 15px 24px; /* This is the padding between the different titles */
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu>ul>li>a:hover {
color: rgb(250, 250, 250);
}
#cssmenu>ul>li>ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left; /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
position: absolute;
top: 55px; /* This is for the drop down annimation */
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu>ul>li:hover>ul {
opacity: 1;
top: 65px; /* This is how far from the top the drop down annimation will go */
visibility: visible;
}
#cssmenu>ul>li>ul:before {
content: '';
display: block;
border-color: transparent transparent rgb(250, 250, 250) transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu>ul ul>li {
position: relative;
}
#cssmenu ul ul a { /* This is the drop down menu, change font or size when its drops down */
color: rgb(50, 50, 50);
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: rgb(250, 250, 250);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {
background-color: rgb(240, 240, 240);
}
#cssmenu ul ul ul { /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px; /* This is for a sub sub menu */
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu ul ul>li:hover>ul {
opacity: 1;
left: 196px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: rgb(114, 164, 65);
color: rgb(240, 240, 240);
}
#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
text-align: center;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
<li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
<li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
<li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
<li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
</ul>
<li><a href='events.html'><span>Events</span></a></li>
<li class='has-sub'><a href='#'><span>Media</span></a>
<ul>
<li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
<li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
<li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
<li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
<li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
<ul>
</ul>
</ul>
</ul>
</div>
- or
flex
+justify-content
see : https://css-tricks.com/snippets/css/a-guide-to-flexbox/
#cssmenu ul {
margin: 0;
padding:0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
/* UPDATE 1/2 */display:flex;
/* UPDATE 2/2 */justify-content:center;
height: 70px; /* This is for the main menu bit at the top */
width: 100%; /* This means on every screen no matter the size, the width will cover the top */
line-height: normal;
text-align: center;
background-color: rgb(35, 35, 35);
box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
/*vertical-align: middle;*/
}
#cssmenu>ul>li {
float: left;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
#cssmenu>ul>li>a {
color: rgb(160, 160, 160);
font-family: Verdana, 'Lucida Grande';
font-size: 14px;
line-height: 70px; /* This bit chances the size of the text on the main heading */
padding: 15px 24px; /* This is the padding between the different titles */
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu>ul>li>a:hover {
color: rgb(250, 250, 250);
}
#cssmenu>ul>li>ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left; /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
position: absolute;
top: 55px; /* This is for the drop down annimation */
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu>ul>li:hover>ul {
opacity: 1;
top: 65px; /* This is how far from the top the drop down annimation will go */
visibility: visible;
}
#cssmenu>ul>li>ul:before {
content: '';
display: block;
border-color: transparent transparent rgb(250, 250, 250) transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu>ul ul>li {
position: relative;
}
#cssmenu ul ul a { /* This is the drop down menu, change font or size when its drops down */
color: rgb(50, 50, 50);
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: rgb(250, 250, 250);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {
background-color: rgb(240, 240, 240);
}
#cssmenu ul ul ul { /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px; /* This is for a sub sub menu */
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu ul ul>li:hover>ul {
opacity: 1;
left: 196px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: rgb(114, 164, 65);
color: rgb(240, 240, 240);
}
#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
text-align: center;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
<li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
<li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
<li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
<li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
</ul>
<li><a href='events.html'><span>Events</span></a></li>
<li class='has-sub'><a href='#'><span>Media</span></a>
<ul>
<li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
<li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
<li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
<li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
<li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
<ul>
</ul>
</ul>
</ul>
</div>
#cssmenu ul {
margin: 0 ;
padding:0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
/* UPDATE 1/2 */display:grid;
/* UPDATE 2/2 */justify-content:center;
height: 70px; /* This is for the main menu bit at the top */
width: 100%; /* This means on every screen no matter the size, the width will cover the top */
line-height: normal;
text-align: center;
background-color: rgb(35, 35, 35);
box-shadow: 0px 2px 3px rgba(0, 0, 0, .4);
vertical-align: middle;
}
#cssmenu>ul>li {
float: left;
margin-left: 15px; /* This is when the drop down box appears */
position: relative;
}
#cssmenu>ul>li>a {
color: rgb(160, 160, 160);
font-family: Verdana, 'Lucida Grande';
font-size: 14px;
line-height: 70px; /* This bit chances the size of the text on the main heading */
padding: 15px 24px; /* This is the padding between the different titles */
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu>ul>li>a:hover {
color: rgb(250, 250, 250);
}
#cssmenu>ul>li>ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left; /* This is for the text when box is dropped down, centered isnt always totally in the middle so best to have on the left */
position: absolute;
top: 55px; /* This is for the drop down annimation */
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu>ul>li:hover>ul {
opacity: 1;
top: 65px; /* This is how far from the top the drop down annimation will go */
visibility: visible;
}
#cssmenu>ul>li>ul:before {
content: '';
display: block;
border-color: transparent transparent rgb(250, 250, 250) transparent;
border-style: solid;
border-width: 10px; /* The border on the drop down box */
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu>ul ul>li {
position: relative;
}
#cssmenu ul ul a { /* This is the drop down menu, change font or size when its drops down */
color: rgb(50, 50, 50);
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: rgb(250, 250, 250);
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color .1s;
-moz-transition: background-color .1s;
-o-transition: background-color .1s;
transition: background-color .1s;
}
#cssmenu ul ul a:hover {
background-color: rgb(240, 240, 240);
}
#cssmenu ul ul ul { /* In this build i havent included a sub sub menu in, but here is the code if ever needed */
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px; /* This is for a sub sub menu */
padding: 16px 0 20px 0;
background-color: rgb(250, 250, 250);
text-align: left;
width: 160px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, .4);
}
#cssmenu ul ul>li:hover>ul {
opacity: 1;
left: 196px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: rgb(114, 164, 65);
color: rgb(240, 240, 240);
}
#wrapper #page #page-bgtop #page-bgbtm #content .post .entry table tr td {
text-align: center;
}
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>About Us</span></a>
<ul>
<li class='has-sub'><a href='history.html'><span>History Of Elvyn</span></a></li>
<li class='has-sub'><a href='lifeinelvyn.html'><span>Life In Elvyn</span></a></li>
<li class='has-sub'><a href='committee.html'><span>Our Committee</span></a></li>
<li class='has-sub'><a href='warden.html'><span>The Warden Team</span></a></li>
<li class='has-sub'><a href='http://www.lboro.ac.uk/services/campus-living/food-drink/halldiningfooddiaries/cateredhallmenu/' target="_blank"><span>Catered Menu</span></a></li>
</ul>
<li><a href='events.html'><span>Events</span></a></li>
<li class='has-sub'><a href='#'><span>Media</span></a>
<ul>
<li class='has-sub'><a href='mediaaboutus.html'><span>About Us</span></a></li>
<li class='has-sub'><a href='mediasubcommittee.html'><span>Sub-Committee</span></a></li>
<li class='has-sub'><a href='https://www.facebook.com/ElvynRichardsMedia#' target="_blank"><span>Elvyn Images</span></a></li>
<li class='has-sub'><a href='http://www.youtube.com/channel/UCyKYhzsknhggkykoZR9KC-g/videos?flow=grid&view=0' target="_blank"><span>Elvyn TV</span></a></li>
<li class='has-sub'><a href='elvynapp.html'><span>Elvyn App</span></a></li>
<ul>
</ul>
</ul>
</ul>
</div>
Author by
DanCarroll
Student studying computer science and business at Loughborough University.
Updated on November 03, 2020Comments
-
DanCarroll over 3 years
I'm in need of some help. I have a CSS dropdown menu but i want the titles to be centered so on all screen sizes it would be in the middle, as at the moment its stuck to the left.
Any help would be greatly appreciated.
Here is a bit of the HTML code:
<div id='cssmenu'> <ul> <li><a href='events.html'><span>Events</span></a></li> </ul>