2017-1-9css

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>
posted @ 2017-01-09 17:56  路过的花花世界  阅读(1261)  评论(0)    收藏  举报