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. [BZOJ1046] [HAOI2007] 上升序列 (dp)

    Description 对于一个给定的S={a1,a2,a3,…,an},若有P={ax1,ax2,ax3,…,axm},满足(x1 < x2 < … < xm)且( ax1 < ...

  2. 论文笔记（7）：Constrained Convolutional Neural Networks for Weakly Supervised Segmentation

    UC Berkeley的Deepak Pathak 使用了一个具有图像级别标记的训练数据来做弱监督学习.训练数据中只给出图像中包含某种物体,但是没有其位置信息和所包含的像素信息.该文章的方法将imag ...

  3. Android 视频展示控件之 SurfaceView、GLSurfaceView、SurfaceTexture、TextureView 对比总结

    一.SurfaceView SurfaceView继承自View,并提供了一个独立的绘图层,你可以完全控制这个绘图层,比如说设定它的大小,所以SurfaceView可以嵌入到View结构树中,需要注意 ...

  4. HandsonTable日期控件的汉化

    由于项目的需要,想把HandsonTable自带的日期中英文替换成中文.其实这个不难,只要在库文件中替换下就可以了,替换的效果对比如下:         如果有需要的同学,可以在此处下载 By QJL

  5. pods 报错There may only be up to 1 unique SWIFT_VERSION per target

    zhangpengdeMacBook-Pro:Jump zhangpeng$ pod install Analyzing dependencies [!] There may only be up t ...

  6. XeLaTeX中文模板

    XeLaTeX对中文的支持很友好,可以直接调用系统已安装字体进行文档的撰写.其中需要引用字体的名字,开始遇到了写问题,经常发现字体未引用,现在大概明白了. 引用字体的时候,如果不加中括号,就需要引用字 ...

  7. 如何为开发项目编写规范的README文件（windows），此文详解

    为什么要写这篇博客? 其实我是一个入坑已经半年的程序员,因为不是计算机专业,只能自己摸索,所以我深知博客的重要性.每次我的学习笔记啊,项目的,面试题啊,有的,只要有时间,我肯定上传上来,一方面自己可以 ...

  8. js中的Hook

    1. 简单理解: hook(钩子)就是: 把将要执行的的函数或者一系列动作注册到一个统一的接口下面, 当应用程序调用此接口(即hook)时,就等于调用了这一系列动作.

  9. curl/libcurl获取打开网页平均网速

    CURL: curl -o /dev/null -s -w %{http_code}:%{http_connect}:%{content_type}:%{time_namelookup}:%{time ...

  10. gif文件解析

    详细资料:http://blog.csdn.net/wzy198852/article/details/17266507 MD5:98206F88B84CCC399C840C8EEC902CCF GI ...