html - 子菜单内的 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>

如何让 div id="nav" 居中？以及如何在 Subcat1 旁边制作 Subcat2？

参见 JSFiddle用于演示。

Answer 1

通过使用以下 CSS(更改已注释)

#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*/