二级导航菜单[通俗易懂]

二级导航菜单[通俗易懂]本文用html5+css实现了二级导航菜单,二级导航菜单在网站建设中使用的越来越广泛。效果图如下:当鼠标悬停在一级菜单上时,出现二级下拉菜单二级下拉菜单可以被选中,当鼠标悬停上去时,变色。html代码<!DOCTYPEhtml><html><head><metacharset="UTF-…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

本文用html5+css实现了二级导航菜单,二级导航菜单在网站建设中使用的越来越广泛。
效果图如下:
这里写图片描述
当鼠标悬停在一级菜单上时,出现二级下拉菜单
这里写图片描述
二级下拉菜单可以被选中,当鼠标悬停上去时,变色。
这里写图片描述
html代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div id="main">
          <ul id="list">
            <li>
                <a href="#">菜单一</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单二</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单三</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单四</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
            <li>
                <a href="#">菜单五</a>
                <ul>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                    <li><a href="#">二级导航</a></li>
                </ul>
            </li>
          </ul>
        </div>
    </body>
</html>

css代码

          *{ padding: 0px; margin: 0px; }
            #main{ overflow: auto; text-align: center; }

            a{ text-decoration: none; display: inline-block; height: 40px; width: 100px; color: white; background-color: darkgray; /*border: 1px solid red; box-sizing: border-box;*/ line-height: 40px; }
            ul{ list-style: none; }

            #list{ display: inline-block; margin: 0px; padding: 0px; vertical-align: bottom; }

            #list>li{ float: left; }

            #list>li>ul{ display: none; position: absolute; }

            #list>li:hover ul{ display: block; }

            a:hover { background-color: burlywood; }
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159439.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • xml 中 sql 模糊查询 like

    xml 中 sql 模糊查询 liket.namelikeCONCAT(’%’,#{name},’%’)字段名likeconcat(’%’,#{字段名},’%’)亲测有效~

  • 【转载】轻松搞懂WebService工作原理

    【转载】轻松搞懂WebService工作原理

    2021年11月18日
  • jsp显示时间的代码_空调代码大全

    jsp显示时间的代码_空调代码大全请参照以下的原代码,注意:下面的JavaScript码可以放置于想要显示时间的任意位置。以下是网页源代码您在本站逗留了varsec=0;varmin=0;varhou=0;flag=0;idt=window.setTimeout(“update();”,1000);functionupdate(){sec++;if(sec==60){sec=0;min+=1;}if(min

  • 在 Python 中的常见的几种字符串替换操作

    在 Python 中的常见的几种字符串替换操作基于Python3.7.3中,主要的方法有替换子串:replace()替换多个不同的字符串:re.sub(),re.subn()用正则表达式替换:re.sub(),re.subn()根据位置来替换:slice()replace()方法比如,输入的字符串为’onetwoonetwoone’,第一个参数为替换前的参数,第二个为替换后的参数。默认会替换字符串中的所有符合条件的字…

  • mybatis的拦截器_拦截所有来电怎么设置

    mybatis的拦截器_拦截所有来电怎么设置一、官网介绍MyBatis允许你在已映射语句执行过程中的某一点进行拦截调用。默认情况下,MyBatis允许使用插件来拦截的方法调用包括:Executor(update,query,flushStatements,commit,rollback,getTransaction,close,isClosed)拦截执行器的方法; ParameterHandler(ge…

  • SQL SERVER的QUOTENAME函数

    SQL SERVER的QUOTENAME函数quotename使函数中的输入成为一个有效的标识符selectQUOTENAME(‘dddd’) 返回[dddd]selectQUOTENAME(‘dddd’,'”‘)返回”dddd”首先,sqlserver里的标识符有一定的规则,比如 你 createtableabc123(…) 那么中间含有空格,它不是符合规则的。 

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号