0.需求:当鼠标hover到按钮上时,出现下拉菜单导航条。

1.问题拆解:
(1)HTML应该如何组织比较方便合理
因为题中要求下拉菜单位于按钮的正下方,可以使用列表<li>中嵌套无序列表<ul>的方式,设置<ul>padding值为0。
(2)如何实现下拉菜单在鼠标没有hover到按钮上时不出现
使用定位隐藏,设置下拉菜单为绝对定位,设置一个负的很大的值。
(3)如何实现下拉菜单在鼠标hover时出现
设置鼠标hover时,<ul>列表的left值。
<body>

    <li class="btn"><a class="btn1" href="#">按钮</a>

        <ul>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a class="last" href="#">下拉菜单项</a></li>

        </ul>

    </li>

</body>

(1)首先重置默认的<li>,<a>标签样式

        li,

        li a {

            text-decoration: none;

            list-style-type: none;

            font-family: "宋体";

            font-size: 12px;

            color: #000;

        }

(2)设置按钮的边框等,此时我设置的是外层<li>标签中<a>标签的样式,此时将内层<a>标签设置成块级block,这样可以设置宽高,并且后面有用(后面再说)。

       .btn1 {

            display: block;

            border: 1px solid #ddd;

            width: 50px;

            height: 28px;

            text-align: center;

            line-height: 28px;

        }

(3)将下拉菜单隐藏设置成不可见

        ul {

            margin-top: 1px;

            position: absolute; /*设置绝对定位*/

            left: -999em;   /*设置隐藏*/

            padding:;  /*离它的父元素的边界为0,所以可以位于父元素<li>的正下方*/

        }

(4)为下拉菜单项添加样式

        ul li a {

            display: inline-block;  /*菜单项宽度未知,设置inline-block宽度为内容宽度*/

            border-top: 1px solid #ddd;

            border-left: 1px solid #ddd;  /*这方法很笨,千万别学我*/

            border-right: 1px solid #ddd;

            height: 30px;

            padding: 0 10px;

            line-height: 30px;

        }

(5)不能忘了最后一个

        .last {

            border-bottom: 1px solid #ddd;

        }

(6)设置鼠标hover时出现下拉菜单

        .btn:hover ul {

            left: auto; /*默认ul的padding为0,位于按钮正下方*/

        }

(7)设置hover时改变背景颜色

        ul li a:hover {

            background-color: #ddd;

        }

(8)此时会有一个小bug,鼠标hover到按钮整一行时都会出现下拉菜单,因为此时最外层的<li>标签是块级元素,块级元素没有设置宽度默认的宽度是父元素宽度,而它的父元素是body,第(6)步写的是hover整个外层<li>标签,所以会出现这种情况。
解决办法:   可以在父元素<li>设置inline-block,子元素设置block,当子元素内容超出时,父元素宽度根据内容变化,所以,可以将按钮hover区域控制按钮边框之内。

        .btn{

            display: inline-block; /*设置btn是inline-block,

            默认宽度为内容宽度,则鼠标只会在hover到按钮区域时才会展开下拉菜单*/

        }

以下是完整代码:

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <title>纯css实现下拉菜单</title>

    <style>

        li,

        li a {

            text-decoration: none;

            list-style-type: none;

            font-family: "宋体";

            font-size: 12px;

            color: #000;

        }

        .btn1 {

            display: block;

            border: 1px solid #ddd;

            width: 50px;

            height: 28px;

            text-align: center;

            line-height: 28px;

        }

        ul {

            margin-top: 1px;

            position: absolute; /*设置绝对定位,宽度为内容宽度*/

            left: -999em;   /*设置隐藏*/

            padding:;  /*离它的父元素的边界为0,所以可以位于父元素li的正下方*/

        }

        ul li a {

            display: inline-block;  /*菜单项宽度未知,设置inline-block宽度为内容宽度*/

            border-top: 1px solid #ddd;

            border-left: 1px solid #ddd;

            border-right: 1px solid #ddd;

            height: 30px;

            padding: 0 10px;

            line-height: 30px;

        }

        .last {

            border-bottom: 1px solid #ddd;

        }

        .btn:hover ul {

            left: auto; /*默认ul的padding为0,位于按钮正下方*/

        }

        ul li a:hover {

            background-color: #ddd;

        }

        .btn{

            display: inline-block; /*设置btn是inline-block,

            默认宽度为内容宽度,则鼠标只会在hover到按钮区域时才会展开下拉菜单*/

        }

    </style>

</head>

<body>

    <li class="btn"><a class="btn1" href="#">按钮</a>

        <ul>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a href="#">下拉菜单项</a></li>

            <li><a class="last" href="#">下拉菜单项</a></li>

        </ul>

    </li>

