子菜单内的CSS中心和侧面Div

Question

HTML:

<div id="nav">
  <ul id="main-nav">
    <li> <a href="#">Home</a> </li>
    <li>
      <a href="#">Catagory</a>
      <ul class="sub-nav">
        <li> <a href="#">SubCat1</a> </li>
        <li>
          <a href="#">SubCat2</a>
          <ul>
            <li> <a href="#">SubCat2Sub</a> </li>
            <li> <a href="#">SubCatSsub</a> </li>
          </ul>
        </li>
      </ul>
    </li>
    <li> <a href="#">About</a> </li>
    <li> <a href="#">How to order</a> </li>
  </ul>
</div>

How can I center the div id="nav" ? and how can I make Subcat2 beside Subcat1?

See JSFiddle for Demo.

Answer 1

By using following CSS (changes are commented)

#nav{
    font-size: 1px;
    text-align: center;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
 }

 #nav ul{
    padding: 0;
    list-style: none;
 }

 #nav a{
    background: pink;
    color: yellow;
    font-family: sans-serif;
    text-decoration: none;
 }

 #nav a:hover{
    background: pink;
 }

 #main-nav{
 }

 #main-nav > li{
    float: left;
 }

 #main-nav > li > a{
    font-size: 18em;
    line-height: 2em;
 }

 .sub-nav > li{
    display: inline-block; /* brings elements beside each other */
    vertical-align: top; /* makes elements more towards top of their parent */
 }

 .sub-nav > li > a{
    font-size: 16em;
    line-height: 1.5em;
    background: blue;
 }

 .sub-nav ul{
    top: 0;
 }

 .sub-nav ul a{
    font-size: 14em;
    line-height: 1.5em;
    background: red;
 }

 #main-nav li:hover > ul{
    display: block;
    text-align: left;
 }

 .sub-nav, .sub-nav ul{
    display: none;
    position: absolute;
 }

 #main-nav li:hover > ul li ul{
    display: block;
    position: relative;
 }

 #main-nav{display: inline-block;} /*it makes parent's text-align: center; take effect on it*/

Answer 2

If you have a parent element for the #nav (or you can use the body ) you can set the parent to text-align:center and the #nav to display:inline-block .

JSFiddle Demo

CSS

body {
    text-align: center;
}

#nav {
    font-size: 1px;
    text-align:center; 
    margin-left:auto; 
    margin-right:auto; 
    display: inline-block;

}