如皋网站建设-如皋网站优化-如皋SEO-如皋网页设计

如皋网站建设咨询热线:15862770030
网站首页 > 网站建设知识 > 网站建设之CSS中使用项目列表创建一个典型的下拉菜单

网站建设之CSS中使用项目列表创建一个典型的下拉菜单

时间:2017/8/29 20:40:46 标签:


       
       前面介绍了常规的纵向栏目列表和横向导航条的创建方法,实际应用中,下拉菜单也是比较常用的,这里继续演示一个典型的下拉菜单的创建方法,横向排列部分跟前面的教程案例是完全一样的,所以这里直接拷贝过来。这一节我们要增加的部分体现在下拉效果上面,在案例中我们给第一个导航添加5个下拉菜单。

       body部分代码非常好理解,把需要下拉的列表项li里面再嵌入一个ul项目列表,同时添加5个li列表项即可。

       css下拉部分是这一节的重点:

       1)横向列表项嵌入的ul无鼠标动作的样式;
.nav ul li ul{display:none;}表示嵌入的这个ul在默认状态是不显示的,隐藏起来,也就是看不到下拉效果。

       2)鼠标hover效果下的下拉菜单项目列表ul样式:
.nav ul li:hover ul{
display:block;
position:absolute;
top:38px;
left:8px;
width:160px;
}
这个样式表示外层li的hover效果,鼠标移动到列表项上面的状态,这里同时使用块级元素属性和绝对定位,让嵌入的这个ul可以对外层的li列表项在垂直方向对齐。

       3)鼠标hover效果下的下拉菜单列表项li样式:
.nav ul li:hover ul li{margin-top:1px;}这个很简单,是对嵌入的这个项目列表的列表项加一个像素的外边距,补白,形成块与块之间自然分割的效果。

       4)后面的a标签同样使用块级元素属性,加背景色,hover效果变色即可。

       完整测试代码如下;

<!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=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.nav{
        font-size:12px;
        }
.nav ul{
                list-style-type:none;
                padding-bottom:25px;
                }

.nav ul li{
                        float:left;
                        width:160px;
                        margin-right:1px;
                        height:26px;
                        line-height:26px;
                        }

.nav  ul li a{
                        display:block;
                        list-style:none;
                        background-color:#FF0000;
                        color:#FFFFFF;
                        text-align:center;
                        text-decoration:none;
                        }

.nav ul li a:hover{
                              background-color:#000000;
                          }

.nav ul li ul{
                    display:none;
                }

.nav ul li:hover ul{
                                        display:block;
                                        position:absolute;
                                        top:38px;
                                        left:8px;
                                        width:160px;
                                        }

.nav ul li:hover ul li{
                                margin-top:1px;
                              }

.nav ul li:hover ul li a{
                                 display:block; 
                                 background:#FF9900;
                                }

.nav ul li:hover ul li a:hover{
                                           background:#000000; 
                                          }

</style>
</head>

<body>
<div class="nav">
<ul>
    <li><a href="#">第一个列表项</a>
        <ul>
                <li><a href="#">我是下拉菜单</a></li>
                <li><a href="#">我是下拉菜单</a></li>
                <li><a href="#">我是下拉菜单</a></li>
                <li><a href="#">我是下拉菜单</a></li>
                <li><a href="#">我是下拉菜单</a></li>
        </ul>
    </li>
    <li><a href="#">第二个列表项</a></li>
    <li><a href="#">第三个列表项</a></li>
    <li><a href="#">第四个列表项</a></li>
    <li><a href="#">第五个列表项</a></li>
</ul>
</div>
</body>
</html>

  

上一篇:网站建设之CSS中使用项目列表创建一个典型的纵向列表菜单栏
下一篇:没有资料