导航栏下拉菜单制作

最新推荐文章于 2022-10-22 20:33:16 发布

hero_123456

最新推荐文章于 2022-10-22 20:33:16 发布

阅读量983

点赞数

本文链接：https://blog.csdn.net/hero_123456/article/details/8179044

版权

为了美化网页做了一个导航栏的下拉菜单，仅供参考。PS不到家,代码有点乱。仅提供一个思路。

以下是源码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<head>
<title>Ǳ</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<style tpye="text/css">
*{
    margin:0;
    padding:0;
    border:0;
    }
div{
    margin:300px;
    }
#nav li {
    list-style:none;
    float:left;
    width:100px;

   position:relative;
    }
.a:link{
        background:#000;
      display:block;
      text-align:center;
     line-height:37px;
     color:#fff;
      text-decoration:none;

      }
.a:hover {
    background:#666;
    color:#fff;
    }
.a:visited {
    color:#fff;
    }
#nav li dl{
    width:130px;
    background:#000;
    display:none;
    position:absolute;
    }
#nav li dl dd a{
display:block;
color:#fff;
line-height:37px;
text-indent:20px;
text-decoration:none;
}

#nav li:hover dl {
        display:block;
        }
#nav li dl dd a:link{
    background:#333333;
    }
#nav li dl dd a:hover{
    background:#666666;
    }
#nav li dl dd a.list1{
    background:url(list_b.jpg);
    }
    #nav li dl dd a.list1:hover{
    background:url(list.jpg) ;
    }
.b:link{
background:url(nav_left.jpg);
      display:block;
      text-align:center;
     line-height:37px;
     color:#fff;
      text-decoration:none;
      }
.b:hover {
    background:url(nav_left_b.jpg);
    color:#fff;
    }
.b:visited {
    color:#fff;
    }

</style>
</head>
<body>
<div>
    <ul id="nav">
        <li ><a href="#" class="b" >首页</a></li>
        <li ><a href="#" class="a">关于我们</a>
            <dl>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#">联系我们</a></dd>
                <dd><a href="#" class="list1">联系我们</a></dd>
            </dl>
        </li>
        <li ><a href="#" class="a">公司介绍</a>
                <dl>
                <dd><a href="#">公司资历</a></dd>
                <dd><a href="#" class="list1">公司证书</a></dd>
                </dl>
        </li>
        <li><a href="#" class="a">产品介绍</a></li>
        <li><a href="#" class="a">技术支持</a></li>
    </ul>
<div>
</body>

文中使用到的图片，名字从上到下对应图片从左到右。

list.jpg

list_b.jpg

nav_left.jpg

nav_left_b.jpg

nav_right.jgp

nav_right_b.jpg

hero_123456

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
导航栏下拉菜单制作

为了美化网页做了一个导航栏的下拉菜单，仅供参考。PS不到家,代码有点乱。仅提供一个思路。以下是源码：http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">Ǳ*{ margin:0; padding:0; border:0; }div{ margin:300px;
复制链接

扫一扫