html5--6-60 阶段练习7-下拉菜单

学习要点

  • 综合运用所学过的知识完成一个下拉菜单的小练习，加深对学过知识点的综合应用能力。

 <!DOCTYPE html>

 <html lang="zh-cn">

 <head>

     <meta charset="UTF-8">

     <title>下拉菜单</title>

     <link rel="stylesheet" type="text/css" href="but.css">

 </head>

 <body>

 <body>

     <nav>

         <ul class="ul1">

             <li>

                 <a href="">首页</a>

                 <ul class="ul2">

                     <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 class="ul2">

                     <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 class="ul2">

                     <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></li>

             <li>

                 <a href="">科技</a>

                 <ul>

                     <li><a href="">IT</a></li>

                     <li><a href="">创投</a></li>

                     <li>

                         <a href="">探索</a>

                         <ul>

                             <li><a href="">航天</a>

                                 <ul>

                                     <li><a href="">技术前沿</a></li>

                                     <li><a href="">理论研究</a></li>

                                 </ul>

                             </li>

                             <li><a href="">考古</a></li>

                             <li><a href="">医学</a></li>

                         </ul>

                     </li>

                 </ul>

             </li>

             <li><a href="">财经</a></li>

             <li><a href="">读书</a></li> -->

         </ul>

     </nav>

 </body>

 </body>

 </html>
 @charset="UTF-8";

 *{

     margin:;

     padding:;

 }

 .ul1{

     margin:50px;

 }

 ul{

     list-style-type: none;

 }

 a{

     text-decoration: none;

 }

 .ul1>li{

     width: 150px;

     height: 2em;

     text-align: center;

     background: rgba(30,80,200,0.8);

     border-radius: 0.5em 0.5em 0 0  ;

     font-size: 20px;

     line-height: 2em;

     float: left;

     margin-left: 1px;

 }

 .ul2{

     background: rgba(80,80,160,0.6);

     border-radius: 0 0  0.5em 0.5em;

     display: none;

 }

 .ul2>li>a:hover{

     background: rgba(40,180,40,0.8);

     width: 85%;

     height: 1.5em;

     line-height: 1.5em;

     display: inline-block;

     border-radius: 0.5em;

     font-weight: bold;

     padding: 3px 3px;

 }

 .ul1>li:hover{

     background:rgba(30,80,250,0.8);

 }

 .ul1>li:hover>ul{

     display: block;

 }

html5--6-60 阶段练习7-下拉菜单的更多相关文章

  1. 推荐10个 CSS3 制作的创意下拉菜单效果

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  2. CSS实现下拉菜单的几种方法

    PS:转自https://www.cnblogs.com/yewenxiang/p/6064117.html 第一种:display:none和display:block切换 1 <!DOCTY ...

  3. 24个 HTML5 & CSS3 下拉菜单效果及制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  4. 10个优秀的 HTML5 & CSS3 下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用 HTML5 和 CSS3 可以更容易 ...

  5. 11个优秀的HTML5 & CSS3下拉菜单制作教程

    下拉菜单是一个很常见的效果,在网站设计中被广泛使用.通过使用下拉菜单,设计者不仅可以在网站设计中营造出色的视觉吸引力,但也可以为网站提供了一个有效的导航方案.使用HTML5和CSS3可以更容易创造视觉 ...

  6. html 布局；css3+jq 下拉菜单；table分页动态添加行；html5本地存储；简单易用的html框架

    简单好用的html框架,预览图见最后: 源码: 1.页面布局使用table: table 嵌套 +iframe 布局: 2.下拉菜单为jq+css3 动画; css input 无边框,select下 ...

  7. 10个优秀的 HTML5 &amp; CSS3 下拉菜单制作教程

    下拉菜单是一个非经常见的效果.在站点设计中被广泛使用.通过使用下拉菜单.设计者不仅能够在站点设计中营造出色的视觉吸引力,但也能够为站点提供了一个有效的导航方案.使用 HTML5 和 CSS3 能够更e ...

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

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

  9. html5 css练习 下拉菜单制作

    *{    margin: 0;    padding: 0;}li{    list-style-type: none;}a{    text-decoration: none;}.ul1{marg ...

  10. Html5+Mui前端框架,开发记录（四）：下拉菜单绑定数据、搜索、时间控件

    1.下拉菜单绑定数据,选择后回传值 1)html: <div class="mui-input-row"> <label>xxx:</label> ...

随机推荐

  1. UVa1363 Joseph's Problem

    把整个序列进行拆分成[k,k/2),[k/2, k/3), [k/3,k/4)...k[k/a, k/b)的形式,对于k/i(整除)相同的项,k%i成等差数列. /*by SilverN*/ #inc ...

  2. 【Educational Codeforces Round 49 (Rated for Div. 2) 】

    A:https://www.cnblogs.com/myx12345/p/9843826.html B:https://www.cnblogs.com/myx12345/p/9843869.html ...

  3. 【BZOJ3514】Codechef MARCH14 GERALD07加强版（LCT）

    题意:N个点M条边的无向图,q次询问保留图中编号在[l,r]的边的时候图中的联通块个数. 询问加密,强制在线 n,m,q<=200000 题意:RYZ作业 以下转载自hzwer http://h ...

  4. .net core 使用 codegenerator 创建默认CRUD代码

    dotnet.exe aspnet-codegenerator controller --force --controllerName [controller-name] --relativeFold ...

  5. Peter Norvig：十年学会编程

    为啥都想速成? 随便逛一下书店,你会看到<7天自学Java>等诸如此类的N天甚至N小时学习Visual Basic.Windows.Internet的书.我用亚马逊网站的搜索功能,出版年份 ...

  6. electron 自定义菜单

    快捷键:http://electronjs.org/docs/api/accelerator

  7. Spring自带mock测试Controller

    原文:http://blog.csdn.net/yin_jw/article/details/24726941 准备SpringMVC环境 注意:使用mock测试需要引入spring-test包 Ba ...

  8. JSONKit升级XCODE后报一堆警告解决办法

    虽然我已经该用apple自己的json解析了,但是对于需要兼容低版本的,还是需要用第三方的, 目前用的最多的就有JSONKit了,包括微博sdk,但是一编译报一堆警告,看着很不爽.可以自己手动一个个修 ...

  9. centos的python2.6.x升级到python2.7.x方法;python2.6.x的版本就不要用了

    python2.6.x的版本,现在使用的很多插件都不支持了.所以如果你的centos还是使用的2.6.x版本,不要犹豫,赶紧升级到2.7.x版本 1.所谓升级,就是再安装一个python2.7.x版本 ...

  10. (C++ STL)list的实现

    #include <iostream> using namespace std; //採用迭代器和空间配置器所实现的双向链表的基本功能 template<class _Ty,clas ...