Help in trying to center a menu horizontal list

HTML & CSS
1

Starting to go a little nuts on this. Try as i cannot center this menu’s text. I tried display:inline-block on UL and LI but nada.

Any help with this would be much appreciated!!


<!doctype html>
<html lang=''>
<head>
   <meta charset='utf-8'>
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="styles.css">
   
   <title>CSS MenuMaker</title>
</head>
<body>

<div id='cssmenu'>
<ul>
  <li><a href='#'><span>Home</span></a></li>
  <li><a href='#'><span>Blog</span></a></li>
   <li class='has-sub'><a href='#'><span>topics</span></a>
      <ul>
         <li class='has-sub'><a href='#'><span>Latest Topics</span></a>
            <ul>
               <li><a href='#'><span>topic</span></a></li>
               <li><a href='#'><span>topic</span></a></li>
               <li><a href='#'><span>topic</span></a></li>
               <li class='last'><a href='#'><span>topic</span></a></li>
            </ul>
         </li>
         <li class='has-sub'><a href='#'><span>2ndtopic</span></a>
            <ul>
               <li><a href='#'><span>Sub Product</span></a></li>
               <li class='last'><a href='#'><span>Sub Product</span></a></li>
            </ul>
         </li>
      </ul>
   </li>
   <li><a href='#'><span>about</span></a></li>
   <li><a href='#'><span>about</span></a></li>
   <li><a href='#'><span>about</span></a></li>
   <li><a href='#'><span>About</span></a></li>
   <li class='last'><a href='#'><span>Shop</span></a></li>
</ul>
</div>

</body>
<html>

[code]@import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
margin-left: auto;
margin-right: auto;
width: 70%;

}
#cssmenu ul,
#cssmenu li {
list-style: none;
margin: 0;
padding: 0;

}
#cssmenu ul {
position: relative;
z-index: 597;

}
#cssmenu ul li {
float: left;
min-height: 1px;
vertical-align: middle;

}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
#cssmenu ul ul li {
float: none;
}
#cssmenu ul ul ul {
top: 0;
left: 190px;
width: 190px;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333333;
border-bottom: 4px solid #FCB915;
font-family: ‘Times New Roman’, Tahoma, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: ‘’;
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #FCB915;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #333;
color: #FCB915;
border: 1px solid #333;
border-top: 0 none;
border-bottom: 1px solid #fff;
line-height: 150%;
padding: 16px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #333;
}
#cssmenu ul ul li:hover > a {
background: #FCB915;
color: #fff;
}
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #FCB915;
-webkit-box-shadow: 0 1px 0 #FCB915;
box-shadow: 0 1px 0 #FCB915;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: ‘+’;
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #FCB915;
color: #fff;
}
#cssmenu ul li.has-sub > a:after {
content: ‘+’;
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333333;
color: #FCB915;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
[/code]

2

You aren’t using display:inline-block in that example though?

#cssmenu > ul
{
text-align:center;
}
#cssmenu ul li {
  
display:inline-block
  min-height: 1px;
  vertical-align: middle;
}

Remove the float on the <li>. Add in the text-align in the above code. Add in the display:inline-block too.

3

You’ll also need this code for hte dropdown

 #cssmenu ul ul{text-align:left;}
#cssmenu ul ul li {
  width:100%;
}
4

Thanks for the reply. The inline block was making the menu display strangely so I just pasted in the working code as it was.

I’ve added in your CSS but again it’s making the menu display go all over the place. I’m doing something wrong! Just don’t know what?

[code] @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
padding: 0;
margin: 0;
border: 0;
width: auto;
margin-left: auto;
margin-right: auto;
width: 70%;

}
#cssmenu ul {
text-align:center;
}
#cssmenu li {

display:inline-block
min-height: 1px;
vertical-align: middle;

}
#cssmenu ul {
position: relative;
z-index: 597;

}
#cssmenu ul li {
min-height: 1px;
vertical-align: middle;

}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
position: relative;
z-index: 599;
cursor: default;
}
#cssmenu ul ul {
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
text-align:left;}
}
#cssmenu ul ul li {
float: none;
width:100%;
}
#cssmenu ul ul ul {
top: 0;
left: 190px;
width: 190px;
}
#cssmenu ul li:hover > ul {
visibility: visible;
}
#cssmenu ul ul {
bottom: 0;
left: 0;
}
#cssmenu ul ul {
margin-top: 0;
}
#cssmenu ul ul li {
font-weight: normal;
}
#cssmenu a {
display: block;
line-height: 1em;
text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
background: #333333;
border-bottom: 4px solid #FCB915;
font-family: ‘Times New Roman’, Tahoma, Arial, sans-serif;
font-size: 18px;
font-weight: bold;
}
#cssmenu > ul {
*display: inline-block;
}
#cssmenu:after,
#cssmenu ul:after {
content: ‘’;
display: block;
clear: both;
}
#cssmenu ul {
text-transform: uppercase;
}
#cssmenu ul ul {
border-top: 4px solid #FCB915;
text-transform: none;
min-width: 190px;
}
#cssmenu ul ul a {
background: #333;
color: #FCB915;
border: 1px solid #333;
border-top: 0 none;
border-bottom: 1px solid #fff;
line-height: 150%;
padding: 16px 20px;
font-size: 12px;
}
#cssmenu ul ul ul {
border-top: 0 none;
}
#cssmenu ul ul li {
position: relative;
}
#cssmenu ul ul li:first-child > a {
border-top: 1px solid #333;
}
#cssmenu ul ul li:hover > a {
background: #FCB915;
color: #fff;
}
#cssmenu ul ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
-moz-box-shadow: 0 1px 0 #FCB915;
-webkit-box-shadow: 0 1px 0 #FCB915;
box-shadow: 0 1px 0 #FCB915;
}
#cssmenu ul ul li:last-child:hover > a {
-moz-border-radius: 0 0 0 3px;
-webkit-border-radius: 0 0 0 3px;
border-radius: 0 0 0 3px;
-moz-background-clip: padding;
-webkit-background-clip: padding-box;
background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
content: ‘+’;
position: absolute;
top: 50%;
right: 15px;
margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
background: #FCB915;
color: #fff;
}
#cssmenu ul li.has-sub > a:after {
content: ‘+’;
margin-left: 5px;
}
#cssmenu ul li.last ul {
left: auto;
right: 0;
}
#cssmenu ul li.last ul ul {
left: auto;
right: 99.5%;
}
#cssmenu a {
background: #333333;
color: #FCB915;
padding: 0 20px;
}
#cssmenu > ul > li > a {
line-height: 48px;
font-size: 12px;
}
[/code]

