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

随机推荐

关于md5的使用方法
本周工作,学习中用到了,md5. 在我们需要用到md5密码的时候,可以使用: System.Web.Security.FormsAuthentication.HashPasswordForStorin ...
使用ListView控件展示数据
属性名称说明items 指定显示那种视图View 指定显示那种视图largelmagelist 大图标图像的imagelist控件SmallLmagelist 小图标图像的imag ...
谨慎修改Python的类属性
Python的类和类实例都是可变对象,可以随时给属性赋值,并且在原处修改. 在对类属性进行修改时需要特别小心,因为所有的类实例都继承共享类属性,除非实例本身存在和类属性同名的属性.对类属性进行修改,会 ...
Jquery ajax异步传值的两个实用的方法，你看后肯定会用第二个
故名思议,你是个asp.net 或者是搞PHP的或者是javaweb的 ,但是为了提高界面的效率,你必须会实用jquery的ajax,当然,在ajax异步传值的时候很头疼的一件事情就是,拼接字符串 ...
【ASP.NET 系列】浅谈缓存技术在ASP.NET中的运用
本篇文章虽不谈架构,但是Cache又是架构中不可或缺的部分,因此,在讲解Cache的同时,将会提及到部分架构知识,关于架构部分,读者可以不用理解,或者直接跳过涉及架构部分的内容你只需关心Cache即 ...
转自 BotVS 量化平台社区 --- 如何从绩效报告中分辨出“好模型 or 坏模型”
## NO:01 在投资行业一直有一个说法,靠交易盈利是所有赚钱方式中最难的一种,以至于有人戏谑称交易为投资领域的搬砖工作. 为了提升交易效率.挖掘潜在投资机会,量化交易伴随着信息技术的发展大行其道, ...
Android查缺补漏（View篇）--事件分发机制
事件分发机制是Android中非常重要的一个知识点,同时也是难点,相信到目前为止很多Android开发者对事件分发机制并没有一个非常系统的认识,当然也包括博主个人在内.可能在平时的开发工作中我们并没有 ...
提取微信小程序“头脑王者”业务逻辑
产品经理今天让我整理微信小程序"头脑王者"的产品逻辑,花了一天时间在XMind写了写,整理后的内容如图,分享给大家希望大家可以多多点评,互相学习,不知道应该写什么,重要的内容都在图 ...
LVS集群DR模式实例(4)
LVS集群DR模式实例 1. 实验拓扑图 2. 实验环境 3台CentOS6.4 64bit的服务器. 类型 IP DR eth0:10.20.73.20 VIP eth0:0 10.20.73.3 ...
Zabbix实战-简易教程（2）--整体架构图

html_栏目下拉

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

随机推荐

热门专题