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 ...
随机推荐
- [BZOJ2298] [HAOI2011] problem a (dp)
Description 一次考试共有n个人参加,第i个人说:“有ai个人分数比我高,bi个人分数比我低.”问最少有几个人没有说真话(可能有相同的分数) Input 第一行一个整数n,接下来n行每行两个 ...
- 关系型数据库工作原理-高速缓存(翻译自Coding-Geek文章)
本文翻译自Coding-Geek文章:< How does a relational database work>. 原文链接:http://coding-geek.com/how-dat ...
- C++与Java通过WebService通信(下)
一. 前言 本篇讲述如何通过Java客户端访问C++服务端发布的SOAP模式的WebService接口.文档中的样例代码拷贝出去即可运行,所有的代码都是本地测试OK的:本文不但解决了接口调用的问题,同 ...
- link 标签
link标签 主要是引用外部文件 rel属性 规定当前文档与被链接文档之间的关系 alternate,author,help,icon,licence,next,pingback,prefetch,p ...
- eclipse 中启动Tomcat超时了错误
修改E:\eclipse\eclipse\workspace\.metadata\.plugins\org.eclipse.wst.server.core\servers.xml 将 start-ti ...
- 使用Angular CLI生成 Angular 5项目
如果您正在使用angular, 但是没有好好利用angular cli的话, 那么可以看看本文. Angular CLI 官网: https://github.com/angular/angular- ...
- Django+xadmin打造在线教育平台（二）
三.xadmin后台管理 3.1.xadmin的安装 django2.0的安装(源码安装方式): https://github.com/sshwsfc/xadmin/tree/django2 把zip ...
- 使用python读取word，写入execl
word里面有2张表,需要找到第二张表,并写入execl中: 代码如下: #coding:utf-8 import os from docx import Document import win32c ...
- 【Python】 命名空间与LEGB规则
命名空间与LEGB规则 之前隐隐约约提到过一些关于Python赋值语句的特殊性的问题,这个问题的根源就在于Python中的变量的命名空间机制和之前熟悉的C也好java也好都不太一样. ■ 命名空间 所 ...
- redis 相关知识
1. 什么是Redis Redis是由意大利人Salvatore Sanfilippo(网名:antirez)开发的一款内存高速缓存数据库.Redis全称为:Remote Dictionary Ser ...