This question already has answers here:
How do I center a container in my HTML/CSS?
(2 answers)
Closed 8 years ago.
I have a question.
How would I center a nav bar with the following code?
You can see the nav bar at mineflow.us/hitest
<div align="center"><div class="special_container last"><div class='m_html' ><style><!--#import url(http://fonts.googleapis.com/css?family=PT+Sans:400,700);#cssmenu { background: #FFFFFF; margin: 0; width: auto; padding: 0; line-height: 1; display: block; position: relative; font-family: 'PT Sans', sans-serif;}#cssmenu ul { list-style: none; margin: 0; padding: 0; display: block;}#cssmenu ul:after { content: ' '; display: block; font-size: 0; height: 0; clear: both; visibility: hidden;}#cssmenu ul li { margin: 0; padding: 0; display: block; position: relative;}#cssmenu ul li a { text-decoration: none; display: block; margin: 0; -webkit-transition: color .2s ease; -moz-transition: color .2s ease; -ms-transition: color .2s ease; -o-transition: color .2s ease; transition: color .2s ease;}#cssmenu ul li ul { position: absolute; left: -9999px; top: auto;}#cssmenu ul li ul li { max-height: 0; position: absolute; -webkit-transition: max-height 0.4s ease-out; -moz-transition: max-height 0.4s ease-out; -ms-transition: max-height 0.4s ease-out; -o-transition: max-height 0.4s ease-out; transition: max-height 0.4s ease-out; background: #2E2E2E;}#cssmenu ul li ul li.has-sub:after { display: block; position: absolute; content: ''; height: 10px; width: 10px; border-radius: 5px; background: #000000; z-index: 1; top: 13px; right: 15px;}#cssmenu ul li ul li.has-sub:before { display: block; position: absolute; content: ''; height: 0; width: 0; border: 3px solid transparent; border-left-color: #ffffff; z-index: 2; top: 15px; right: 15px;}#cssmenu ul li ul li a { font-size: 14px; font-weight: 400; text-transform: none; color: #000000; letter-spacing: 0; display: block; width: 140px; padding: 11px 10px 11px 20px;}#cssmenu ul li ul li:hover > a,#cssmenu ul li ul li.active > a { color: #4cb6ea;}#cssmenu ul li ul li:hover:after,#cssmenu ul li ul li.active:after { background: #4cb6ea;}#cssmenu ul li ul li:hover > ul { left: 170px; top: 0;}#cssmenu ul li ul li:hover > ul > li { max-height: 72px; position: relative;}#cssmenu > ul > li { float: left;}#cssmenu > ul > li:after { content: ''; display: block; position: absolute; width: 100%; height: 0; top: 0; z-index: 0; background: #2E2E2E; -webkit-transition: height .2s; -moz-transition: height .2s; -ms-transition: height .2s; -o-transition: height .2s; transition: height .2s;}#cssmenu > ul > li.has-sub > a { padding-right: 40px;}#cssmenu > ul > li.has-sub > a:after { display: block; content: ''; background: #ffffff; height: 12px; width: 12px; position: absolute; border-radius: 13px; right: 14px; top: 16px;}#cssmenu > ul > li.has-sub > a:before { display: block; content: ''; border: 4px solid transparent; border-top-color: #4cb6ea; z-index: 2; height: 0; width: 0; position: absolute; right: 16px; top: 21px;}#cssmenu > ul > li > a { color: #ffffff; padding: 15px 20px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; font-size: 14px; z-index: 2; position: relative;}#cssmenu > ul > li:hover:after,#cssmenu > ul > li.active:after { height: 100%;}#cssmenu > ul > li:hover > a,#cssmenu > ul > li.active > a { color: #000000;}#cssmenu > ul > li:hover > a:after,#cssmenu > ul > li.active > a:after { background: #000000;}#cssmenu > ul > li:hover > a:before,#cssmenu > ul > li.active > a:before { border-top-color: #ffffff;}#cssmenu > ul > li:hover > ul { left: 0;}#cssmenu > ul > li:hover > ul > li { max-height: 72px; position: relative;}#cssmenu #menu-button { display: none;}#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) { #cssmenu > ul { max-height: 0; overflow: hidden; -webkit-transition: max-height 0.35s ease-out; -moz-transition: max-height 0.35s ease-out; -ms-transition: max-height 0.35s ease-out; -o-transition: max-height 0.35s ease-out; transition: max-height 0.35s ease-out; } #cssmenu > ul.open { max-height: 1000px; border-top: 1px solid rgba(110, 110, 110, 0.25); } #cssmenu ul { width: 100%; } #cssmenu ul > li { float: none; } #cssmenu ul li a { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 12px 20px; } #cssmenu ul > li:after { display: none; } #cssmenu ul li.has-sub > a:after, #cssmenu ul li.has-sub > a:before, #cssmenu ul li ul li.has-sub:after, #cssmenu ul li ul li.has-sub:before { display: none; } #cssmenu ul li ul, #cssmenu ul li ul li ul, #cssmenu ul li ul li:hover > ul { left: 0; position: relative; } #cssmenu ul li ul li, #cssmenu ul li:hover > ul > li { max-height: 999px; position: relative; background: none; } #cssmenu ul li ul li a { padding: 8px 20px 8px 35px; color: #ffffff; width: auto; } #cssmenu ul li ul ul li a { padding: 8px 20px 8px 50px; } #cssmenu ul li ul li:hover > a { color: #000000; } #cssmenu #menu-button { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; padding: 15px 20px; text-transform: uppercase; font-weight: 700; font-size: 14px; letter-spacing: 1px; color: #ffffff; cursor: pointer; } #cssmenu #menu-button:after { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; right: 20px; top: 16px; } #cssmenu #menu-button:before { display: block; content: ''; position: absolute; height: 3px; width: 22px; border-top: 2px solid #ffffff; right: 20px; top: 26px; }}--></style><div id="cssmenu"><ul><li class="last"><span style="color: rgb(125, 125, 125);"><i class="icon-home"></i> Home</span></li><li><span style="color: rgb(125, 125, 125);"><i class="icon-pencil"></i> Forum</span></li><li><span style="color: rgb(125, 125, 125);"><i class="icon-book"></i> Donate</span></li><li><span style="color: rgb(125, 125, 125);"><i class="icon-star"></i> Vote</span></li><li class="last"><span style="color: rgb(125, 125, 125);"><i class="icon-signal"></i> Status</span></li><li class="last"><span style="color: rgb(125, 125, 125);"><i class="icon-globe"></i> Staff List</span></li></ul></div><div align="center"><span style="font-weight: bold; font-family: Tahoma; font-size: 24pt; color: rgb(255, 0, 0); "><br></span></div> </div></div></div>
#cssmenu{display: inline-block;}
btw. use JSFiddle next time, please.
Related
How to fix it it doesn't work on small screen it show right sidenav icon but I click it it doesn't show up. I want it to be show example Home, Menu, and submenu in small screen but why it can't be.
This is html file:
<div class="row preview-html" ng-show="screen == 'preview'" ng-hide="loading">
<div class="col-md-12"><div id="cssmenu"><div id="menu-button">Menu</div>
<ul>
<li class="active"><span><i class="fa fa-fw fa-home"></i> Home</span></li>
<li class="has-sub"><span><i class="fa fa-fw fa-bars"></i> Menus</span>
<ul>
<li class="has-sub"><span>Menu 1</span>
<ul>
<li><span>Menu 1.1</span></li>
<li><span>Menu 1.2</span></li>
</ul>
</li>
<li><span>Menu 2</span></li>
</ul>
</li>
<li><span><i class="fa fa-fw fa-cog"></i> Settings</span></li>
<li><span><i class="fa fa-fw fa-phone"></i> Contact</span></li>
</ul>
</div></div>
</div>
This is css:
#cssmenu {
background: #2a8a8f;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
font-family: 'PT Sans', sans-serif;
box-sizing: content-box;
}
#cssmenu ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
}
#cssmenu ul:after,
#cssmenu:after {
content: " ";
display: block;
font-size: 0;
height: 0;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu ul li a {
text-decoration: none;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu ul li ul {
position: absolute;
left: -9999px;
top: auto;
z-index: 999;
}
#cssmenu ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #fff;
}
#cssmenu ul li ul li.has-sub:after {
display: block;
position: absolute;
content: "";
height: 10px;
width: 10px;
border-radius: 5px;
background: #000;
z-index: 1;
top: 13px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu ul li ul li.has-sub:before {
display: block;
position: absolute;
content: "";
height: 0;
width: 0;
border: 3px solid transparent;
border-left-color: #fff;
z-index: 2;
top: 15px;
right: 15px;
}
#cssmenu.align-right ul li ul li.has-sub:before {
right: auto;
left: 15px;
border-left-color: transparent;
border-right-color: #fff;
}
#cssmenu ul li ul li a {
font-size: 14px;
font-weight: 400;
text-transform: none;
color: #000;
letter-spacing: 0;
display: block;
width: 170px;
padding: 11px 10px 11px 20px;
}
#cssmenu ul li ul li:hover > a,
#cssmenu ul li ul li.active > a {
color: #4cb6ea;
}
#cssmenu ul li ul li:hover:after,
#cssmenu ul li ul li.active:after {
background: #4cb6ea;
}
#cssmenu ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu.align-center > ul {
text-align: center;
font-size: 0;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul {
float: right;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu.align-right ul ul li:hover > ul {
right: 100%;
left: auto;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu > ul > li:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #fff;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu > ul > li.has-sub > a:after {
display: block;
content: "";
background: #fff;
height: 12px;
width: 12px;
position: absolute;
border-radius: 13px;
right: 14px;
top: 16px;
}
#cssmenu > ul > li.has-sub > a:before {
display: block;
content: "";
border: 4px solid transparent;
border-top-color: #2a8a8f;
z-index: 2;
height: 0;
width: 0;
position: absolute;
right: 16px;
top: 21px;
}
#cssmenu > ul > li > a {
color: #fff;
padding: 15px 20px;
font-weight: 700;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 14px;
z-index: 2;
position: relative;
}
#cssmenu > ul > li:hover:after,
#cssmenu > ul > li.active:after {
height: 100%;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #000;
}
#cssmenu > ul > li:hover > a:after,
#cssmenu > ul > li.active > a:after {
background: #000;
}
#cssmenu > ul > li:hover > a:before,
#cssmenu > ul > li.active > a:before {
border-top-color: #fff;
}
#cssmenu > ul > li:hover > ul {
left: 0;
}
#cssmenu > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu > ul > li > a {
display: block;
}
#cssmenu > ul > li {
width: auto;
}
#cssmenu > ul > li > ul {
width: 170px;
display: block;
}
#cssmenu > ul > li > ul > li {
width: 170px;
display: block;
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu > ul {
max-height: 0;
overflow: hidden;
-webkit-transition: max-height 0.35s ease-out;
-moz-transition: max-height 0.35s ease-out;
-ms-transition: max-height 0.35s ease-out;
-o-transition: max-height 0.35s ease-out;
transition: max-height 0.35s ease-out;
}
#cssmenu > ul > li > ul {
width: 100%;
display: block;
}
#cssmenu.align-right ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li {
width: 100%;
display: block;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu > ul > li > ul > li > a {
width: 100%;
display: block;
}
#cssmenu ul li ul li a {
width: 100%;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu.align-center > ul > li {
display: block;
}
#cssmenu > ul.open {
max-height: 1000px;
border-top: 1px solid rgba(110, 110, 110, 0.25);
}
#cssmenu ul {
width: 100%;
}
#cssmenu ul > li {
float: none;
width: 100%;
}
#cssmenu ul li a {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 12px 20px;
}
#cssmenu ul > li:after {
display: none;
}
#cssmenu ul li.has-sub > a:after,
#cssmenu ul li.has-sub > a:before,
#cssmenu ul li ul li.has-sub:after,
#cssmenu ul li ul li.has-sub:before {
display: none;
}
#cssmenu ul li ul,
#cssmenu ul li ul li ul,
#cssmenu ul li ul li:hover > ul,
#cssmenu.align-right ul li ul,
#cssmenu.align-right ul li ul li ul,
#cssmenu.align-right ul li ul li:hover > ul {
left: 0;
position: relative;
right: auto;
}
#cssmenu ul li ul li,
#cssmenu ul li:hover > ul > li {
max-height: 999px;
position: relative;
background: none;
}
#cssmenu ul li ul li a {
padding: 8px 20px 8px 35px;
color: #fff;
}
#cssmenu ul li ul ul li a {
padding: 8px 20px 8px 50px;
}
#cssmenu ul li ul li:hover > a {
color: #000;
}
#cssmenu #menu-button {
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
padding: 15px 20px;
text-transform: uppercase;
font-weight: 700;
font-size: 14px;
letter-spacing: 1px;
color: #fff;
cursor: pointer;
}
#cssmenu #menu-button:after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #fff;
border-bottom: 2px solid #fff;
right: 20px;
top: 16px;
box-sizing: content-box;
}
#cssmenu #menu-button:before {
display: block;`enter code here`
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #fff;
right: 20px;
top: 26px;
box-sizing: content-box;
}
}
You are doing a few things wrong .
1st for ul after #menu-button the overflow is hidden so it wont show the ul container even if its there.
2nd color of each link inside menu is same as background . so change it to see the contents .or change the background to black or other color since font is white .
3rd you are using :after psudo element to show the hamburger icon so use the following to add click event to :after element.
<script>
$('#cssmenu #menu-button').after().click(function(){
$('#cssmenu').toggleClass('active');
});
</scr
css to add inside #media query.
#cssmenu.active ul li a{
color: inherit;
}
#cssmenu.active #menu-button + ul{
overflow: visible;
}
#cssmenu.active #menu-button:after{
pointer-events: all;
}
Having a huge struggle here as I am not an expert but I'm just trying to center this menu. I've been at it for ages and I know one of you guys will correct me in a heartbeat.
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: center;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: center;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
and
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Showreel</a>
<li><a href='#'>About Us</a></li>
<li><a href='#'>The Team</a></li>
<li><a href='#'>Contact Us</a></li>
</ul>
</div>
Would be great to get your help!
#cssmenu {
text-align: center;
}
#cssmenu ul {
display: inline-block;
}
#cssmenu ul li {
display: inline-block;
}
#cssmenu ul li a {
display: block;
/* Other Link styles here */
}
Hmm.. if it is okay that you use a Web Framework, I will use the MaterializeCSS framework because it makes things much easier.
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.3/css/materialize.min.css">
</head>
<body>
<nav>
<ul class = "center">
<li>Home</li>
</ul>
</nav>
</body>
</html>
If you run the example above, "home" will be centered!
Basically, you need to get rid of your float: left on your li's and instead give them display: inline-block. Then you can use text-align: center on the parent ul to center your menu.
CodePen
#cssmenu > ul {
margin: 0
text-align: center;
}
#cssmenu > ul > li {
display: inline-block;
padding: 15px;
}
I have two bootstrap menus which collapse at certain max-widths leaving me with the following results. I am trying to get the sub menu items on the blue navigation bar to overflow in the same way that they do on the purple. Any suggestions?
Blue menu
Purple menu
Purple Menu's CSS
nav {
background-color: #603180;
z-index: 10000;
position: relative;
}
#toggle {
display: none;
}
nav ul li {
display: inline;
list-style: none;
}
#cssmenu .menu-main-nav-menu-container {
background: #603180;
margin: 0;
width: auto;
padding: 0;
line-height: 1;
display: block;
position: relative;
}
#cssmenu .menu-main-nav-menu-container ul .current-menu-item {
background-color: #00337e;
}
#cssmenu .menu-main-nav-menu-container ul .current-menu-item ul .current-menu-item {
background-color: #ffffff;
}
#cssmenu .menu-main-nav-menu-container ul li ul .current-menu-item a:link {
background-color: #ffffff;
font-weight:700;
}
#cssmenu .menu-main-nav-menu-container .current-page-parent {
background-color: #00337e;
}
#cssmenu .menu-main-nav-menu-container .sub-menu .current-page-parent {
background-color: #ffffff;
}
#cssmenu .menu-main-nav-menu-container ul {
list-style: none;
margin: 0;
padding: 0;
display: block;
text-align:left;
}
#cssmenu .menu-main-nav-menu-container ul li {
margin: 0;
padding: 0;
display: block;
position: relative;
}
#cssmenu .menu-main-nav-menu-container ul li a {
text-decoration: none;
display: block;
margin: 0;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu .menu-main-nav-menu-container ul li ul {
position: absolute;
left: -9999px;
top: auto;
}
#cssmenu .menu-main-nav-menu-container ul li ul li {
max-height: 0;
position: absolute;
-webkit-transition: max-height 0.4s ease-out;
-moz-transition: max-height 0.4s ease-out;
-ms-transition: max-height 0.4s ease-out;
-o-transition: max-height 0.4s ease-out;
transition: max-height 0.4s ease-out;
background: #ffffff;
}
#cssmenu .menu-main-nav-menu-container.align-right ul li ul li.has-sub:after {
right: auto;
left: 15px;
}
#cssmenu .menu-main-nav-menu-container ul li ul li a {
color: #00337e !important;
letter-spacing: 0;
display: block;
padding: 5px 25px !important;
background-color: #ffffff;
}
#cssmenu .menu-main-nav-menu-container ul li ul li:hover {
background-color: #603180;
color: #ffffff;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > a,
#cssmenu .menu-main-nav-menu-container ul li ul li.active > a {
color: #ffffff !important;
}
#cssmenu .menu-main-nav-menu-container ul li ul li:hover:after,
#cssmenu .menu-main-nav-menu-container ul li ul li.active:after {
background: #4cb6ea;
}
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > ul {
left: 100%;
top: 0;
}
#cssmenu .menu-main-nav-menu-container ul li ul li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu .menu-main-nav-menu-container > ul > li {
float: left;
}
#cssmenu .menu-main-nav-menu-container.align-center > ul > li {
float: none;
display: inline-block;
}
#cssmenu .menu-main-nav-menu-container.align-center > ul {
text-align: center;
font-size: 0;
}
#cssmenu .menu-main-nav-menu-container.align-center ul ul {
text-align: left;
}
#cssmenu .menu-main-nav-menu-container.align-right > ul {
float: right;
}
#cssmenu .menu-main-nav-menu-container.align-right > ul > li:hover > ul {
left: auto;
right: 0;
}
#cssmenu .menu-main-nav-menu-container.align-right ul ul li:hover > ul {
right: 100%;
left: auto;
}
#cssmenu .menu-main-nav-menu-container.align-right ul ul li a {
text-align: right;
}
#cssmenu .menu-main-nav-menu-container > ul > li:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 0;
top: 0;
z-index: 0;
background: #00337e;
-webkit-transition: height .2s;
-moz-transition: height .2s;
-ms-transition: height .2s;
-o-transition: height .2s;
transition: height .2s;
}
#cssmenu .menu-main-nav-menu-container > ul > li.has-sub > a {
padding-right: 40px;
}
#cssmenu .menu-main-nav-menu-container > ul > li > a {
color: #ffffff;
letter-spacing: 1px;
text-transform: uppercase;
font-size: 15px;
z-index: 2;
position: relative;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover:after,
#cssmenu .menu-main-nav-menu-container > ul > li.active:after {
height: 100%;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a,
#cssmenu .menu-main-nav-menu-container > ul > li.active > a {
color: #ffffff;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a:after,
#cssmenu .menu-main-nav-menu-container > ul > li.active > a:after {
background: #ffffff;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover > a:before,
#cssmenu .menu-main-nav-menu-container > ul > li.active > a:before {
border-top-color: #ffffff;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover > ul {
left: 0;
z-index: 999;
}
#cssmenu .menu-main-nav-menu-container > ul > li:hover > ul > li {
max-height: 72px;
position: relative;
}
#cssmenu .menu-main-nav-menu-container #menu-button {
display: none;
}
#cssmenu .menu-main-nav-menu-container > ul > li > a {
display: block;
}
#cssmenu .menu-main-nav-menu-container > ul > li {
width: auto;
}
#cssmenu .menu-main-nav-menu-container > ul > li > ul {
width: 210px;
display: block;
box-shadow: 0 0 5px 2px rgba(0,0,0,.35);
}
#cssmenu .menu-main-nav-menu-container > ul > li > ul > li {
width: 210px;
display: block;
}
nav #cssmenu .menu-main-nav-menu-container ul li a:link {
font-size: 1em;
font-weight: 400;
color: #ffffff;
padding: 12px 26px;
}
nav #cssmenu .menu-main-nav-menu-container ul li a:hover {
background-color: #00337e;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
transition: all 0.15s linear;
}
nav #cssmenu .menu-main-nav-menu-container ul li ul li a:hover {
background-color: #603180;
color: #ffffff;
-webkit-transition: all 0.15s linear;
-moz-transition: all 0.15s linear;
-o-transition: all 0.15s linear;
-ms-transition: all 0.15s linear;
transition: all 0.15s linear;
}
#media (max-width: 979px) {
nav {
opacity: 0.97;
}
#toggle {
display: block;
color: #ffffff;
width: 100%;
position: relative;
margin-bottom: 15px;
}
#toggle h6 {
font-size: 1.2857142857142858em;
padding-bottom: 10px;
}
#toggle:after {
top: 80%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-color: rgba(255, 255, 255, 0);
border-top-color: #ffffff;
border-width: 11px;
margin-left: -11px;
}
nav #cssmenu {
display: none;
}
nav h6 {
color: #ffffff;
}
nav #cssmenu .menu-main-nav-menu-container ul li ul {
z-index: 1000;
}
nav #cssmenu .menu-main-nav-menu-container ul li {
display: block;
clear: both;
text-align: center;
width: 100%;
}
Blue Menu's CSS
nav .container {
width: 100%;
font-weight: bold;
}
.navbar {
border-radius: 0px;
margin-bottom: 0px;
}
.navbar .nav li a {
-webkit-transition: all ease .3s;
-moz-transition: all ease .3s;
-o-transition: all ease .3s;
transition: all ease .3s;
}
.dropdown-menu {
border-radius: 0px;
padding: 0px;
}
.dropdown:hover .dropdown-menu,
.dropdown:focus .dropdown-menu { /*allows hover dropdown*/
display: block;
}
/*navbar .navbar-nav { == Comment out two lines ==
display: inline-block;
float: none;
}
.navbar .navbar-collapse {
text-align: center;
} == to center menu items ==*/
.navbar-default { /*navbar */
background-color: #004C99;
border-color: #004C99;
z-index: 10;
}
.navbar-default .navbar-brand { /*Company/Port name*/
color: #fff;
font-weight: 700;
text-transform: capitalize;
}
.navbar-default .navbar-brand:focus,
.navbar-default .navbar-brand:hover { /*Company/Port name hover*/
color: #fff;
}
.navbar-default .navbar-nav li a { /*navbar links*/
color: #fff;
}
.navbar-default .navbar-nav li a:focus,
.navbar-default .navbar-nav li a:hover { /*navbar links hover*/
color: #fff;
background-color: #00337e;
transition: color 0.33s ease-in-out;
}
.dropdown-menu li a { /*Dropdown list*/
color: #00337e !important;
width: 170px;
padding: 5px 25px;
text-transform: capitalize;
}
.dropdown-menu li a:hover { /*Dropdown list hover*/
color: #fff !important;
}
.navbar-default .navbar-nav>.open>a,
.navbar-default .navbar-nav>.open>a:focus,
.navbar-default .navbar-nav>.open>a:hover { /*Dropdown open button*/
background-color: #00337e;
color: #fff;
}
.navbar-collapse {
padding: 0px;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: 0px;
margin-left: 0px;
display: none !important;
max-height: 300px;
overflow-y: auto;
overflow-x: hidden;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block !important;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 4px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
button.navbar-toggle {
padding-bottom: 9px !important;
}
you're going to need to remove the padding and width constraints on your nav parent elements. As you can see in this fiddle, there children extend the width of the nav with everything at 100% width and a max width on the parent element (if you need it) to constrain the menu.
http://jsfiddle.net/calebswank/1mb4n8db/
nav {
width: 100%;
max-width: 600px;
background: rgba(0, 0, 0, .1);
padding: 0;
}
I have an issue related to dropdown menu that remains behind Lean Slider. Please help me how to fix this issue. I am pasting html and css code here that you see where there is a problem.
I have tried to change z-index, but nothing changed.
HTML:
<pre><div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#'>About us</a>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li class='has-sub'><a href='#'>Programs</a>
<ul>
<li>Submenu</li>
<li class='has-sub'><a href='#'>Submenu</a>
<ul>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
<li>Submenu</li>
</ul>
</li>
<li>Submenu</li>
</ul>
</li>
<li>News</li>
<li>Network</li>
<li>Press</li>
<li class='last'>Contact us</li>
</ul>
</div><code>
I am also pasting CSS code here.
<pre>#cssmenu {
position: relative;
height: auto;
background: #2b2f3a;
width: auto;
}
#cssmenu ul {
list-style: none;
padding: 0;
margin: 0;
line-height: 1;
}
#cssmenu > ul {
position: relative;
display: block;
background: #fff;
width: 100%;
z-index: 500;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu > ul > li {
display: inline-block;
position: relative;
margin: 0;
padding: 0;
}
#cssmenu > ul > #menu-button {
display: none;
}
#cssmenu ul li a {
display: block;
font-family: Helvetica, sans-serif;
text-decoration: none;
}
#cssmenu > ul > li > a {
font-size: 12px;
font-weight: bold;
padding: 17px 12px;
color: #559c00;
text-transform: uppercase;
-webkit-transition: color 0.25s ease-out;
-moz-transition: color 0.25s ease-out;
-ms-transition: color 0.25s ease-out;
-o-transition: color 0.25s ease-out;
transition: color 0.25s ease-out;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 32px;
}
#cssmenu > ul > li:hover > a {
color: #72cc00;
}
#cssmenu li.has-sub::after {
display: block;
content: "";
position: absolute;
width: 0;
height: 0;
}
#cssmenu > ul > li.has-sub::after {
right: 15px;
top: 20px;
border: 5px solid transparent;
border-top-color: #559c00;
}
#cssmenu > ul > li:hover::after {
border-top-color: #ffffff;
}
#indicatorContainer {
position: absolute;
height: 12px;
width: 100%;
bottom: 0px;
overflow: hidden;
z-index: -1;
}
#pIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
z-index: -2;
-webkit-transition: left .25s ease;
-moz-transition: left .25s ease;
-ms-transition: left .25s ease;
-o-transition: left .25s ease;
transition: left .25s ease;
}
#cIndicator {
position: absolute;
height: 0;
width: 100%;
border: 12px solid transparent;
border-top-color: #2b2f3a;
top: -12px;
right: 100%;
z-index: -2;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
top: 70px;
opacity: 0;
-webkit-transition: opacity .3s ease, top .25s ease;
-moz-transition: opacity .3s ease, top .25s ease;
-ms-transition: opacity .3s ease, top .25s ease;
-o-transition: opacity .3s ease, top .25s ease;
transition: opacity .3s ease, top .25s ease;
z-index: 1000;
}
#cssmenu ul ul ul {
top: 37px;
padding-left: 5px;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu > ul > li:hover > ul {
left: auto;
top: 44px;
opacity: 1;
}
#cssmenu.align-right > ul > li:hover > ul {
left: auto;
right: 0;
opacity: 1;
}
#cssmenu ul ul li:hover > ul {
left: 210px;
top: 0;
opacity: 1;
}
#cssmenu.align-right ul ul li:hover > ul {
left: auto;
right: 170px;
top: 0;
opacity: 1;
padding-right: 5px;
}
#cssmenu ul ul li a {
width: 170px;
margin-right: 3px;
border-bottom: 1px solid #eeeeee;
padding: 10px 20px;
font-size: 12px;
color: #559c00;
font-weight:bold;
background: #fff;
-webkit-transition: all .35s ease;
-moz-transition: all .35s ease;
-ms-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 1px 1px 5px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}
#cssmenu.align-right ul ul li a {
text-align: right;
}
#cssmenu ul ul li:hover > a {
background: #fff;
color: #72cc00;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last > a {
}
#cssmenu > ul > li > ul::after {
content: '';
border: 6px solid transparent;
width: 0;
height: 0;
border-bottom-color: #559c00;
position: absolute;
top: -12px;
left: 30px;
}
#cssmenu.align-right > ul > li > ul::after {
left: auto;
right: 30px;
}
#cssmenu ul ul li.has-sub::after {
border: 5px solid transparent;
border-left-color: #9ea2a5;
right: 10px;
top: 12px;
-moz-transition: all .2s ease;
-ms-transition: all .2s ease;
-o-transition: all .2s ease;
transition: all .2s ease;
-webkit-transition: -webkit-transform 0.2s ease, right 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub::after {
border-left-color: transparent;
border-right-color: #9ea2a5;
right: auto;
left: 10px;
}
#cssmenu ul ul li.has-sub:hover::after {
border-left-color: #ffffff;
right: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#cssmenu.align-right ul ul li.has-sub:hover::after {
border-right-color: #ffffff;
border-left-color: transparent;
left: -5px;
-webkit-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
transform: rotateY(180deg);
}
#media all and (max-width: 800px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: auto;
}
#cssmenu.align-center ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: none;
}
#cssmenu ul {
width: auto;
}
#cssmenu .submenuArrow,
#cssmenu #indicatorContainer {
display: none;
}
#cssmenu > ul {
height: auto;
display: block;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu li,
#cssmenu > ul > li {
display: none;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu ul > li:hover > ul,
#cssmenu ul ul > li:hover > ul,
#cssmenu.align-right ul ul,
#cssmenu.align-right ul ul ul,
#cssmenu.align-right ul > li:hover > ul,
#cssmenu.align-right ul ul > li:hover > ul {
position: relative;
left: auto;
top: auto;
opacity: 1;
padding-left: 0;
padding-right: 0;
right: auto;
}
#cssmenu ul .has-sub::after {
display: none;
}
#cssmenu ul li a {
padding: 12px 20px;
}
#cssmenu ul ul li a {
border: 0;
background: none;
width: auto;
padding: 8px 35px;
}
#cssmenu.align-right ul ul li a {
text-align: left;
}
#cssmenu ul ul li:hover > a {
background: none;
color: #8c9195;
}
#cssmenu ul ul ul a {
padding: 8px 50px;
}
#cssmenu ul ul ul ul a {
padding: 8px 65px;
}
#cssmenu ul ul ul ul ul a {
padding: 8px 80px;
}
#cssmenu ul ul ul ul ul ul a {
padding: 8px 95px;
}
#cssmenu > ul > #menu-button {
display: block;
cursor: pointer;
}
#cssmenu #menu-button > a {
padding: 14px 20px;
}
#cssmenu ul.open li,
#cssmenu > ul.open > li {
display: block;
}
#cssmenu > ul.open > li#menu-button > a {
color: #fff;
border-bottom: 1px solid rgba(150, 150, 150, 0.1);
}
#cssmenu ul ul::after {
display: none;
}
#cssmenu #menu-button::after {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #559c00;
border-bottom: 2px solid #559c00;
right: 20px;
top: 15px;
}
#cssmenu #menu-button::before {
display: block;
content: '';
position: absolute;
height: 3px;
width: 22px;
border-top: 2px solid #559c00;
right: 20px;
top: 25px;
}
#cssmenu ul.open #menu-button::after,
#cssmenu ul.open #menu-button::before {
border-color: #fff;
}
}
<code>
I'll be happy if you help me how to fix this issue. Thanks in advance.
You have apply overflow:hidden for the wrapper class. For that reason it is hiding the submenus. Add the following style in your CSS, hopefully it will fix the issue.
header > div.wrapper:first-child
{
overflow:visible !important;
}
NOTE: You can try without !important keyword, if it is not working then apply it like above. Because i am not sure about the order of your CSS written.
I cannot find a way to center this, nor has other searches helped me. This was generated by css menus.
Ive tried a few things ive found searching around, nothing worked yet. Hoping someone may know how.
html
<body>
<div id='cssmenu'>
<ul>
<li><a href='#'>Home</a></li>
<li class='active'><a href='#'>Products</a>
<ul>
<li><a href='#'>Product 1</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
<li><a href='#'>Product 2</a>
<ul>
<li><a href='#'>Sub Product</a></li>
<li><a href='#'>Sub Product</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'>About</a></li>
<li><a href='#'>Contact</a></li>
</ul>
</div>
</body>
css
#import url(http://fonts.googleapis.com/css?family=Montserrat:400,700);
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu > ul > li > a {
padding: 17px;
font-size: 12px;
letter-spacing: 1px;
text-decoration: none;
color: #dddddd;
font-weight: 700;
text-transform: uppercase;
}
#cssmenu > ul > li:hover > a {
color: #ffffff;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 30px;
}
#cssmenu > ul > li.has-sub > a:after {
position: absolute;
top: 22px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu > ul > li.has-sub > a:before {
position: absolute;
top: 19px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu > ul > li.has-sub:hover > a:before {
top: 23px;
height: 0;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
left: auto;
right: 0;
}
#cssmenu li:hover > ul > li {
height: 35px;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li a {
border-bottom: 1px solid rgba(150, 150, 150, 0.15);
padding: 11px 15px;
width: 170px;
font-size: 12px;
text-decoration: none;
color: #dddddd;
font-weight: 400;
background: #333333;
}
#cssmenu ul ul li:last-child > a,
#cssmenu ul ul li.last-item > a {
border-bottom: 0;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #ffffff;
}
#cssmenu ul ul li.has-sub > a:after {
position: absolute;
top: 16px;
right: 11px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu.align-right ul ul li.has-sub > a:after {
right: auto;
left: 11px;
}
#cssmenu ul ul li.has-sub > a:before {
position: absolute;
top: 13px;
right: 14px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
-webkit-transition: all .25s ease;
-moz-transition: all .25s ease;
-ms-transition: all .25s ease;
-o-transition: all .25s ease;
transition: all .25s ease;
}
#cssmenu.align-right ul ul li.has-sub > a:before {
right: auto;
left: 14px;
}
#cssmenu ul ul > li.has-sub:hover > a:before {
top: 17px;
height: 0;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
}
#cssmenu.align-center > ul {
text-align: left;
}
#cssmenu ul li {
width: 100%;
border-top: 1px solid rgba(120, 120, 120, 0.2);
}
#cssmenu ul ul li,
#cssmenu li:hover > ul > li {
height: auto;
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
border-bottom: 0;
}
#cssmenu > ul > li {
float: none;
}
#cssmenu ul ul li a {
padding-left: 25px;
}
#cssmenu ul ul ul li a {
padding-left: 35px;
}
#cssmenu ul ul li a {
color: #dddddd;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li.active > a {
color: #ffffff;
}
#cssmenu ul ul,
#cssmenu ul ul ul,
#cssmenu.align-right ul ul {
position: relative;
left: 0;
width: 100%;
margin: 0;
text-align: left;
}
#cssmenu > ul > li.has-sub > a:after,
#cssmenu > ul > li.has-sub > a:before,
#cssmenu ul ul > li.has-sub > a:after,
#cssmenu ul ul > li.has-sub > a:before {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 17px;
color: #dddddd;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
font-weight: 700;
}
#cssmenu #menu-button:after {
position: absolute;
top: 22px;
right: 17px;
display: block;
height: 4px;
width: 20px;
border-top: 2px solid #dddddd;
border-bottom: 2px solid #dddddd;
content: '';
}
#cssmenu #menu-button:before {
position: absolute;
top: 16px;
right: 17px;
display: block;
height: 2px;
width: 20px;
background: #dddddd;
content: '';
}
#cssmenu #menu-button.menu-opened:after {
top: 23px;
border: 0;
height: 2px;
width: 15px;
background: #ffffff;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
#cssmenu #menu-button.menu-opened:before {
top: 23px;
background: #ffffff;
width: 15px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#cssmenu .submenu-button {
position: absolute;
z-index: 99;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.2);
height: 46px;
width: 46px;
cursor: pointer;
}
#cssmenu .submenu-button.submenu-opened {
background: #262626;
}
#cssmenu ul ul .submenu-button {
height: 34px;
width: 34px;
}
#cssmenu .submenu-button:after {
position: absolute;
top: 22px;
right: 19px;
width: 8px;
height: 2px;
display: block;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:after {
top: 15px;
right: 13px;
}
#cssmenu .submenu-button.submenu-opened:after {
background: #ffffff;
}
#cssmenu .submenu-button:before {
position: absolute;
top: 19px;
right: 22px;
display: block;
width: 2px;
height: 8px;
background: #dddddd;
content: '';
}
#cssmenu ul ul .submenu-button:before {
top: 12px;
right: 16px;
}
#cssmenu .submenu-button.submenu-opened:before {
display: none;
}
}
fiddle
One solution is to change following:
#cssmenu #menu-button {
margin: 0;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: inline-block;/*Change display to inline block*/
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
text-align: center;/*Add text-align center*/
}
#cssmenu {
font-family: Montserrat, sans-serif;
background: #333333;
width: 100%;/*Add width 100%*/
}
fiddle