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用于演示。
最佳答案
通过使用以下 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*/
关于html - 子菜单内的 CSS 中心和侧 Div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23580191/