下拉菜单

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }

            #daohanglan {
                height: 35px;
                /*border: 1px solid black;*/
                width: 280px;
                position: relative;
                /*top: 0px;*/
                z-index: 200;
            }

            .annv {
                float: left;
                width: 70px;
                max-height: 35px;
                background-color: darkcyan;
                text-align: center;
                line-height: 35px;
                overflow: hidden;
            }

            ul {
                list-style: none;
            }

            .annv:hover{
                max-height: 300px;
                transition: 1s;
            }

            li{
                background-color: darkmagenta;
            }
        </style>
    </head>

    <body>
        <div id="daohanglan">
            <div class="annv">首页</div>
            <div class="annv">PHP
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="annv">JAVA
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                    <li>333</li>
                    <li>444</li>
                </ul>
            </div>
            <div class="annv">.NET
                <ul>
                    <li>1111</li>
                    <li>222222</li>
                </ul>
            </div>
        </div>
        <div style="position: absolute;z-index: 100;">
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
            啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦
        </div>
    </body>

</html>
时间: 2024-12-21 01:00:09

下拉菜单的相关文章

HTML+JS+CSS 实现下拉菜单

最近在看视频学习做一些HTML+JS+CSS的实例,第一个是实现下拉菜单. 5.7 制作的思路是:1.静态网页的制作 2.动态特效实现菜单的显示和隐藏(三种方法:css.JavaScript.jQuery) 3.浏览器的兼容问题(低版本IE可能不支持等) 在用css实现时,由于盒子模型有自己默认的margin和padding值,所以要reset. 有一点比较有疑问的实,老师在视频里说position:absolute要和left.top同时使用.这是为什么?在实现的时候,我并没有使用left和t

用HTML和CSS实现的下拉菜单

<!doctype html><html lang="en"> <head> <meta charset="UTF-8"> <title>用HTML和CSS实现下拉列表</title> <style> /*导航栏的样式*/ *{margin:0;padding:0;} #nav{background-color:#eee;width:500px;height:40px;margin:

boostrapt的二级下拉菜单

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <meta content="yes" name="apple-mobile-web-app-capable"> <meta content="black" name="apple-mobile-web-app-status-bar-style&qu

Bootstrap下拉菜单

[Bootstrap 下拉菜单] <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown">主题 <span class="caret"></span> </but

bootstrap-按钮的向下向上三角形-向上弹起的下拉菜单

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>按钮的向下向上三角形-向上弹起的下拉菜单</title>     <

bootstrap-导航加下拉菜单(二级导航)

1.运行效果如图所示 2.实现代码如下 <!DOCTYPE html> <html> <head>     <meta charset="utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=edge">     <title>导航加下拉菜单(二级导航)</title>     <!-- 最新版

bootstrap(4)关于下拉菜单的功能

一:下拉菜单: 下拉菜单的代码实现: <div class="dropdown"> <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="

分别用js 和 html/css实现下拉菜单特效

在网站的制作过程,我们常常会遇到导航栏中会出现一级菜单,二级菜单这样的现象,到底如何实现呢?接下里我们用两种方法来实现: 1.用js来实现此效果: <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <style type="text/css">

Siebel 找字段、下拉菜单设置值、弹出新页面、弹出选择框、设置默认值 、按钮代码

产品缺陷太多,跟用户交互不人性化.例如搜索新建客户功能,用户输入后会自动保存数据,一旦保存后一. 找字段1.简单 CTRL+Q CTRL+Q 服务请求编号----对应的表.字段.长度: 客户编码-----对应的表.字段.长度(弹出新页面):- 点击上面的pick Applet会弹出“选取客户”对话框 有JOIN就不用TABLE:require代表必填 字段有两个值----项目编号 下图确定只有projectNum有用 3.表单中的字段(不在list column中,而是在control) 二.下

Tips3:通过Layer下拉菜单来锁定游戏物体和控制物体的可视化

通过把不同的游戏物体放在不同的Layer里面能对不同类的游戏物体进行很方便的控制,如果某些游戏物体创建后你不想再改动,如地面 装饰 什么的, 你可以通过点击Layer下拉菜单把它们锁定了 也可以通过控制Layer下拉菜单中的眼睛图标来设置是否 显示 或 隐藏 layer里的物体 这里需要注意的是,Unity中 Layer 最多有25个,不过对我们来说已经非常够用了.