猎凡网络承接仿站、网站定制业务,诚邀您的合作! 猎凡网为你提供:dedecms织梦仿站帝国cms仿站网站定制、企业仿站等服务,欢迎您的访问!
<
>
当前位置: 首页 > 仿站知识

鼠标移动下拉菜单(下拉菜单之纯CSS实现方法)

时间:2021-04-27 17:06:20  来源:admin  作者:窗外楼

大家好,今天我们来分享一下用纯CSS实现下拉菜单效果的方法,首先我们看下效果图,如果你看过上一期的内容(CSS之垂直导航条)那么你就会发现,两者的外观主题基本一样,只不过结构稍微有些差别,所以今天我们主要讲构造,样式详解请参考上期内容

下拉菜单之纯CSS实现方法(CSS小白第五期)1.首先创建一个多层导航列表,本次只选取列表项中“Services”和“Products”两项为例。

下拉菜单之纯CSS实现方法(CSS小白第五期)

2.基本设置:首先清除内边距和外边距,去掉列表默认的项目符号,关闭链接文本下划线.,给列表一个边框和背景颜色(根据自己需要)

* {margin:0;padding:0;}

ul.nav, ul.nav ul {list-style-type:none;

border:1px solid #486B02;

background-color:#8BD400;}

ul.nav a {text-decoration:none;}

3.为了使导航列表水平排列,我们可以浮动列表项,并给它设定一个宽度,为了确保下拉菜单与导航列表中的菜单项垂直对齐,需要将下拉菜单列表的宽度设置成与导航列表中列表项的宽度相同。

ul.nav li {float:left;

width:8em;}

ul.nav li ul {width:8em;}

4.关键部分:接下来我们设置下拉菜单的效果,在下拉菜单被激活之前它是隐藏状态的,因此我们可以将下拉菜单列表的position属性设置为absolute,然后给它定位到屏幕的左侧外面。当鼠标悬停到某个导航列表项的时候,使用:hover,把下拉菜单的位置再改回来,这样就可以实现下拉菜单的效果了。

ul.nav li {float:left;

width:8em;}

ul.nav li ul {width:8em;

position:absolute;left:-999em;}

ul.nav li:hover ul {left:auto;}

5.最后就是美化了,把导航链接设置为块级元素,然后修改列表的外观,设置背景颜色和斜面边框效果,(此处可参考上期详解内容)

/*斜面框效果*/

ul.nav a {display:block;

color:#2B3F00;

text-decoration:none;

padding:0.3em 1em;

border-right:1px solid #486B02;

border-left:1px solid #E4FFD3;}

ul.nav li li a {border-top:1px solid #E4FFD3;

border-bottom:1px solid #486B02;

border-left:0;

border-right:0;}

/*移除重叠的边框*/

ul.nav li a.re {border-right:0;}

ul.nav ul {border-bottom:0;}


/*鼠标悬停效果*/

ul a:hover {color:#E4FFD3;

background-color:#6DA203;}

PS:如有漏洞请告知,谢谢!

本文网址:https://fangzhan.seobr.com/news/452.html
本文由猎凡仿站网发布,如果您还想了解更多关于网站仿制的文章,请点击查看 仿站知识 的其它文章,转发请注明来源及版权归属。
承接以下业务:传统网站改自适应网站、网站增加手机站、网站改全屏网站改大屏展示、GBK转UFT-8、DEDECMS转WORDPRESS、网站站群制作、企业网站设计、企业网站优化、网站托管等业务

相关文章

推荐资讯
热点标签

数年专注于仿站建站,擅长dedecms仿站、WORDPRESS仿站、帝国cms仿站、网站改版等业务! Copyright©2019 猎凡仿站网 All Rights Reserved