首页 > 代码库 > 下拉菜单的制作无js

下拉菜单的制作无js

下拉菜单有许多种制作方法;

今天我们就做最简单的一种;技术分享

 

 

话不多说先看html

<body>

<div class="menubox">

<ul>

<li class="list1"><a href="">首页</a></li>

<li class="list1"><a href="">公司简介</a>

<ul>

<li class="list2"><a href="">公司的历史</a></li>

<li class="list2"><a href="">公司的发展</a></li>

<li class="list2"><a href="">公司的规模</a></li>

</ul>

</li>

<li class="list1"><a href="">产品信息</a>

<ul>

<li class="list2"><a href="">产品简介</a></li>

<li class="list2"><a href="">产品价格</a></li>

<li class="list2"><a href="">产品型号</a></li>

</ul>

</li>

<li class="list1"><a href="">联系我们</a>

<ul>

<li class="list2"><a href="">电话</a></li>

<li class="list2"><a href="">邮箱</a></li>

<li class="list2"><a href="">微信</a></li>

</ul>

</li>

</ul>

</div>

</body>

这里用到的是一种嵌套的结构;这样不用定位也可以在list1的下方;

好了我们看下css 

<style>

*{margin:0px;padding:0px;}

                这个是初使化;

.menubox{margin:0 auto;width:800px;height:36px;}

                这个是将导航菜单定 位在中间;

.menubox>ul{width:100%;height:100%;}

 

.list1{ width:200px;height:36px;

float:left;list-style-type:none;

font-size:18px;line-height:36px;

font-weight:bolder;

background:#F22765;text-align:center;

 

}

            设置list1的样式;垂直居中用lineheight=height;水平居中用:text:center;

 

.list1:hover{background:#DE18CC}

        设置鼠标放上去时的样式

.list1>a{text-decoration:none;color:#fff;}

    设置list1下的a的样式;注意如果color在list1上设置是没有作用的;因为有a ;所以要在a 上设置字体颜色;

.list2{width:200px;height:36px;

font-size:14px;background:#F4D613;

line-height: 36px;text-align:center;

list-style-type:none;margin-bottom:2px;

display:none;

 

}

这个和list1几乎一样;但是这里多了一个display:none; 这个就是隐藏;

 

.list2:hover{background:#F75839}

这个就不用讲了吧!

.list1:hover .list2{display:block;}

这个是最重要的;这个就是让鼠标放在list1上让list2显示和隐藏的;

.list2>a{text-decoration:none;color:#6A5757;}

这个也不用讲了吧;

</style>

下拉菜单的制作无js