2017-1-9css

css

border-image详解
http://www.360doc.com/content/14/1016/13/2792772_417403574.shtml

最简单的横向二级导航栏实现

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8" />

    <title>Document</title>

<style type="text/css">

#test{

    text-align: center;

}

#test ul{

    list-style: none;

}

#test ul li{

    float: left;

    width: 85px;

}

#test ul li a{

}

#test ul li a:hover{

}

#test ul li ul{

   display: none;

   /*position: absolute;*/

}

#test ul li:hover ul{

    display: block;

    padding:0;

}

#test ul li:hover ul li{

}

#test ul li ul li{

    float: none;

}

#test ul li ul li a{

}

#test ul li ul li a:hover{

}

</style>

</head>

<body>

    <body>

<div id="test">

<ul>

<li><a id="current" href="#">首页</a></li>

<li><a href="#">网页版式</a>

    <ul>

    <li><a href="#">自适应宽度</a></li>

    <li><a href="#">固定宽度</a></li>

    </ul>

</li>

<li><a href="#">web教程</a>

    <ul>

    <li><a href="#">新手入门</a></li>

    <li><a href="#">视频教程</a></li>

    <li><a href="#">常见问题</a></li>

    </ul>

</li>

<li><a href="#">web实例</a></li>

<li><a href="#">常用代码</a></li>

</ul>

</div>

</body>

</body>

</html>