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. Bzoj4872: [Shoi2017]分手是祝愿

    题面 Bzoj Sol 首先从大向小,能关就关显然是最优 然后 设\(f[i]\)表示剩下最优要按i个开关的期望步数,倒推过来就是 \[ f[i]=f[i-1]*i*inv[n]+f[i+1]*(n- ...

  2. SpringMVC 注解式开发

    SpringMVC的注解式开发是指,处理器是基于注解的类的开发.对于每一个定义的处理器,无需再配置文件中逐个注册,只需在代码中通过对类与方法的注解,便可完成注册.即注解替换是配置文件中对于处理器的注册 ...

  3. C++通过COM接口操作PPT

    一. 背景 在VS环境下,开发C++代码操作PPT,支持对PPT模板的修改.包括修改文本标签.图表.表格.满足大多数软件生成PPT报告的要求,先手工创建好PPT模板,在程序中修改模板数据. 二. 开发 ...

  4. spring中aop的注解实现方式简单实例

    上篇中我们讲到spring的xml实现,这里我们讲讲使用注解如何实现aop呢.前面已经讲过aop的简单理解了,这里就不在赘述了. 注解方式实现aop我们主要分为如下几个步骤(自己整理的,有更好的方法的 ...

  5. Gradle-----搭建简单的Gradle项目

    GroupId 项目所在组信息 ArtifactId 项目名称 Version 项目的版本信息

  6. Object.prototype.hasOwnProperty与Object.getOwnPropertyNames

    Object.prototype.hasOwnProperty() 所有继承了 Object 的对象都会继承到 hasOwnProperty 方法.这个方法可以用来检测一个对象是否含有特定的自身属性: ...

  7. nginx+lua 根据指定路径反向代理

    location /imgproxytest{ if ($uri ~ ".*\.(jpg|png|jpeg|bmp|gif|swf|css)$"){ rewrite_by_lua ...

  8. spring-boot-devtools

    Create a new Maven Project  and  we have two class under the package com.example.demo like below scr ...

  9. 每天学习点--------第六天（2017-10-10） 摘要: mysql和Oracle的区别

    1.自动增长数据类型的处理 Mysql有自动增长的数据类型,插入记录时不用操作此字段,会自动获取数据值.Oracle没有自动增长的数据类型,需要建立一个自动增长的序列号,插入记录时要把序列号的下一个值 ...

  10. vue/axios请求拦截

    import axios from 'axios';import { Message } from 'element-ui';import Cookies from 'js-cookie';impor ...