css淘宝下拉菜单,纯css打造最简洁下拉菜单-无js-非常实用

￡神魔★判官ぃ 2022-08-29 01:30 140阅读 0赞

先上图：(点击图片可到楼主的个人网站)

![47d08ebf352d491acc7d2dc6aa768c80.gif][]

样式部分：

分全局，一级菜单和二级菜单。初始化二级的ul 的display 默认是隐藏的。

/\*公共全局\*/

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

ul,li\{ list-style:none;\}

a\{ color:\#333; text-decoration:none;\}

/\*一级菜单\*/

.nav ul li\{ float:left; width:200px; background:\#FC0; margin-right:1px; \} /\*一级菜单宽度改过，下面二级自动继承\*/

.nav ul li a\{ width:100%; line-height:30px; text-align:center; display:block\}

.nav ul li a:hover\{ background:\#333; color:\#fff;\}

.nav ul li:hover ul\{ display:block; width:100%;\} //这句是关键

/\*二级菜单\*/

.nav ul li ul\{ display:none; width:100%;\}

.nav ul li ul li a\{ float:left; width:100%; height:30px; line-height:30px;\}

.nav ul li ul li a,.nav ul li ul li a:visited\{\}

.nav ul li ul li a:hover\{ background:\#333; color:\#fff;\}

结构方面：

二级菜单UL是嵌套在一级的li中。通过样式的hover来实现让它display显示出来。

*  首页
 *  客户
    
     *  11
     *  22
     *  33
 *  车辆
    
     *  44
     *  55
     *  66

[47d08ebf352d491acc7d2dc6aa768c80.gif]: /images/20220829/f8bbd2fde70b46efa64af56dfa6f9929.png

发表评论取消回复

表情：

评论列表（有 0 条评论，140人围观）

还没有评论，来说两句吧...

相关阅读

相关 css基础 CSS 导航栏、CSS 下拉菜单

阅读目录导航栏导航栏=链接列表垂直导航栏垂直导航条实例激活/当前导航条实例创建链接并

一时失言乱红尘/ 2023年10月06日 22:33/ 0 赞/ 11 阅读

相关 CSS模拟下拉菜单

啥也不说了直接上菜（怎么实现的注解里有） <!DOCTYPE html> <html> <head> <meta chars

亦凉/ 2022年11月21日 11:37/ 0 赞/ 182 阅读

相关 html鼠标经过自动下拉菜单,js css鼠标悬停显示下拉菜单

个人信息维护学生信息修改修改密码\--%> 修改密码\--%> 修改密码--%> 退出登录用户：

傷城~/ 2022年10月05日 13:57/ 0 赞/ 299 阅读

相关 CSS自定义三级菜单下拉框

CSS部分 /分类样式/ / 清楚浮动，使div盒子能被撑起来 / .clearfix:after { content:

拼搏现实的明天。/ 2022年09月10日 13:17/ 0 赞/ 179 阅读

相关 css淘宝下拉菜单,纯css打造最简洁下拉菜单-无js-非常实用

先上图：(点击图片可到楼主的个人网站) ![47d08ebf352d491acc7d2dc6aa768c80.gif][] 样式部分：分全局，一级菜单和二级菜单。初始化

￡神魔★判官ぃ/ 2022年08月29日 01:30/ 0 赞/ 141 阅读

相关 js实现下拉菜单

效果：平时在网页上经常会看到导航栏在鼠标经过时，字体颜色和背景会改变，然后会显示下拉菜单。原理：js实现在鼠标经过时，改变字体的颜色和背景，然后下拉菜单显示。一般情况下，

客官°小女子只卖身不卖艺/ 2022年08月23日 05:45/ 0 赞/ 199 阅读

相关基于jquery、css的下拉菜单实现

近期一系统中需要一个二级下拉菜单，由于需要根据UI的设计稿来实现，通过尝试了使用bootstrap，主要使用list-group和collapse来完成，但是发现样式需要较大的

ゞ浴缸里的玫瑰/ 2022年07月11日 05:42/ 0 赞/ 242 阅读

相关 HTML/CSS方法实现下拉菜单

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

川长思鸟来/ 2022年01月27日 00:29/ 0 赞/ 283 阅读

相关 css 下拉菜单

<style type="text/css"> \ \{ margin: 0px; padding:

迈不过友情╰/ 2021年09月30日 00:44/ 0 赞/ 423 阅读

相关 css下拉菜单

基本下拉菜单当鼠标移动到指定元素上时，会出现下拉菜单。 .dropdown \{ position: relative; display:

Love The Way You Lie/ 2021年09月15日 06:24/ 0 赞/ 436 阅读