_
caseBanner
当前位置:首页 > 新闻资讯
CSS下拉菜单
发布时间:2021-01-13 22:00:26 浏览: 143次 来源:【jake推荐】 作者:-=Jake=-

CSS下拉菜单

随着时代的发展,网站的内容变得越来越丰富。当结构更复杂时开心8平台 ,第一级导航菜单将不再足够。目前,我们需要多级菜单才能达到各个级别。结构体。让我们来谈谈下拉菜单的相关内容。

现在,我们介​​绍一组HTML标记-dl,dt和dd。这组标记与ul和li非常相似电竞竞猜 ,也用于列表结构。 dl称为“定义列表”,在用法上等效于ul; dt和dd分别定义为“定义标题”和“定义描述”凤凰彩票 ,在使用方法上等效于li。例如,以下代码:


锐英源软件培训项目
Java
网站开发
VC++
C#
ASP.NET
锐英源软件培训特色
目的鲜明
层次深
价格适中
有就业保障
目的鲜明

此时在浏览器中的效果如下:

让我们谈谈下拉菜单的一般制作步骤:

下一步是定义菜单的HTML结构。想法是将整个菜单分为4组。当每个组处于正常状态时,仅显示第一级菜单项。当鼠标经过指针时极速飞艇 ,将显示相应的子菜单。首先用ul和li定义外部结构电竞投注 ,然后在每个li项目中,使用dl定义菜单项css下拉菜单,第一级菜单文本定义为dt,子菜单文本定义为dd。

设置整体:首先为上述ul设置一个id,并进行常规的CSS设置,还清除列表项前面的点。设置每个li项,并将定位模式设置为相对定位,以使其绝对基于其下级对象定位。

设置dl:设置dl对象的样式css下拉菜单,增加背景颜色和圆角效果。

设置主菜单项(dt):设置圆角并在主菜单项下方设置深红色边框,作为子菜单的一部分;设置主菜单项的链接文本。

设置子菜单项(dd):通常设置子菜单项,例如文本颜色,背景色等。

相应地设置鼠标:隐藏子菜单;使用li的悬停伪类来接受鼠标传递事件;

实现主菜单项的不同颜色:通过在每个dl中为dt添加不同的类别来转换HTML代码;删除dt设置中的背景设置,因为这是常见设置;在通用设置后面设置背景颜色的CSS样式。

与IE6兼容:您可以在文件中添加或修改代码以实现浏览器兼容性。

上面是一个更复杂的导航栏,当鼠标指针经过时可以打开子菜单。有兴趣的朋友可以自己做。

返回列表
二维码
扫一扫,在线询价