Css:

/*下拉菜单学习-2017.12.17 20:17 added by ldb*/

  ul{

    list-style-type:none;

    margin:;

    padding:;

    overflow:hidden;

    background-color:#333;

        /*固定在顶部*/

    /*position:fixed;

    top:0;

    width:100%;*/

  }

  li{

    float:left;

  }

  li a, .dropbtn

  {

    display:inline-block;

    color:white;

    text-align:center;

    padding:14px 16px;

    text-decoration:none;

  }

  li a:hover, .dropdown:hover .bropbtn/*/* 当下拉内容显示后修改下拉按钮的背景颜色 */

  {

    background-color:#111;

  }

  /* 容器 <div> - 需要定位下拉内容 */

.dropdown {

    /*position: relative;*/

    display: inline-block;

}

  .dropdown-content

  {

    display:none;

    position:absolute;

    background-color:#f9f9f9;

    min-width:160px;

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

  }

  /*下拉菜单内容样式*/

  .dropdown-content a

  {

    color:black;

    padding:12px 16px;

    text-decoration:none;

    display:block;

  }

  .dropdown-content a:hover {background-color: #f1f1f1}

  /*鼠标悬停在.dropdown元素上时，其下面的元素以块的样式展现出来*/

  .dropdown:hover .dropdown-content

  {

    display:block;

  }

Html:

@{

    Layout = null;

}

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <script src="../Scripts/jquery-1.9.1.min.js"></script>@*应用自己下好的jQuery,也可以引用百度(src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js)或者微软CDN*@

    <link href="../Content/ldbCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@

    <link href="../Content/ButtonCss.css" rel="stylesheet" type="text/css" /> @*stylesheet该句引入样式.css*@

    <title>Index</title>

</head>

<body>

    <ul>

        <li><a href="#product">生产管理</a></li>

        <li><a href="#javascript()">工艺管理</a></li>

        <li><a href="#javascritp()">成品管理</a></li>

        <div class="dropdown">

            <li><a class="dropbtn" href="~/Views/Home/myHtmlCss.cshtml">进销存</a></li>

            <div class="dropdown-content">

                <a href="#">坯布</a>

                <a href="#">染化料</a>

                <a href="#">五金件</a>

            </div>

        </div>

        <li><a href="#">设置</a></li>

        <li><a href="#">联系</a></li>

        <li><a href="#">关于</a></li>

    </ul>

    <div style="padding:20px;margin-top:30px;background-color:#1abc9c;height:1500px;">

        <h1>Fixed Top Navigation Bar(下拉菜单)</h1>

        <h2>Scroll this page to see the effect</h2>

        <h2>下拉菜单</h2>

    </div>

</body>

</html>

效果：

Css之导航栏下拉菜单的更多相关文章

  1. CSS：导航栏下拉菜单模板

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  5. 织梦DedeCMS v5.7 实现导航条下拉菜单

    首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...

  6. Bootstrap历练实例：导航内下拉菜单的用法

    <!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...

  7. CSS技巧分享：如何用css制作横排二级下拉菜单

    原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...

  8. 更改SharePoint 2010 顶部导航为下拉菜单样式

      更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...

  9. 何使用CSS写出一个下拉菜单。

    导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步  : 首页我们打开Subli ...

随机推荐

  1. [USACO12JAN]Video Game Combos

    AC自动机建立fail树后树上DP # include <stdio.h> # include <stdlib.h> # include <iostream> # ...

  2. POI导出Excel的几种情况

    第一种:常见导出[已知表头(长度一定),已知表数据(具体一个对象的集合,并已知对象各个属性的类型)]第二种:不常见导出[已知表头(长度不定),已知表数据(没有具体对象,装在String类型的集合中)] ...

  3. 3.2.2 break 与 continue 语句

    break 语句和 continue语句在while循环和for循环中都可以使用,并且一般常与选择结构结合使用.一旦break语句被执行,将使得break语句所属层次的循环提前结束.continue语 ...

  4. LeetCode之Easy篇 ——（7）Reverse Integer

    7.Reverse Integer Given a 32-bit signed integer, reverse digits of an integer. Example 1: Input: Out ...

  5. Docker(二)：Dockerfile 使用介绍

    上一篇文章Docker(一):Docker入门教程介绍了 Docker 基本概念,其中镜像.容器和 Dockerfile .我们使用 Dockerfile 定义镜像,依赖镜像来运行容器,因此 Dock ...

  6. 九度OJ题目1003：A+B

    while(cin>>str1>>str2)就行了,多简单,不得不吐槽,九度的OJ真奇葩 题目描述: 给定两个整数A和B,其表示形式是:从个位开始,每三位数用逗号", ...

  7. 永久开启完整版Google Play

    中国内地使用Play商店只能看见两个项目,即应用和游戏,但实际上有六个,见图.解决方法,第一,通过fqrouter2进入Play商店,见图,第二,通过google wallet. 参考网址:http: ...

  8. linux学习之路－－（四）文件，目录管理

    1.mkdir:创建空目录 -p: -v:verbose mkdir -pv /mnt/test/x/m  /mnt/test/y mkdir -pv /mnt/test/{x/m,y} 命令行展开: ...

  9. php后台开源框架

    1,OneBase 官网首页:https://onebase.org 后台演示:https://demo.onebase.org/admin.php 接口演示:https://demo.onebase ...

  10. 关于脱离laravel框架使用Illuminate/Validation验证器

    1.关于Illuminate/Validation验证器 Validation 类用于验证数据以及获取错误消息. github地址:github.com/illuminate/validation 文 ...