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"> ...

随机推荐

自定义php错误异常处理
set_exception_handler() 函数设置用户自定义的异常处理函数. 该函数用于创建运行时期间的用户自己的异常处理方法. 该函数会返回旧的异常处理程序,若失败,则返回 null. set ...
ES6(四）字符串的扩展
1.字符的表示方式最早在 \u0000-\uFFFF 之间的字符已经足够使用吗,每个字符占两个字节,超出范围,必须使用双字节形式表达, 即每个字符占四个字节.超出范围的字符,会被解读成 \uXX ...
springMVC(7)---表单标签
springMVC(7)---表单标签 form标签作用简单来讲form表单有两大作用 1:第一就是往后端提交数据或者前端回显 ...
如何实现VM框架中的数据绑定
作者:佳杰本文原创,转载请注明作者及出处如何实现VM框架中的数据绑定一:数据绑定概述视图(view)和数据(model)之间的绑定二:数据绑定目的不用手动调用方法渲染视图,提高开发效率:统 ...
学Java必看，不看的人都后悔了
什么是Java? Java是一门面向对象编程语言,不仅吸收了C++语言的各种优点,还摒弃了C++里难以理解的多继承.指针等概念,因此Java语言具有功能强大和简单易用两个特征.Java语言作为静态面向 ...
Use of Deep Learning in Modern Recommendation System: A Summary of Recent Works（笔记）
注意:论文中,很多的地方出现baseline,可以理解为参照物的意思,但是在论文中,我们还是直接将它称之为基线,也就是对照物,参照物. 这片论文中,作者没有去做实际的实验,但是却做了一件很有意义的事 ...
deeplearning.ai 作业中的Python常用命令
1. print大法 test = Hello World print ("test:" + test) 2. math和numpy的区别:math只对单个元素,numpy会bro ...
前端 IoC 理念入门
背景近几年,前端应用(WebApp)正朝着大规模方向发展,在这个过程中我们会对项目拆解成多个模块/组件来组合使用,以此提高我们代码的复用性,最终提高研发效率. 在编写一个复杂组件的时候,总会依赖其他 ...
通过例子理解 k8s 架构 - 每天5分钟玩转 Docker 容器技术（122）
为了帮助大家更好地理解 Kubernetes 架构,我们部署一个应用来演示各个组件之间是如何协作的. 执行命令 kubectl run httpd-app --image=httpd --replic ...
JDBC（二）之JDBC处理CLOB和BLOB及事务与数据库元数据获取
前面大概介绍了JDBC连接数据库的过程,以及怎么操作数据库,今天给大家分享JDBC怎么处理CLOB和BLOB存储图片的事情,以及JDBC怎么去处理事务.怎么在插入数据的时候生成主键返回值一.JDBC ...

html_栏目下拉

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

随机推荐

热门专题