工具是vs code

代码如下

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        li{

            list-style-type: none;

        }

        #menu {

            width: 370px;

            margin: 30px auto 0px;

            height: 45px;

            background-color: #030e11;

        }

        #menu li{

            float: left;

            width: 92px;

            line-height:39px;

            text-align: center;

            position:relative;

            border:none;

        }

        #menu li a {

            font-size:16px; color: #e6f8e9;

            display:block;

            outline:;

            text-decoration:none;

        }

        #menu li:hover a {

            color: #ff0000; /*导航栏文字颜色 */

        }

        #menu li:hover .dropdown_1column {

            left:0px;

            top:38px;

        }

        .dropdown_1column{ /* 下拉菜单边框颜色*/

            margin: 0px auto;

            float: left;

            position: absolute;

            left: -999em;

            text-align: left;

            border: 1px solid #066591;

            border-top: none;

            background: #F4F4F4;

            width: 140px;

        }

        #menu li:hover div a { /* 下拉菜单文字颜色*/

        font-size:12px

        ;color:#444;

        }

        #menu li:hover div a:hover{color:#21910e;} /*下拉带单鼠标停留颜色*/

        #menu li ul {

        list-style:none;padding:10px 5px;

        margin:;

        }

        #menu li ul li {

        font-size:12px;

        line-height:26px;

        position:relative;

        padding:;margin:;

        float:none;

        text-align:left;

        width:130px;

        }

        #menu li ul li:hover {

        background:none;

        border:none;padding:;

        margin:;

        }

    </style>

</head>

<body>

    <div id="menu">

    <ul>

        <li> <a href="" class="nodrop">首页</a></li>

        <li><a href="" class="drop">最火下载站</a>

        <div class="dropdown_1column">

            <div class="col_1">

                    <ul class="simple">

                            <li><a href="">网站建设</a></li>

                            <li><a href="">导航条代码</a></li>

                            <li><a href="">电子商务</a></li>

                    </ul>

            </div>

        </div>

        </li>

        <li><a href="" class="nodrop">联系我们</a></li>

    </ul>

    </div>

</body>

</html>

3.CSS + ul li 去掉列表项前面的标记类型

例如：

ul.circle {list-style-type:none;}

ul.circle {list-style-type:circle;}

ul.square {list-style-type:square;}
ol.upper-roman {list-style-type:upper-roman;}
ol.lower-alpha {list-style-type:lower-alpha;}

4.CSS + ul li  竖着排列转成横向排列方法

5.  块级元素，背景色设置

6.鼠标放上去小手形状，字体颜色变化

7.二级菜单出现位置，二级菜单边框，鼠标放到二级菜单上，字体颜色变化

HTML+CSS实现导航栏二级下拉菜单完整代码的更多相关文章

  1. CSS 笔记——导航栏、下拉菜单、提示工具

    8. 导航栏.下拉菜单.提示工具 (1)导航栏 垂直导航栏 <!DOCTYPE html> <html lang="en"> <head> &l ...

  2. js实现网站导航的二级下拉菜单

    http://www.codesky.net/article/201109/1200js/%E5%AE%9E%E7%94%A8%E5%AF%BC%E8%88%AA%E8%8F%9C%E5%8D%95. ...

  3. iOS开发笔记13:顶部标签式导航栏及下拉分类菜单

    当内容及分类较多时,往往采用顶部标签式导航栏,例如网易新闻客户端的顶部分类导航,最近刚好有这样的应用场景,参考网络上一些demo,实现了这种导航效果,记录一些要点. 效果图(由于视频转GIF掉帧,滑动 ...

  4. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  5. Bootstrap历练实例：导航内的下拉菜单

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  6. 纯CSS3实现宽屏二级下拉菜单

    今天我们要来分享一款基于纯CSS3的宽屏二级下拉菜单,这款菜单的子菜单在展开的时候是很宽敞的,菜单项中可以自定义格式的内容,非常实用,也很大气.由于是用纯CSS3实现,所以这款下拉菜单不用运行Java ...

  7. flash滚动图片遮住二级下拉菜单解决方法

    如上图所示,在进行排版时,如果不注意会遇到二级下拉菜单被下边的img图片遮住.此种情况在ie7 8 中出现. 解决方法:给二级下拉菜单添加z-index:9999;position:relative; ...

  8. Excel应用----制作二级下拉菜单【转】

    应用: 原始数据源是两列的源数据,那该如何制作二级下拉菜单, 当然可以将这两列的数据源,转换成上面的那种格式,再用上面的方法来制作. 今天教大学的方法是直接通过这种两列式的数据源来制作下拉菜单,如果A ...

  9. boostrapt的二级下拉菜单

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta conte ...

随机推荐

  1. 安装MySQL数据库并开启远程访问

    一.安装MySQL数据库 MySQL安装在系统盘下(C:\Program Files),方便系统备份. 1.双击安装程序,勾选“I accept the license terms”,点击“Next” ...

  2. Linux下部署Kafka分布式集群，安装与测试

    注意:部署Kafka之前先部署环境JAVA.Zookeeper 准备三台CentOS_6.5_x64服务器,分别是:IP: 192.168.0.249 dbTest249 Kafka IP: 192. ...

  3. 终极之战：Linux & Windows

    1.开源 当你买了一辆车,但你看不到引擎盖下面是什么?当你使用Windows驱动系统时就是如此.但是,相比之下,Linux完全是一个开源项目.你可以看看Linux操作系统的源代码,这是一个优点.Lin ...

  4. Linux 日志分析

    学会查看日志文件是一件很有意义的事,因为在Linux系统中运行的程序通常会把一些系统消息和错误消息写入对应的日志中,若是一旦出现问题,我们就可以通过查看日志来迅速定位,及时解决故障. 日志的三种类型 ...

  5. C语言字符串操作小结

    1)字符串操作strcpy(p, p1) 复制字符串strncpy(p, p1, n) 复制指定长度字符串strcat(p, p1) 附加字符串strncat(p, p1, n) 附加指定长度字符串s ...

  6. Linux工具之netstat

        1.简介   Netstat 命令用于显示各种网络相关信息,如网络连接,路由表,接口状态 (Interface Statistics),masquerade 连接,多播成员 (Multicas ...

  7. tornada-基础

    回想Django的部署方式 以Django为代表的python web应用部署时采用wsgi协议与服务器对接(被服务器托管),而这类服务器通常都是基于多线程的,也就是说每一个网络请求服务器都会有一个对 ...

  8. XP系统登录界面，需要手动点击用户帐户后才会出现输入密码的界面

    问题描述XP系统,用户帐户设置有密码.用户表示之前启动到系统登录界面,会直接出现输入密码的对话框(见图一):现在启动到登录界面只看到用户帐户信息,需手动点击用户名后才能出现输入密码的界面,用户感觉不方 ...

  9. requests结合xpath爬取豆瓣最新上映电影

    # -*- coding: utf-8 -*- """ 豆瓣最新上映电影爬取 # ul = etree.tostring(ul, encoding="utf-8 ...

  10. JavaScript Array -->map()、filter()、reduce()、forEach()函数的使用

    题目: 1.得到 3000 到 3500 之内工资的人. 2.增加一个年龄的字段,并且计算其年龄. 3.打印出每个人的所在城市 4.计算所有人的工资的总和. 测试数据: function getDat ...