Html CSS中间和侧面Div内部子菜单

HTML:

如何使div

id=“nav”

居中？我怎样才能在Subcat1旁边创建Subcat2

请参阅演示。

使用以下CSS（更改已注释）

---

如果#nav有父元素（或者可以使用

主体

），则可以将父元素设置为

文本对齐：居中

，将#nav设置为

显示：内联块

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

---

除非设置静态宽度，否则无法将导航居中。比如说，300px。你也可以使用一个百分比，但它需要设置。

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

body {
    text-align: center;
}

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

}