Html5+Css3制作下拉菜单的三种方式

一、渐变式改变ol的高度

1.外部为ul标签，在每个li里嵌套一个ol列表
2.设置外部li左浮动，内部ol标签绝对定位，外部li标签相对定位
3.设置ol的高为0，溢出隐藏
4.外部li标签:hover 时，设置ol的高度，transition渐变

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         /*一、下拉菜单ol折叠*/

         *{margin: 0;padding: 0px}

         ul{

             width: 200px;

             height: 50px;

             outline: 1px solid black;

         }

         ul li{

             width: 50%;

             height: 100%;

             outline: 1px solid black;

             text-align: center;

             float: left;

             line-height: 50px;

             list-style: none;

             background: green;

         }

         ul ol{

             width: 100%;

             height: 0;

             transition: all linear 0.5s;

             overflow: hidden;

             outline: 1px solid black;

         }

         ul ol li{

             width: 100%;

             height: 50px;

             text-align: left;

             background: pink;

             outline: 1px solid black;

         }

         ul ol li a{

             color: black;

             text-decoration: none;

         }

         ul li:hover ol{

             height: 150px;

             transition: all linear 1s;

         }

         ul ol li:hover{

             background: yellow;

         }

     </style>

 </head>

 <body>

 <ul>

     <li>帅哥

         <ol>

             <li><a href="#">罗晋</a></li>

             <li><a href="#">刘志鹏</a></li>

             <li><a href="#">周乐</a></li>

         </ol>

     </li>

     <li>美女

         <ol>

             <li><a href="#">刘涛</a></li>

             <li><a href="#">范冰冰</a></li>

             <li><a href="#">刘诗诗</a></li>

         </ol>

     </li>

 </ul>

 </body>

 </html>

二、渐变式改变ol 下li标签的高度，同第一种方法，设置li标签的高度为0，hover的时候设置一个高度

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

            /*二、下拉菜单li折叠*/

         *{margin: 0;padding: 0px}

         ul{

         width: 200px;

         height: 50px;

         outline: 1px solid black;

         }

         ul li{

         width: 50%;

         height: 100%;

         outline: 1px solid black;

         text-align: center;

         float: left;

         line-height: 50px;

         list-style: none;

         background: green;

         }

         ul ol li{

         width: 100%;

             /*变化*/

         height: 0;

         text-align: left;

         background: pink;

         outline: 1px solid black;

         transition: all linear 1s;

         overflow:hidden;

         }

         ul ol li a{

         color: black;

         text-decoration: none;

         }

         ul li:hover ol li{

         height: 50px; /*变化*/

         transition: all linear 1s;

         }

         ul ol li:hover{

         background: yellow;

         }

     </style>

 </head>

 <body>

 <ul>

     <li>帅哥

         <ol>

             <li><a href="#">罗晋</a></li>

             <li><a href="#">刘志鹏</a></li>

             <li><a href="#">周乐</a></li>

         </ol>

     </li>

     <li>美女

         <ol>

             <li><a href="#">刘涛</a></li>

             <li><a href="#">范冰冰</a></li>

             <li><a href="#">刘诗诗</a></li>

         </ol>

     </li>

 </ul>

 </body>

 </html>

三、挂面式下拉菜单用display隐藏，设置block显示二级菜单

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title></title>

     <style>

         /*三、挂面式二级菜单*/

         *{margin: 0;padding: 0px}

         ul{

             width: 200px;

             height: 50px;

             outline: 1px solid black;

         }

         ul li{

             width: 50%;

             height: 100%;

             outline: 1px solid black;

             text-align: center;

             float: left;

             line-height: 50px;

             list-style: none;

             background: green;

         }

         ul ol{

             width: 100%;

             height: 150px;

             overflow: hidden;

             outline: 1px solid black;

             display: none;

         }

         ul ol li{

             width: 100%;

             height: 50px;

             text-align: left;

             background: pink;

             outline: 1px solid black;

         }

         ul ol li a{

             color: black;

             text-decoration: none;

         }

         ul li:hover ol{

             display: block;

         }

         ul ol li:hover{

             background: yellow;

         }

     </style>

 </head>

 <body>

 <ul>

     <li>帅哥

         <ol>

             <li><a href="#">罗晋</a></li>

             <li><a href="#">刘志鹏</a></li>

             <li><a href="#">周乐</a></li>

         </ol>

     </li>

     <li>美女

         <ol>

             <li><a href="#">刘涛</a></li>

             <li><a href="#">范冰冰</a></li>

             <li><a href="#">刘诗诗</a></li>

         </ol>

     </li>

 </ul>

 </body>

 </html>

巴特西

Html5+Css3制作下拉菜单的三种方式

最新文章

热门文章