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. MySQL增量订阅&消费组件Canal POC

    POC的目的:1.与MYSQL的对接方式,配置文档2.订阅的延迟3.订阅后宕机消息会不会丢失4.能不能从指定的点开始重新订阅5.高并发写入的时候,日志的顺序是否还能保持,不考虑消费的情况订阅是否会延迟 ...

  2. Windows下GO的开发环境配置

    本文主要内容如下几点: 下载安装GO 配置多个工作区,第一个默认放第三方包,其他的放项目代码 包管理器godep的安装使用 安装过程中的一些坑(墙) vscode中使用go 1. 下载并安装go 官网 ...

  3. WordPress二级菜单设置

    关于二级菜单的设置,首先建立几个自己的分类目录,然后打开菜单设置界面,用鼠标自由拖动即可.注意,这里说的一级菜单和二级菜单都是分类目录,所 以我们写文章的时候应该同时选择一级菜单和二级菜单两个分类目录 ...

  4. Lucene-01:创建索引

    我们在D盘下建一个文件夹叫lucene,lucene内再建两个文件夹,一个叫example,一个叫index01.example文件夹下三个txt文件,a.txt内容为hello java,b.txt ...

  5. 如何通过TortoiseGit（小乌龟）把本地项目上传到github上

    1.第一步: 安装git for windows(链接:https://gitforwindows.org/)一路next就好了, 如果遇到什么问题可以参考我另外一篇文章~^ - ^ 2.第二步:安装 ...

  6. MIP （百度移动网页加速器）

    前言:第一次用移动网页加速器,感觉好心情都被弄坏了.确实性能提高了不少,但是限制js,对于一些交互实现都成问题.MIP是Mobile Instant Pages的缩写,指百度移动网页加速器, 是一套应 ...

  7. java中equals相同，hashcode一定相同ma

    一.jdk中equals和hashcode的定义和源码进行分析 1.java.lang.Object中对equals()方法的定义 java.lang.Object中对hashCode()方法的定义 ...

  8. android中xml tools属性详解（转）

    第一部分 安卓开发中,在写布局代码的时候,ide可以看到布局的预览效果. 但是有些效果则必须在运行之后才能看见,比如这种情况:TextView在xml中没有设置任何字符,而是在activity中设置了 ...

  9. mysql gtid 主从复制

    基于GTID环境搭建主从复制 1.环境 ----------------------------------------------------------| |mysql版本 | 5.7.14 | ...

  10. vs运行单个cpp文件

    打开vs,新建项目,左侧win32见上图,右侧 win32控制台应用程序,填好名称后,确定----下一步,如下图,空项目 紧接着如下图,通过现有项添加自己的cpp文件,便可以运行了