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

随机推荐

Mac说——关闭SIP
今天在安装keras的时候总是提示numpy无法安装,百度了下,说是新版本的os系统加入了spi机制. 什么是SIP: 系统集成保护(System Integrity Protection,SIP), ...
日语编程语言"抚子" - 第三版特色初探
原址: https://zhuanlan.zhihu.com/p/30800689 原文: 日语编程语言"抚子" - 第三版特色初探它山之石可以攻玉. 学习其他的母语编程语言, ...
jquery获取select选中的值
http://blog.csdn.net/renzhenhuai/article/details/19569593 误区: 一直以为jquery获取select中option被选中的文本值,是这样写的 ...
sql sever[基本] ''增删改'' 随笔
结构语言分类 DDL(数据定义语言) create drop alter 创建删除以及修改数据库,表,存储过程,触发器,索引.... DML(数据操作语言) insert delete ...
SQLServer LinkServer 链接服务器
Linked Server简介我们日常使用SQL Server数据库时,经常遇到需要在实例Instance01中跨实例访问Instance02中的数据.例如在做数据迁移时,如下语句: insert ...
(笔记)：组合and继承之访问限制(一)
下面在介绍组合与继承之前,先介绍一下访问限制,访问限制:public.protected.private三者是按照授权的大小排序的.这里有个博客,对这三者有了经典的诠释.http://blog.csd ...
Centos6.5 登录时，提示Module is unkown
前一段时间,因工作需要在物理机上装了一个Centos6.5,但是,用了一段时间,发现再登录时,无论如何也登不进去了,并且也不提示用户名或者密码错误.我一度以为是在profile以及.bashrc或者. ...
配置不同环境下启用swagger，在生产环境关闭swagger
前言 Swagger使用起来简单方便,几乎所有的API接口文档都采用swagger了.使用示例:http://www.cnblogs.com/woshimrf/p/swagger.html, 现在开发 ...
boltdb的实现
整个代码不是很复杂,可以从代码中理解如何实现. 特点:btree,很小巧,但实现了完整事务机制,稳定,即使丢电也不会导致数据库错误. 整个结构如下: meta page (前两页) --- > ...
如何利用git shell提交代码到github
在很早之前我根据找到的一些资料以及自己的实践总结了一篇如何将VS2015上的代码上传到GitHub上,后来我发现有小伙伴私信我,说跟我上面写的不一样,但是那段时间也比较忙,当我发现有人私信的时候差不过 ...

html_栏目下拉

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

随机推荐

热门专题