知行合一，止于至善
千里之行，始于足下；合抱之木，生于毫末；九层之台，起于累土Div+CSS布局笔记2-纵向导航菜单
示例
<style type="text/css">
body { font-family: Verdana; font-size: 12px; line-height: 1.5; }
a { color: #000; text-decoration: none; }
a:hover { color: #F00; }
#menu { width: 100px; border: 1px solid #CCC; border-bottom:none;}
#menu ul { list-style: none; margin: 0px; padding: 0px; }
#menu ul li { background: #eee; padding: 0px 8px; height: 26px; line-height: 26px; border-bottom: 1px solid #CCC; position:relative; }
#menu ul li ul { display:none; position: absolute; left: 100px; top: 0px; width:100px; border:1px solid #ccc; border-bottom:none; }
#menu ul li:hover ul { display:block;}
</style>
<div id="menu">
<ul>
<li><a href="#">网页版式布局</a>
<ul>
<li><a href="#">自适应宽度</a></li>
<li><a href="#">固定宽度</a></li>
</ul>
</li>
<li><a href="#">div+css教程</a>
<ul>
<li><a href="#">新手入门</a></li>
<li><a href="#">视频教程</a></li>
<li><a href="#">常见问题</a></li>
</ul>
</li>
<li><a href="#">div+css实例</a></li>
</ul>
</div>
position: relative;
A relative positioned element is positioned relative to its normal position.the reserved space for the element is still preserved in the normal flow.Relatively positioned elements are often used as container blocks for absolutely positioned elements.
position: absolute;
relative to the first parent element that has a position other than static. If no such element is found, the containing block is <html>.Absolutely positioned elements are removed from the normal flow. The document and other elements behave like the absolutely positioned element does not exist.
position:fixed;
2、分组
p,div,span{
font-size:20px;
}
参考文档：
Posted in: Uncategorized | Tags: css, div, position, 菜单
Comments are closed.