html_栏目下拉

=========================================================

=================【下拉栏目菜单】=================

=========================================================

取子栏目标签

{dede:channelartlist row='7'}
<li onmouseover="nav_show(this)" onmouseout="nav_didden(this)">
<a href="#" >{dede:field name='typename'/}</a>
<ul class="deng">
{dede:channel type='son' row='5'}
<li><a href="#">[field:typename/]</a></li>
{/dede:channel}
</ul>
</li>
{/dede:channelartlist}

========================================================

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
* {
padding:0;
margin:0;
}
body {
font-family:verdana, sans-serif;
font-size:14px; background-color:#fff;
}
#nav, #nav li ul {
/*去符号*/
list-style-type:none;
}
#nav {
}
#nav li {
/*左浮动、文字居中、相对定位*/
list-style: none;
float:left;
text-align:center;
position:relative;
}
#nav li a:link, #nav li a:visited {
/**/
display:block;
text-decoration:none;
color:#fff;
width:82px;
height:40px;
line-height:40px;
border:1px solid #fff;
border-width:1px 1px 0 0;
background:#255f9e;
padding-left:10px;
}
#nav li a:hover {
color:#fff;
background:#ffb100;
}
#nav li ul li a:hover {
color:#fff;
background:#ffb100
}
#nav li ul {
display:none;
position:absolute;
top:40px;
margin-top:1px;
font-size:12px;
}
</style>
<script type="text/javascript">
function nav_show(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "block";
}
function nav_didden(li) {
var subMenu = li.getElementsByTagName("ul")[0];
subMenu.style.display = "none";
}
</script>
</head>
<body>
<div id="nav">
<ul>

<li onmouseover="nav_show(this)" onmouseout="nav_didden(this)">
<a href="#">校企合作与实训</a>
<ul class="deng">
<li><a href="#">校企合作</a></li>
<li><a href="#">实习实训</a></li>
</ul>

</li>
<li onmouseover="nav_show(this)" onmouseout="nav_didden(this)">
<a href="#">招生就业</a>
<ul class="deng">
<li><a href="#">招生</a></li>
<li><a href="#">就业</a></li>
</ul>
</li>
<li onmouseover="nav_show(this)" onmouseout="nav_didden(this)">
<a href="article.htm">党团建设</a>
<ul class="deng">
<li><a href="#">党支部建设</a></li>
<li><a href="#">团支部建设</a></li>
</ul>
</li>
<li onmouseover="nav_show(this)" onmouseout="nav_didden(this)">
<a href="info.htm">报名入口</a>
<ul class="deng">
<li><a href="#">社会报名</a></li>
<li><a href="#">校内报名</a></li>
</ul>
</li>

</ul>
</div>

</body>

</html>

==============================================

<!DOCTYPE html>
<html>
<head>
<script
type="text/javascript" src="jquery-1.11.1.js"></script>

<style>

nav a {
text-decoration: none;
}
nav >
ul > li {
float: left;
text-align: center;
padding: 0 0.5em;

}

nav li ul.sub-menu {
display: none;
padding-left: 0
!important;
}

.sub-menu li {
color: white;
}

.sub-menu li:hover {
background-color: black;
}

.sub-menu li:hover a {
color: white;
}

ul {

list-style: none;
}
</style>
</head>

<body>
<nav>
<ul>
<li><a
href="#">Home
<ul class="sub-menu">
<li><a
href="#">sub1</a></li>
<li><a
href="#">sub2</a></li>
<li><a
href="#">sub3</a></li>
</ul>
</li>

<li><a href="#">Programming
<ul class="sub-menu">

<li><a href="#">sub1</a></li>
<li><a
href="#">sub2</a></li>
<li><a
href="#">sub3</a></li>
</ul>
</li>

<li><a href="#">Japanese
<ul class="sub-menu">

<li><a href="#">sub1</a></li>
<li><a
href="#">sub2</a></li>
<li><a
href="#">sub3</a></li>
</ul>
</li>

