Css Study - 横向MENU
http://cssmenumaker.com/menu/tabbed-chrome-and-blue
HTML
<div id="topMenu"> <ul> <li><a href="#">Home</a></li> <li><a href="#">PRODUCTS</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Messages</a></li> <li><a href="#">Lists</a></li> <li><a href="#">Admin</a></li> </ul> </div>
CSS
<style> #topMenu { height: 30px; width: %; border-bottom: solid 2px #4cb6ea; text-align: right; } #topMenu ul { position: absolute; right: 30px; height: 30px; line-height: 30px; } #topMenu a { font-size: 16px; font-weight: bold; padding: 5px 15px 8px 15px; border-top: solid 2px #4cb6ea; border-left: solid 2px #4cb6ea; border-right: solid 2px #4cb6ea; border-top-left-radius: 5px; border-top-right-radius: 5px; background-color: #4cb6ea; color: #fff; } #topMenu a:hover { color: #; text-decoration: none; background-color: #fff; } </style>
dropdown menu
HTML
<div id="top_banner"> <div id="nav"> <ul> <li><a href="#" class="has_sub">My System</a> <ul> <li><a href="#">Change Password</a></li> <li><a href="#">My Profile</a></li> </ul> </li> <li><a href=</a></li> <li><a href=</a></li> <li><a href=</a></li> </ul> </div> </div>
CSS
<style> #top_banner { background-color: #F7F7F7; width: %; padding: 0px; margin: 0px; height: 35px; } #nav { position: absolute; right: 10px; margin: 0px; padding: 0px; } #nav ul ul { display: none; } #nav ul li:hover > ul { display: block; } #nav ul { background: #F7F7F7; padding: 20px; list-style: none; position: relative; display: inline-table; margin: 0px; } #nav ul:after { content: ""; clear: both; display: block; } #nav ul li { float: left; } #nav ul li:hover { background: #b8b5b5; } #nav ul li:hover a { color: #fff; } #nav ul li a { display: block; padding: 8px 20px 9px 20px; color: #; text-decoration: none; } #nav ul li a.has_sub { background: url("icon_arrow_bottom.png") no-repeat right center; background-position-x: 98px; } #nav ul ul { background: #b8b5b5; padding: ; position: absolute; top: %; } #nav ul ul li { float: none; border-top: 1px solid #ccc; position: relative; text-align: left; } #nav ul ul li a { padding: 8px 20px 9px 20px; color: #fff; } #nav ul ul li a:hover { background: #9f9b9b; } #nav ul ul ul { position: absolute; left: %; top: ; } </style>
Css Study - 横向MENU的更多相关文章
- Css Study - 纵向Menu - By html and Css
http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...
- Css Study - Top Menu in Header 横向间隔的菜单
.shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...
- [转载] ul li css 做横向菜单
原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...
- 利用css制作横向和纵向时间轴
Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...
- css study
---恢复内容开始--- html{filter:expression(document.execCommand("BackgroundImageCache",false,true ...
- CSS布局——横向两列布局
1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...
- 纯css实现横向下拉菜单
自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...
- css实现横向进度条和竖向进度条
一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...
- 用CSS实现横向滚动条
在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...
随机推荐
- ado.net 完整修改删除,攻击防攻击
完整修改和删除:当你输入了要删除的用户名,先提示有没有此条数据 先查 后删/后改------------ using System; using System.Collections.Generic; ...
- mysql主从切换摘要
1.需要提升为主的从库,停止io线程等待slave数据全部更新完毕 stop slave IO_THREAD #show processlist的输出,直到看到状态是Slave has read al ...
- POJ 1195 二维树状数组
Mobile phones Time Limit: 5000MS Memory Limit: 65536K Total Submissions: 18489 Accepted: 8558 De ...
- spring security使用数据库管理用户权限
<authentication-provider> <user-service> <user name="admin" password=" ...
- 2016HUAS暑假集训训练2 L - Points on Cycle
题目链接:http://acm.hust.edu.cn/vjudge/contest/121192#problem/L 这是一道很有意思的题,就是给定一个以原点为圆心的圆,然后给定 一个点 求最大三 ...
- Unity学习疑问记录之正交与透视
Unity中相机的投影是2种方式,正交和透视 这是透视方式 正交方式: //计算屏幕宽度 float height = 2.0f * Camera.main.orthographicSize;//正交 ...
- Python打包成exe程序
如何把.py文件打包成.exe可执行程序. 这里选择用PyInstaller 3.0来打包,PyInstaller 3.0下载地址:https://pypi.python.org/pypi/PyIns ...
- DropDownList 绑定DataTable并给默认值
string sql = @"SELECT FG_Id, FG_Name, FG_Sort, FG_IsDel FROM dbo.FirstGestation"; ...
- Android中Parcelable接口用法
from: http://www.cnblogs.com/renqingping/archive/2012/10/25/Parcelable.html Interface for classes wh ...
- android_view自定义中的几个方法
1.onDraw ,改变View绘制的图像 2.onMeasure,改变View的大小 3.onLayout,改变View在父控件的位置