053288628280
您的当前位置:首页 > 技术支持 > 建站知识 >

div+css的水平二级菜单制作教程

时间:2018-03-16

菜单的最后效果:
 

div+css的水平二级菜单制作教程
div+css的水平二级菜单制作教程
不久前,我写在了如何创建一个下拉菜单上的教程CSS和jQuery的,今天我想就如何去创建一个水平subnav简单的导航。
在大多数情况下我们可以达到这个效果纯粹使用CSS,但由于我们必须照顾我们的IE6,我们将使用jQuery的几行以涵盖所有的理由。
 演示地址

制作教程:

1.html 代码

 

 
<ul id="topnav">
    <li><a href="#">Link</a></li>
    <li>
        <a href="#">Link</a>
        <!--Subnav Starts Here-->
        <span>
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a> |
            <a href="#">Subnav Link</a>
        </span>
        <!--Subnav Ends Here-->
    </li>
    <li><a href="#">Link</a></li>
</ul>

 

 

 

div+css的水平二级菜单制作教程
 

 

 ul#topnav {
 margin: 0; padding: 0;
 float: left;
 width: 970px;
 list-style: none;
 position: relative; /*--Set relative positioning on the unordered list itself - not on the list item--*/
 font-size: 1.2em;
 background: url(topnav_stretch.gif) repeat-x;
}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 1px solid #555; /*--Divider for each parent level links--*/
}
ul#topnav li a {
 padding: 10px 15px;
 display: block;
 color: #f0f0f0;
 text-decoration: none;
}
ul#topnav li:hover { background: #1376c9 url(topnav_active.gif) repeat-x; }
/*--Notice the hover color is on the list item itself, not on the link. This is so it can stay highlighted even when hovering over the subnav--*/

 

 

 

 

相关文章

Copyright © 2009-2017 千龙网络 版权所有  鲁ICP备09004053号 TAG SITEMAP