介绍 & lt; nav>
& lt; ul>
& lt; li> https://www.yisu.com/zixun/& lt; a href=" # ">导航一
李
<李> 导航二
<李> 导航三
李
<李> 导航四
李
<李> 导航五
李
<李> 导航六
nav {
保证金:100 px的汽车;
text-align:中心;
}
nav ul {
border - radius: 10 px;
背景:线性渐变(底、# efefef # bbbbbb);
填充:0 20 px;
显示:inline-table;
位置:相对;
不必:1 px 1 px 3 px # 666;
}
nav ul ul {
显示:没有;
}
李nav ul {
浮:左;
}
{后nav ul::
内容:““;
显示:块;
明确:;
}
nav ul李的{
显示:块;
填充:25 px 40 px;
颜色:# 000;
文字修饰:没有;
字体类型:“微软雅黑“;
}
nav ul李:徘徊在ul {
显示:块;
}
nav ul李:{徘徊
背景:线性渐变(底、# 4 f5964 # 5 f6975);
}
nav ul李:徘徊一个{
颜色:# FFF;
}
nav ul ul {
背景:# 5 f6975;
border - radius: 0;
位置:绝对的;
上图:100%;
填充:0;
}
李nav ul ul {
浮:没有;
border-top: 1 px固体# 6 b727c;
边界底部:1 px固体# 575 f6a;
}
nav ul ul李的{
颜色:# FFF;
}
nav ul ul李答:{徘徊
背景:# 4 b545f;
}
nav ul ul ul {
宽度:100%;
位置:绝对的;
左:100%;
上图:50%;
}
这篇文章给大家分享的是有关使用CSS3实现导航下拉菜单的方法的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
首先要使用HTML当中的& lt; ul> & lt; li> & lt;/li> & lt;/ul>进行菜单的制作,然后我们会用到一个悬停语句,即鼠标悬停在某个区域内的时候,触发下级菜单的显示,其中需要了解到的是显示的属性,我们将会使用块和所有的属性实现下拉菜单的出现和隐藏。然后我们会给各个菜单定义位置来确定菜单的位置,最后使用::后伪元素选择器来清除浮动。
<强>步骤一:利用HTML制作出菜单样式
<强>步骤二:利用css3实现鼠标悬停触发的下拉菜单
<>强步骤三:根据菜单样式的要求进行美化
感谢各位的阅读!关于使用CSS3实现导航下拉菜单的方法就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到吧!
