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

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

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

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

取子栏目标签

{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>
<li><a href="#">研究成果</a></li>
<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="#">校企合作与实训</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_栏目下拉的更多相关文章

  1. jquery导航二级栏目下拉

    <div class="Nav_L L"> <ul> <li><a href="" title="" ...

  2. CSS3——对齐 组合选择符 伪类 伪元素 导航栏 下拉菜单

     水平&垂直对齐 元素居中对齐 .center { margin: auto; width: 50%; border: 3px solid green; padding: 10px; } 文本 ...

  3. Bootstrap框架(基础篇)之按钮,网格,导航栏,下拉菜单

    一,按钮 注意:虽然在Bootstrap框架中使用任何标签元素都可以实现按钮风格,但个人并不建议这样使用,为了避免浏览器兼容性问题,个人强烈建议使用button或a标签来制作按钮. 框架中提供了基础按 ...

  4. android 滚动栏下拉反弹的效果（相似微信朋友圈）

    微信朋友圈上面的图片封面,QQ空间说说上面的图片封面都有下拉反弹的效果,这些都是使用滚动栏实现的.下拉,当松开时候.反弹至原来的位置.下拉时候能看到背景图片.那么这里简介一下这样的效果的实现. 本文源 ...

  5. Css之导航栏下拉菜单

    Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:; padding:; overflow: ...

  6. iOS---实现简书和知乎的上滑隐藏导航栏下拉显示导航栏效果

    因为自己用简书和知乎比较多,所以对其导航栏的效果比较好奇,自己私下里找资料实现了一下.这个效果的关键点在于下方可供滑动的内容的便宜距离inset的改变,以及滑动的scrollview代理的执行,废话不 ...

  7. 4 CSS导航栏&下拉菜单&属性选择器&属性和值选择器

    CSS导航栏 熟练使用导航栏,对于任何网站都非常重要 使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单 垂直导航栏: <!DOCTYPE html> <html> & ...

  8. 计划将项目中使用entity framework的要点记录到改栏目下

    ef监控sql执行性能日志.http://www.cnblogs.com/CreateMyself/p/5277681.html http://123.122.205.38/cn_sql_server ...

  9. CSS：导航栏下拉菜单模板

    <!DOCTYPE html><html>    <head>        <meta charset="utf-8">      ...

随机推荐

  1. Tengine 安装配置全过程（nginx 同理）

    1.安装必要的编译环境好 yum update yum install gcc gcc-c++ autoconf automake 2.安装需要的组件 A.PCRE PCRE(Perl Compati ...

  2. CentOS7源码安装lamp

    环境介绍 虚拟机 : VMware Workstation 14 Pro 镜像 : CentOS Linux release 7.4.1708 (Core) 物理机 : windows 7 64位 防 ...

  3. glimmer 3.02安装小记

    wget http://www.cbcb.umd.edu/software/glimmer/glimmer302.tar.gz tar xzfglimmer302.tar.gz cd glimmer3 ...

  4. (五)：C++分布式实时应用框架——微服务架构的演进

    C++分布式实时应用框架--微服务架构的演进 上一篇:(四):C++分布式实时应用框架--状态中心模块 版权声明:本文版权及所用技术归属smartguys团队所有,对于抄袭,非经同意转载等行为保留法律 ...

  5. 搭建Vue.js开发环境（window10）

    我在配置Vue.js环境的时候遇到了很多的问题,希望能把这些解决方法也介绍给大家,希望能帮到大家,共同学习. 如果要转发,请注明原作者和原产地,谢谢! 注释:下面任何命令都是在windows的命令行工 ...

  6. Protobuf使用（一）

    Protobuf使用(一)   前言:   最近由于接手一个支付的项目,他们那边的网络请求和数据解析都与我平常接触的项目不同,数据请求由于保密暂时不能说,但是数据解析用的是Protobuf,于是我就顺 ...

  7. Linux 配置163yum源epel 源

    今天一个小伙伴询问博主,想换个163源(阿里源.亚马逊应该都是一样,博主没有一一验证)怎么换!博主当然兴致勃勃的准备好了指点小伙伴...但是,你没猜错,打脸了.而且最后还是和小伙伴一起配置好的,所以就 ...

  8. ATM机运行代码

    实现代码: import java.util.Scanner; public class Atm { public static void main(String[] args) { // TODO ...

  9. ECharts模拟迁徙案例

    ECharts模拟迁徙案例 独立页面:http://211.140.7.173:8081/t/wuhairui/ditu/a.html

  10. \(?0\d{2}[) -]?\d{8}正则表达式的解释

    正则表达式30分钟出现了这样一个正则表达式:(?0\d{2}[) -]?\d{8} "("和")"也是元字符,所以需要转义. ?匹配零或一次 (? 表示 出现( ...