</body>

</html>

CSS二级菜单的更多相关文章

  1. html+css二级菜单制作!

    二级菜单!!<!DOCTYPE html<html lang="e<head> <meta charset="UTF-8"> < ...

  2. crm 动态一级二级菜单

    之前代码菜单是写是的 如何 让他 动态 生成了  首先 添加 2个字段 admin.py 更改 显示 from django.contrib import admin from rbac import ...

  3. 纯css实现鼠标感应弹出二级菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. html和css实现一级菜单和二级菜单学习笔记

    实现一级菜单: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> ...

  5. css案例学习之ul li dl dt dd实现二级菜单

    效果 代码实现 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www ...

  6. 纯CSS二级纵向菜单

    纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...

  7. 个人练习:使用HTML+CSS制作二级菜单

    最近一直在学习HTML+CSS,刚看完如果制作下拉菜单部分,就想着做一个练练手. 先上成品图: 就是上面这个效果,横向菜单选项能点击,鼠标放在上面也能展开二级菜单,二级菜单也能点击,点击后就会在底下的 ...

  8. CSS之实现二级菜单动态出现

    一直觉得二级菜单的出现效果仅仅有js才干控制.今天研究了一下阿里巴巴站点的首页,才发现,原来二级菜单的动态显示也能够使用CSS来控制,原来对CSS是静态的东西一直是误解它了,CSS也能够实现动态的效果 ...

  9. CSS制作二级菜单时,二级菜单与一级菜单不对齐

    效果如图: 部分代码如图: <li><a href="#" target="_blank">关于我们</a> <ul& ...

随机推荐

  1. CentOS7搭建FastDFS V5.11分布式文件系统(一)

    1.绪论 最近要用到fastDFS,所以自己研究了一下,在搭建FastDFS的过程中遇到过很多的问题,为了能帮忙到以后搭建FastDFS的同学,少走弯路,与大家分享一下.FastDFS的作者淘宝资深架 ...

  2. mysql统计表中条目个数的方法举例

    说明:以下标红且加大括号的均需要替换为实际待查询的表名或数据库名. [1].统计某张或某几张表的数据量: select count(*) from {TABLE_NAME}; #or select c ...

  3. SpringBoot布道系列 | 目录汇总 | 2019持续更新ing

    SpringBoot 基础教程 | 三大推荐理由 1.文章内容均为原创,结合官方文档和实战经验编写. 2.文章结构经过细致整理,对新人学习更加友好. 3.精选常用技术,不求全面,但求精华!! Spri ...

  4. 记一次启动Tomcat 控制台以及log4j 乱码问题

    Tomcat启动乱码 问题描述:当你发现你的Tomcat启动时乱码了,而你只是换了个Tomcat版本而已. 在找到真正的问题之前,我在网上百度了N多的资料,都试过了,但是都不行.1.修改了 windo ...

  5. 【bzoj 4046 加强版】Pork barrel

    刚考完以为是神仙题--后来发现好像挺蠢的-- QwQ 题意 给你一张 \(n\) 个点 \(m\) 条边的无向图(不一定连通),有 \(q\) 组询问,每组询问给你 \(2\) 个正整数 \(l,h\ ...

  6. 利用pipework为docker容器设置固定IP

    今天介绍如何在redhat/centos7系列机器上使用pipework为docker启动的容器指定一个固定ip,我们知道默认情况下,docker会使用 bridge网络模式为每一个启动的容器动态分配 ...

  7. BZOJ1306 [CQOI2009]match循环赛/BZOJ3139 [Hnoi2013]比赛[dfs剪枝+细节题]

    地址 看数据范围很明显的搜索题,暴力dfs是枚举按顺序每一场比赛的胜败情况到底,合法就累计.$O(3^{n*(n-1)/2})$.n到10的时候比较大,考虑剪枝. 本人比较菜所以关键性的剪枝没想出来, ...

  8. VS开发框架DevExtreme v19.1全解析!Windows资源管理器UX值得拥有

    行业领先的.NET界面控件DevExpress 正式发布了v19.1版本,本文将以系列文章的方式为大家介绍DevExtreme Complete Subscription v19.1中全新发布的文件管 ...

  9. dlsym用法

    1. 包含头文件 #include<dlfcn.h> 2. 函数定义 void *dlsym(void *handle, const char* symbol); handle是使用dlo ...

  10. .net中[Serializable]序列化的应用

    原文链接:https://blog.csdn.net/wanlong360599336/article/details/9222459 浅析.NET中的Serialization 摘要 本文简要介绍了 ...