Css Study - 纵向Menu - By html and Css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS
HTML
<div id="leftmenu"> <ul> <li><a href="#">Home</a></li> <li class='has-sub'><a href="#">PRODUCTS</a> <ul> <li class='has-sub'><a href="#">Sub Product1</a> <ul> <li </a> </li> <li </a></li> </ul> </li> <li class='no-sub'><a href="#">Sub Product2</a></li> </ul> </li> </ul> </div>
CSS
<style> /* Starter CSS for Flyout Menu */ #leftmenu { padding: ; margin: ; border: ; } #leftmenu ul, li { list-style: none; margin: ; padding: ; } #leftmenu ul { position: relative; z-index: ; float: left; } #leftmenu ul li { float: left; height: 38px; line-height: 38px; width: 200px; vertical-align: middle; } #leftmenu ul li.hover, #leftmenu ul li:hover { position: relative; z-index: ; cursor: default; } #leftmenu ul ul { visibility: hidden; position: absolute; top: %; left: ; z-index: ; width: %; } #leftmenu ul ul li { float: none; } #leftmenu ul li:hover > ul { visibility: visible; } #leftmenu ul ul { top: ; left: %; } #leftmenu ul li { float: none; } /* Custom Stuff */ #leftmenu { border-radius: 5px; background-clip: padding-box; box-shadow: 2px 1px rgba(, , , 0.15); width: 160px; } #leftmenu span, #leftmenu a { display: inline-block; font-family: Arial, Helvetica, sans-serif; font-size: 12px; text-decoration: none; border-bottom: solid 1px rgba(, , , 0.15); } #leftmenu:after, #leftmenu ul:after { content: ''; display: block; clear: both; } #leftmenu > ul > li ul ul { border-radius: 6px 6px ; background-clip: padding-box; background-color: #ffffff; } #leftmenu ul, #leftmenu li { background-color: #4cb6ea; font-weight: bold; width: %; } #leftmenu li { height: 25px; line-height: 25px; } #leftmenu a { color: #ffffff; line-height: %; padding: 8px 20px 8px 20px; width: 120px; font-size: 16px; } #leftmenu a:hover { color: #; background: #ffffff; } #leftmenu ul ul { width: 160px; border: 1px solid #dddddd; background: #ffffff; } #leftmenu ul ul li { background: #ffffff; } #leftmenu ul ul li a { color: #; } #leftmenu ul ul li a:hover { color: #ff006e; } #leftmenu .has-sub { position: relative; } #leftmenu ul .has-sub a:before { display: block; content: ""; border: 6px solid transparent; border-left-color: #eee; z-index: ; height: ; width: ; position: absolute; right: 12px; top: -2px; } #leftmenu .has-sub:hover a:before { border-left-color: #; } #leftmenu .has-sub:hover ul li a:before { display: none; } #leftmenu .has-sub:hover .has-sub a:before { display: block; } #leftmenu .has-sub:hover .has-sub:hover a:before { border-left-color: #ff006e; } #leftmenu .has-sub:hover .has-sub:hover ul li a:before, #leftmenu .no-sub a:before, #leftmenu .no-sub:hover a:before { display: none; } </style>
Css Study - 纵向Menu - By html and Css的更多相关文章
- Css Study - 横向MENU
http://cssmenumaker.com/menu/tabbed-chrome-and-blue HTML <div id="topMenu"> <ul&g ...
- Css Study - Top Menu in Header 横向间隔的菜单
.shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...
- HTML+CSS+jQuery 纵向导航 && 横向导航 && 消除IE6 BUG && 感悟怎样学习
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content ...
- 纯CSS二级纵向菜单
纯CSS二级纵向菜单 <body> <div class="divda"> <div class="nav"> <ul ...
- CSS+JS下拉菜单和纯CSS下拉菜单
下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...
- DIV+CSS专题:十天学会DIV+CSS
DIV+CSS专题:十天学会DIV+CSS,在网上看到的.感觉蛮好,推荐一下. 十天学会DIV+CSS(WEB标准)CHM格式文件下载 第十天 div+css网页标准布局实例教程(三) 第十天 div ...
- CSS系列:在HTML中引入CSS的方法
HTML与CSS是两个作用不同的语言,它们同时对一个网页产生作用,因此必须将CSS与HTML链接在一起使用.在HTML中,引入CSS的方法主要有4种:行内式.内嵌式.导入式和链接式. 1. 行内式 行 ...
- html学习第二天—— 第九、十章——CSS的继承、层叠和特殊性+CSS格式化排版
继承CSS的某些样式是具有继承性的,那么什么是继承呢?继承是一种规则,它允许样式不仅应用于某个特定html标签元素,而且应用于其后代.比如下面代码:如某种颜色应用于p标签,这个颜色设置不仅应用p标签, ...
- CSS Shake – 摇摆摇摆!动感的 CSS 抖动效果
CSS Shake 是一套 CSS3 动画特效,让页面的 DOM 元素实现各种效果的抖动(Shake),这些效果可以轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,加上 ...
随机推荐
- Debug与Release的区别
Debug版本包括调试信息,所以要比Release版本大很多(可能大数百K至数M).至于是否需要DLL支持,主要看你采用的编译选项.如果是基于ATL的,则Debug和Release版本对DLL的要求差 ...
- Python 3.x下消除print()自动换行
Python 2.x下的print语句在输出字符串之后会默认换行,如果不希望换行,只要在语句最后加一个“,”即可.但是在Python 3.x下,print()变成内置函数,加“,”的老方法就行不通了. ...
- jq制作博客已存在多少天
function current(){ var d=new Date(),str=''; var date=((d.getMonth()+1)*30+(d.getFullYear())*365+d.g ...
- HDU1176
免费馅饼 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others) Total Submi ...
- 使用EXECUTE IMMEDIATE来生成含有绑定变量的SQL
一个SQL,通过SPM固定它的执行计划,可以通过DBMS_SPM.LOAD_PLANS_FROM_CURSOR_CACHE实现.也可以通地此功能在不修改原SQL的情况下对其加HINT来固定执行计划.D ...
- MyEclipse修改项目名称后,部署到tomcat问题
问题描述: 修改项目名称后,部署到tomcat server,部署出来的文件夹名还是旧的名称. 解决方案: 光把项目重命名是不够的,还要修改一下Myeclipse里面的配置. 工程名->右键-& ...
- IOS第16天(1,Quartz2D基本图像绘制)
***************基本图像绘制 画线 #import "HMLineView.h" @implementation HMLineView - (id)initWithF ...
- IOS第八天(6:UITableViewController新浪微博, 模型和 控件位置封装一起statusFrame)
*****HMViewController #import "HMViewController.h" #import "HMStatus.h" #import ...
- EmguCV 阈值化
一.public static double cvThreshold( IntPtr src, IntPtr dst, double threshold, double maxValue, //Max ...
- php一些特殊函数的使用实例详解
<?php /* * PHP Array 函数大全 * * array() 创建数组. 3 array_change_key_case() 返回其键均为大写或小写的数组. 4 array_chu ...