Css之导航栏下拉菜单
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之导航栏下拉菜单的更多相关文章
- CSS：导航栏下拉菜单模板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...
- CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单
水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
- Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
- 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...
- 织梦DedeCMS v5.7 实现导航条下拉菜单
首先将下面这段代码贴到templets\default\footer.htm文件里(只要在此文件里就行,位置无所谓) <</span>script type='text/javasc ...
- Bootstrap历练实例：导航内下拉菜单的用法
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content=&q ...
- CSS技巧分享：如何用css制作横排二级下拉菜单
原文:CSS技巧分享:如何用css制作横排二级下拉菜单 导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢,下来小编就一步一步教大 ...
- 更改SharePoint 2010 顶部导航为下拉菜单样式
更改SharePoint 2010 顶部导航为下拉菜单样式 最后的效果图: 假如一个网站集顶级站点下面有子网站:sub site1,该子站点下面又有两个子站点:sub site1_1,sub si ...
- 何使用CSS写出一个下拉菜单。
导航菜单是每个网站所必备的功能,也是每个学习制作网站的朋友所必须接触的,如何用css样式制作一个简单漂亮的二级下拉菜单呢? 下面为大家分享一下我的经验 方法步骤: 第一步 : 首页我们打开Subli ...
随机推荐
- Gradle下载 Jar 包
使用此方法下载Jar包的前提是已经配置好了Gradle的环境了,配置好的标志是在终端输入gradle不提示command not found. 1. 编写build.gradle文件代码: apply ...
- Android OpenGL ES 开发（九）: OpenGL ES 纹理贴图
一.概念 一般说来,纹理是表示物体表面的一幅或几幅二维图形,也称纹理贴图(texture).当把纹理按照特定的方式映射到物体表面上的时候,能使物体看上去更加真实.当前流行的图形系统中,纹理绘制已经成为 ...
- 自动化之路 Graphite监控上手指南
自动化运维怎能少了监控,推荐Graphite监控,下面是配置地址 http://www.infoq.com/cn/articles/graphite-intro/ Graphite官网 http:// ...
- 为 Debian 8 或 Debian 9（64 位）安装 .NET Core
在 Debian 8 或 Debian 9(64 位)上安装 .NET Core 的具体步骤: 备注:必须有用户控制目录,才能通过 tar.gz 在 Linux 系统上进行安装. 1.准备一台刚安装的 ...
- c++中使用xercesc对xml进行schema校验
头文件 #pragma once #if !defined(AFX_A1CONTENTHANDLER_H__E0CFBC18_CCC1_42F3_B0A4_B03331AB9693__INCLUDED ...
- win10每次开机都显示“你的硬件设置已更改，请重启电脑……”的解决办法
之前的系统没有这个问题,就是win10有这个问题,过一段时间就会出现这个问题,网上找了很多,最后发现是显卡驱动的问题,是A卡的问题,只需要更新A卡驱动即可,如果更新A卡驱动不行的话,或者说A卡驱动已经 ...
- 巧用UserAgent来解决浏览器的各种问题
以前对UserAgent了解不是很透彻,今天发现UserAgent用处多多.比如我之前一直很喜欢用火狐浏览器,不过用了那么久发现火狐浏览器问题多多,比如有的论坛上传附件或者上传图片等按钮没有作用,并且 ...
- 【Unity与23种设计模式】解释器模式（Interpreter）
GoF中定义: "定义一个程序设计语言所需要的语句,并提供解释来解析(执行)该语言." 传统上,执行程序代码通常通过两种方式 第一种:编译程序 第二种:解释器 常见的使用解释器的程 ...
- 连不上虚拟机中的Redis的原因分析、以及虚拟机网络配置
1. 网络最好是桥接方式.我之前用的是"网络地址转换(NAT)",导致虚拟机里用命令ifconfig得到的ip是10.0.2.15,好奇怪的感觉,然后在真实机上一直连不上.有的说用 ...
- 数据库 --> 5种关系型数据库比较
5种关系系数据库比较 目前,商品化的数据库管理系统以关系型数据库为主导产品,技术比较成熟.面向对象的数据库管理系统虽然技术先进,数据库易于开发.维护,但尚未有成熟的产品.国际国内的主导关系型数据库管理 ...