5

Please do not just throw my styles in. Find my rules I mentioned and update what I said. You didn’t even copy paste this corectly. This is missing a semi-colon on display:inline-block. Please take your original example and add in the rules like I said.

#cssmenu li {
  display:inline-block
  min-height: 1px;
  vertical-align: middle;
}
6

Sorry, I’m doing the best I can here. It was the missing semi-colon that was throwing me off.

Your code worked. Thank you very much.

7

Maybe not. The menu is now jumping when hovering over it (the products submenu).

8

This is the full CSS. Just use this. Something is not being transferred from my version to yours.

  @import url(http://fonts.googleapis.com/css?family=Oxygen+Mono);
/* Starter CSS for Menu */
#cssmenu {
  padding: 0;
  margin: 0;
  border: 0;
  width: auto;
 margin-left: auto;
    margin-right: auto;
    width: 70%;
}
#cssmenu ul,
#cssmenu li {
  list-style: none;
  margin: 0;
  padding: 0;
}
#cssmenu ul {
  position: relative;
  z-index: 597;
}
#cssmenu ul li {
  display:inline-block;
  min-height: 1px;
  vertical-align: middle;
}
#cssmenu ul li.hover,
#cssmenu ul li:hover {
  position: relative;
  z-index: 599;
  cursor: default;
}
#cssmenu ul ul {
  visibility: hidden;
  position: absolute;
  top: 100%;
  left: 0;text-align:left;
  z-index: 598;
  width: 100%;
}
#cssmenu ul ul li {
  float: none;
}
#cssmenu ul ul ul {
  top: 0;
  left: 190px;
  width: 190px;
}
#cssmenu ul li:hover > ul {
  visibility: visible;
}
#cssmenu ul ul {
  bottom: 0;
  left: 0;
}
#cssmenu ul ul {
  margin-top: 0;
}
#cssmenu ul ul li {
  font-weight: normal;
}
#cssmenu a {
  display: block;
  line-height: 1em;
  text-decoration: none;
}
/* Custom CSS Styles */
#cssmenu {
  background: #333333;
  border-bottom: 4px solid #FCB915;
  font-family: 'Times New Roman', Tahoma, Arial, sans-serif;
  font-size: 18px;
  font-weight: bold;
}
#cssmenu > ul {
  *display: inline-block;text-align:center;
}
#cssmenu:after,
#cssmenu ul:after {
  content: '';
  display: block;
  clear: both;
}
#cssmenu ul {
  text-transform: uppercase;
}
#cssmenu ul ul {
  border-top: 4px solid #FCB915;
  text-transform: none;
  min-width: 190px;
}
#cssmenu ul ul a {
  background: #333;
  color: #FCB915;
  border: 1px solid #333;
  border-top: 0 none;
  border-bottom: 1px solid #fff;
  line-height: 150%;
  padding: 16px 20px;
  font-size: 12px;
}
#cssmenu ul ul ul {
  border-top: 0 none;
}
#cssmenu ul ul li {
  position: relative;width:100%;
}
#cssmenu ul ul li:first-child > a {
  border-top: 1px solid #333;
}
#cssmenu ul ul li:hover > a {
  background: #FCB915;
  color: #fff;
}
#cssmenu ul ul li:last-child > a {
  -moz-border-radius: 0 0 3px 3px;
  -webkit-border-radius: 0 0 3px 3px;
  border-radius: 0 0 3px 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  -moz-box-shadow: 0 1px 0 #FCB915;
  -webkit-box-shadow: 0 1px 0 #FCB915;
  box-shadow: 0 1px 0 #FCB915;
}
#cssmenu ul ul li:last-child:hover > a {
  -moz-border-radius: 0 0 0 3px;
  -webkit-border-radius: 0 0 0 3px;
  border-radius: 0 0 0 3px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
}
#cssmenu ul ul li.has-sub > a:after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -8px;
}
#cssmenu ul li:hover > a,
#cssmenu ul li.active > a {
  background: #FCB915;
  color: #fff;
}
#cssmenu ul li.has-sub > a:after {
  content: '+';
  margin-left: 5px;
}
#cssmenu ul li.last ul {
  left: auto;
  right: 0;
}
#cssmenu ul li.last ul ul {
  left: auto;
  right: 99.5%;
}
#cssmenu a {
  background: #333333;
  color: #FCB915;
  padding: 0 20px;
}
#cssmenu > ul > li > a {
  line-height: 48px;
  font-size: 12px;
}
9

Yes thanks. It was my fault again. I had an active css element in the html which was setting off the alignment when I copied and pasted it over. .

Many thanks for all your help, I do appreciate it.

10

You’re welcome :smile: .