css-右侧导航 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" href="DropNav.css"  type="text/css"/>
<title>横向导航</title>
</head>

<body>

<ul id="nav">
    <li><a href="#">导航1</a>
        <ul>
            <li><a href="#"> 下拉导航1</a></li>
            <li><a href="#">下拉导航1</a></li>
            <li><a href="#">下拉导航1</a></li>
            <li><a href="#">下拉导航1</a></li>
        </ul>
    </li>
    <li><a href="#">导航2</a>
        <ul>
            <li><a href="#">下拉导航2</a></li>
            <li><a href="#">下拉导航2</a></li>
            <li><a href="#">下拉导航2</li>
            <li><a href="#">下拉导航2</a></li>
        </ul>
     </li>
    <li><a href="#">导航3</a>
        <ul>
            <li><a href="#">下拉导航3</a></li>
            <li><a href="#">下拉导航3</a></li>
            <li><a href="#">下拉导航3</a></li>
            <li><a href="#">下拉导航3</a></li>
        </ul>
     </li>
</ul>
</body>
</html>

@charset "utf-8";
/* CSS Document */
ul{
    padding:0px;/*为了边框所以内外边距为0*/
    margin:0px;
    list-style:none;/*去掉黑点*/
    width:130px;/*设定宽度*/
    font-size:12px;/*设定字体*/
}
ul li{

    position:relative;/*布局为relative在父容器的内部为准，目的是形成单独的层，掩盖下面的内容*/
    border:1px solid #ccc;/*加上边框*/
}
li ul{
    position:absolute;/*绝对布局*/
    left:129px;/*根据父容器的的父容器ul的宽度来定位*/
    top:0px;/*也是定位*/
    display:none;/*不显示*/
}
ui li a{
    display:block;/*块显示*/
    text-decoration:none;/*无下划线*/
    color:#777;
    background:#fff;
    padding:5px;
    border:1px solid #ccc;/*边框*/
    border-bottom:0px;
}    
li:hover ul{
display:block;/*显示内容*/
}

posted on 2011-08-07 21:53  帘  阅读(1322)  评论(0)  编辑  收藏  举报

导航