提要:使用大div定位设置为relative,子div设置为absolute实现菜单下拉

实现代码：

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Nav</title>

     <style type="text/css">

         /*给导航设置一个背景#333*/

         .nav{

             background-color: #333;

         }

         /*给导航里的a标签设置样式*/

         .nav a{

             /*设置大小*/

             padding:16px 20px;

             /*去掉下划线*/

             text-decoration: none;

             /*字体颜色*/

             color: white;

             /*设置内联块级元素*/

             display: inline-block;

         }

         /*设置鼠标划过的背景色*/

         .nav a:hover{

             background: #111;

         }

         /*给下拉框设置定位*/

         .dropdown{

             position: relative;

             display: inline-block;

         }

         /*下拉内容设置定位*/

         .dropdown-content{

             display: none;

             position: absolute;

             /*设置一个似倒影的卡片样式*/

             box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.3);

         }

         /*将下拉内容框里的a标签设置块级元素和字体颜色*/

         .dropdown-content a{

             display: block;

             min-width:110px;

             color:#000;

             padding: 10px 0;

             text-align: center;

         }

         /*设置下拉内容框里的a标签背景*/

         .dropdown-content a:hover{

             background: #f1f1f1;

             border:none;

         }

         /*当下拉按扭划过时，则下拉内容显示*/

         .dropdown:hover .dropdown-content{

             display: block;

         }

     </style>

 </head>

 <body>

 <!--先设置一个大的div-->

 <div class="nav">

     <!--设置元素，用标签-->

     <a href="#">主页</a>

     <a href="#">新闻</a>

     <!--设置下拉框的div-->

     <div class="dropdown">

         <!--设置下拉框的按扭名称-->

         <a href="#">国家列表</a>

         <!--设置下拉框的内容-->

         <div class="dropdown-content">

             <a href="#">中国</a>

             <a href="#">美国</a>

             <a href="#">日本</a>

         </div>

     </div>

     <div class="dropdown">

         <!--设置下拉框的按扭名称-->

         <a href="#">武器列表</a>

         <!--设置下拉框的内容-->

         <div class="dropdown-content">

             <a href="#">核弹</a>

             <a href="#">飞机</a>

             <a href="#">大炮</a>

         </div>

     </div>

 </div>

 </body>

 </html>

Css实现一个菜单导航的更多相关文章

  1. 如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 ...

  2. 前端每日实战：23# 视频演示如何用纯 CSS 创作一个菜单反色填充特效

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览.https://codepen.io/comehope/pen/qYMoPo 可交互视频教程 此视频是 ...

  3. 23.1纯 CSS 创作一个菜单反色填充特效

    交互效果地址:https://scrimba.com/c/cEwREJs6 HTML代码: <nav> <ul> <li><span>Home</ ...

  4. 23.纯 CSS 创作一个菜单反色填充特效

    原文地址:https://segmentfault.com/a/1190000014876348 HTML代码: <nav> <ul> <li><span&g ...

  5. CSS了一个浮动导航条

    绝对浏览器窗口定位positio:FIXED: 下拉后出现返回顶部按钮 图片是我们美工给做的.55*55px,中间缝隙3px. css: html,body { height:100%}html,bo ...

  6. 菜单导航/URHere/面包屑，通过CSS中的content简洁表达代码

    比如我们要写一个菜单导航/URHere/面包屑,如: 首页 > 个人中心 > 修改密码 代码: <ul> <li><a href="javascri ...

  7. 利用ExpandableListView和gridview 显示可展开折叠菜单导航

    这篇随身笔带来的是结合聚合数据“菜谱大全”做的一个菜谱可折叠一级+二级列表. 先发来一些截图一睹为快吧. ExpandableListView 可用于折叠型菜单列表,其布局主要通过getGroupVi ...

  8. css制作漂亮彩带导航条菜单

    点击这里查看效果:http://keleyi.com/keleyi/phtml/divcss/17.htm 效果图: 以下是源代码: <!DOCTYPE html PUBLIC "-/ ...

  9. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

随机推荐

  1. LeetCode（282） Peeking Iterator

    题目 Given an Iterator class interface with methods: next() and hasNext(), design and implement a Peek ...

  2. 菜单及CMenu类的使用

    CMenu类的主要成员函数 BOOL LoadMenu(UINT nIDResource); 加载菜单资源,并将其附加到CMenu对象上.参数nIDResource指定了要加载的菜单资源的ID.如果菜 ...

  3. Elasticsearch安装---安装运行es

    1.进入到elasticsearch cd /data/webroot/www/elasticsearch/elasticsearch-5.6.3 2.运行:sh ./bin/elasticsearc ...

  4. Tarjan算法及其应用

    Tarjan算法及其应用 引入 tarjan算法可以在图上求解LCA,强连通分量,双联通分量(点双,边双),割点,割边,等各种问题. 这里简单整理一下tarjan算法的几个应用. LCA http:/ ...

  5. Leetcode37--->Sudoku Solver(填充数独)

    题目: 给定一个不完整的数独,要求填充好数独:最初给出的数独是有效的,且假设一定有答案: 举例: A sudoku puzzle... 解题思路: 该题与青蛙走迷宫问题很相似,都是用深度优先: 代码如 ...

  6. CSS3中的border-radius兼容IE低版本解决方法

    ie-css3.htc先说道说道这斯是弄啥嘞ie-css3.htc是一个可以让IE浏览器支持部份CSS3属性的htc文件,不只是box-shadow,它还可以让你的IE浏览器支持圆角属性border- ...

  7. 设计模式（二 & 三）工厂模式：3-抽象工厂模式

    什么是抽象工厂? 抽象工厂模式,引入了“产品族”的概念. 何为产品族?还是以 设计模式(二)工厂模式:2-工厂方法模式 提到的 Operation 为例. 之前讨论的都是局限于 Operation 这 ...

  8. 第002弹：Java 中的值传递和引用传递

    在 Java 的代码开发过程中,为了尽可能提高方法的复用性,明确方法的作用,同时防止一个方法内部过于臃肿的问题,往往会创建许多方法,那么不可避免地会涉及到参数传递的问题.通常来说,我们将 Java 中 ...

  9. BZOJ 4551 [Tjoi2016&Heoi2016]树 ——并查集

    树剖显然可以做. 然而有一种更神奇的方法,并查集+时光倒流. 每个节点指向它上面最近的标记节点,标记节点指向自己,然后删除标记,就可以用并查集查询了. #include <map> #in ...

  10. [luoguP1640] [SCOI2010]连续攻击游戏（二分图最大匹配）

    传送门 我们将每一个属性和物品连边,然后枚举从小到大属性跑匈牙利,直到找不到连边 #include <cstdio> #include <cstring> #include & ...