</ul>
</nav>
</body>
<script
type="text/javascript">
$(document).ready(function() {
$('nav
li').hover(function() {
$(this).find('.sub-menu').css('display', 'block');

}, function() {
$(this).find('.sub-menu').css('display', 'none');

});
});
</script>
</html>

html_栏目下拉的更多相关文章

jquery导航二级栏目下拉
<div class="Nav_L L"> <ul> <li><a href="" title="" ...
CSS3——对齐组合选择符伪类伪元素导航栏下拉菜单
水平&垂直对齐元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...
Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单
一,按钮注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...
android 滚动栏下拉反弹的效果（相似微信朋友圈）
微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源 ...
Css之导航栏下拉菜单
Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...
iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果
因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...
4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器
CSS导航栏熟练使用导航栏,对于任何网站都非常重要使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单垂直导航栏: <!DOCTYPE html> <html> & ...
计划将项目中使用entity framework的要点记录到改栏目下
ef监控sql执行性能日志.http://www.cnblogs.com/CreateMyself/p/5277681.html http://123.122.205.38/cn_sql_server ...
CSS：导航栏下拉菜单模板
<!DOCTYPE html><html> <head> <meta charset="utf-8"> ...

随机推荐

一、JavaSE语言概述
1.软件:系统软件 VS 应用软件 2.人与计算交互:使用计算机语言.图形化界面VS命令行. 3.语言的分类:第一代:机器语言第二代:汇编语言第三代语言:高级语言(面向过程-面向对象) 4.jav ...
Python Tkinter模块 Grid(grid)布局管理器参数详解
在使用Tkinter模块编写图像界面时,经常用到pack()和grid()进行布局管理,pack()参数较少,使用方便,是最简单的布局,但是当控件数量较多时,可能需要使用grid()进行布局(不要在同 ...
Swift语言中与C/C++和Java不同的语法（四）
这一节,我们将会讨论一下Swift中的函数相关的基本内容首先是函数的创建: func sayHello (name:String) -> String { return "Hello ...
robotframework的学习笔记（十三）------Robot Framework常用库简介
标准库 Robot Framework可以直接导入使用的库,包括: Builtin:包含经常需要的关键字.自动导入无需import,因此总是可用的 Dialogs:提供了暂停测试执行和从用户的输入方式 ...
使用linux perf工具生成java程序火焰图
pre.cjk { font-family: "Nimbus Mono L", monospace } p { margin-bottom: 0.1in; line-height: ...
可视化编程开发板TurnipBit支持LED亮度可调功能
微软的makecode编辑器更新至版本v0.12.64.新增LED的可调亮度功能.而作为中文版可视化编程的口袋计算机TurnipBit完全兼容micro:bit,同样支持LED的亮度可调功能. 该项功 ...
Python2和Python3中的字符串编码问题解决
Python2和Python3在字符串编码上是有明显的区别. 在Python2中,字符串无法完全地支持国际字符集和Unicode编码.为了解决这种限制,Python2对Unicode数据使用了单独的字 ...
webapi框架搭建-日志管理log4net
前言本篇讲怎么在前几篇已经创建好的项目里加上日志处理机制,我们采用Log4net技术.跟多的log4net技术的细节请查阅log4net的官网. log4net官网:http://logging.a ...
Python基础-*args和**kwargs魔法变量
在学习Python时,总会遇到*args和**kwargs这两个魔法变量,那么它们到底是什么? 首先,并不是必须写成*args和**kwargs.只有变量前面的*(星号)才是必须的,你也可以写成*va ...
Shell和命令基础
什么是Shell Shell是系统的用户界面,提供了用户与内核进行交互操作的一种接口(命令解析器),Shell接收用户输入的命令并把它送入到内核去执行,结构如下图 Shell的功能 Shell最重要的 ...

html_栏目下拉

html_栏目下拉的更多相关文章

随机推荐

热门专题