有用的导航栏下拉代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<title>Plain Shane Design > CSS Drop Down Demo</title>
<style type="text/css">
*{margin:0; padding: 0;}
#nav ul { list-style-type:none; }
#nav ul li { float:left; position: relative;}
#nav ul li a { border-right:1px solid #e9e9e9; padding:20px; display:block; text-decoration:none; text-
align:center; color:#999;}
#nav ul li ul {display: none;}
#nav ul li:hover ul {display: block; position: absolute; top:56px; min-width:190px; left:0;}
#nav ul li:hover ul li a {display:block; background:green; color:#ffffff; width: 110px; text-align:
center; border-bottom: 1px solid #f2f2f2; border-right: none;}
.top { border-top: 1px solid #f2f2f2;}
</style>
</head>
<body>

<div id="nav">
<ul>
<li><a target="_blank">Contact</a>
<ul>
<li class="top"><a href="http://www.jb51.net" target="_blank">Web</a></li>
<li><a href="http://www.jb51.net" target="_blank">Print</a></li>
<li><a href="http://www.jb51.net" target="_blank">The Rest</a></li>
</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

时间: 2025-01-01 09:25:49

有用的导航栏下拉代码的相关文章

css导航栏下拉菜单代码【转自http://zxm.92.blog.163.com/blog/static/544600282010727112723874/】

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" c

NAV导航栏———下拉菜单

利用CSS实现导航栏菜单—下拉菜单. 首先给出HTML下拉菜单布局格式: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Stylin' with CSS - Figure 6.5 Drop-Down Menus</title> <link rel="stylesheet" type="text/css&

Css之导航栏下拉菜单

Css: /*下拉菜单学习-2017.12.17 20:17 added by ldb*/ ul{ list-style-type:none; margin:0; padding:0; overflow:hidden; background-color:#333; /*固定在顶部*/ /*position:fixed; top:0; width:100%;*/ } li{ float:left; } li a, .dropbtn { display:inline-block; color:whi

导航栏下拉至一定高度后固定在顶部的特效

<script type="text/javascript"> $(function(){ var nav=$(".nav"); //得到导航对象 var win=$(window); //得到窗口对象 var sc=$(document);//得到document文档对象. win.scroll(function(){ if(sc.scrollTop()>=100){ nav.addClass("fixednav"); $(&

很酷的导航条下拉效果

<style type="text/css"><!--.p9{ font-family: "宋体"; font-size: 9pt; }body { font-family: "宋体"; font-size: 9pt; margin-top: 0px; margin-left: 0px; margin-right: 0px}UNKNOWN { TEXT-DECORATION: none}A:visited { TEXT-DECO

华丽导航CSS下拉菜单特效

华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.huiyi8.com/fengjing/

统一设置导航栏与状态栏代码

统一设置导航栏与状态栏代码: #import "AppDelegate.h" #import "SZMMainTabBarController.h" @interface AppDelegate () @end @implementation AppDelegate - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launch

React实现顶部固定滑动式导航栏(导航条下拉一定像素时显示原导航栏样式)

摘要 基于react的框架开发一个顶部固定滑动式的酷炫导航栏,当导航栏置顶时,导航栏沉浸在背景图片里:当鼠标滑动滚轮时,导航栏固定滑动并展示下拉样式. HTML部分 相关技术栈:react.antd.react-router.详细的技术栈应用请参考官方文档的使用说明. * 展示主页App.jsx组件代码 import React from 'react'; import './App.css'; import { Link, Route } from 'react-router-dom'; im

Android ActionBar完全解析,使用官方推荐的最佳导航栏(下)

转载请注明出处:http://blog.csdn.net/guolin_blog/article/details/25466665 本篇文章主要内容来自于Android Doc,我翻译之后又做了些加工,英文好的朋友也可以直接去读原文. http://developer.android.com/guide/topics/ui/actionbar.html 限于篇幅的原因,在上篇文章中我们只学习了ActionBar基础部分的知识,那么本篇文章我们将接着上一章的内容继续学习,探究一下ActionBar