你好,欢迎来到何平网络科技&织梦之家,你可以免费观看大量视频教程以及大量模板下载!

两个经典简单的导航下拉二级菜单HTML代码,图片演示-织梦之家(dedehome.com)

时间:2018-08-09 20:27 来源:织梦之家作者:happy 点击:
两个经典简单的导航下拉二级菜单HTML代码,图片演示 图片演示一: 鼠标移入下拉按钮时显示如下: HTML代码 !DOCTYPEhtml html head meta charset = UTF-8 title 导航栏下拉菜单 / title style *{margin:0;padding:0;} ul{ list-style-type:none; background-
两个经典简单的导航下拉二级菜单HTML代码,图片演示

图片演示一:

鼠标移入下拉按钮时显示如下:


HTML代码
 

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.     <meta charset="UTF-8">  
  5.     <title>导航栏下拉菜单</title>  
  6. <style>  
  7. *{margin:0;padding:0;}   
  8. ul{   
  9.     list-style-type:none;   
  10.     background-color:#333;   
  11.     overflow:hidden;   
  12. }   
  13. li{   
  14.     float:left;   
  15. }   
  16. li a, .dropbtn{   
  17.     display:inline-block;   
  18.     color:white;   
  19.     text-align:center;   
  20.     padding:14px 16px;   
  21.     text-decoration:none;   
  22. }   
  23.   
  24. li a:hover, .dropdown:hover .dropbtn{   
  25.     background-color:#111;   
  26. }   
  27.   
  28. .dropdown{   
  29.     display:inline-block;   
  30. }   
  31.   
  32. .dropdown-content{   
  33.     min-width:200px;   
  34.     background-color:#F9F9F9;   
  35.     position:absolute;   
  36.     display:none;   
  37.     box-shadow:0px 8px 15px 0px rgba(0,0,0,0.2);   
  38. }   
  39.   
  40. .dropdown-content a{   
  41.     color:black;   
  42.     padding:12px 16px;   
  43.     text-decoration:none;   
  44.     display:block;   
  45. }   
  46.   
  47. .dropdown-content a:hover{   
  48.     background-color:#F1F1F1;   
  49. }   
  50.   
  51. .dropdown:hover .dropdown-content{   
  52.     display: block;   
  53. }   
  54. </style>  
  55. </head>  
  56. <body>  
  57. <ul>  
  58.     <li><a href="#shop" class="active">在线商城</a></li>  
  59.     <li><a href="#news">产品展示</a></li>  
  60.     <div class="dropdown">  
  61.         <a href="#" class="dropbtn">下拉菜单</a>  
  62.         <div class="dropdown-content">  
  63.             <a href="#">子菜单 1</a>  
  64.             <a href="#">子菜单 2</a>  
  65.             <a href="#">子菜单 3</a>  
  66.         </div>  
  67.     </div>  
  68. </ul>  
  69. </body>  
  70. </html> 


图片演示二:


	

 

HTML代码如下
 

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title></title>
        <style type="text/css">
            * {
                margin: 0px;
                padding: 0px;
            }
            
            #nav {
                width: 500px;
                background-color: #737373;
                height: 40px;
                /*border-radius: 10px;*/
                position: relative;
                margin: 0px auto;
                top: 0px;
            }
            
            .nav-container {
                width: 100%;
                height: 40px;
                position: absolute;
            }
            
            .banner {
                float: left;
                text-align: center;
                height: 40px;
                width: 20%;
                line-height: 40px;
            }
            
            .banner:hover {
                background-color: #00BFFF;
                cursor: pointer;
            }
            
            div ul {
                list-style: none;
                /*display: none;*/
                background-color: blue;
                overflow: hidden;
                /*模拟height:auto时候的情况*/                
                max-height: 0px;
                transition: max-height 0.3s;
                /*多浏览器支持*/
                -moz-transition: height 1s;
                -webkit-transition: height 1s;
                -o-transition: height 1s;
            }
            
            .banner:hover ul {
                /*display: block;*/
                width: 100%;
                max-height: 160px;
            }
            
            div ul li {
                overflow: hidden;
            }
            
            div ul li:hover {
                background-color: red;
            }
        </style>
    </head>

    <body>
        <div class="nav-container">
            <div id="nav">
                <div id="nav-button-1" class="banner">第1个导航
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                    </ul>
                </div>
                <div id="nav-button-2" class="banner">第2个导航
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
                <div id="nav-button-3" class="banner">第3个导航
                    <ul>
                        <li>1</li>
                        <li>2</li>
                    </ul>
                </div>
                <div id="nav-button-4" class="banner">第4个导航
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>
                <div id="nav-button-5" class="banner">第5个导航
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                        <li>4</li>
                        <li>5</li>
                    </ul>
                </div>
            </div>
        </div>

    </body>

</html>

有任何问题,请联系我们织梦之家,我们将竭诚为你服务!!!
 

感谢支持织梦之家,你的支持,我们的无限动力!!!
    “DEDECMS教程”欢迎分享!:

    相关标签:

    顶一下
    (1)
    100%
    踩一下
    (0)
    0%

    欢迎您报错,或提出宝贵建议,我们将第一时间处理,为大家营造一个良好网上交流平台,感谢支持织梦之家!