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的更多相关文章

  1. Css Study - 纵向Menu - By html and Css

    http://www.wikihow.com/Create-a-Dropdown-Menu-in-HTML-and-CSS HTML <div id="leftmenu"&g ...

  2. Css Study - Top Menu in Header 横向间隔的菜单

    .shortcut ul li { display: inline; } CSS <style> ol, ul { list-style: none; } html, body, ul, ...

  3. [转载] ul li css 做横向菜单

    原文地址: http://www.cnblogs.com/amylis_chen/archive/2011/09/24/2188398.html 第一步:建立一个无序列表 我们先建立一个无序列表,来建 ...

  4. 利用css制作横向和纵向时间轴

    Html代码: <div class="container"> <p>原文地址:http://www.cnblogs.com/xiaofeixiang/&l ...

  5. css study

    ---恢复内容开始--- html{filter:expression(document.execCommand("BackgroundImageCache",false,true ...

  6. CSS布局——横向两列布局

    1.固定两栏布局,使用float,注意对紧邻元素清除浮动影响.IE6在使用float布局同时设置横行margin的情况下会有双边距BUG,解决方案是加入_display:inline 代码如下: &l ...

  7. 纯css实现横向下拉菜单

    自己最近在捣腾css代码,不光是js能做很多有趣的东西,这货也可以做很多东西,现在把自己的一些作品分享给大家. 做得有点粗糙,大家根据这个思路来,可以自己修改修改. 关于demo:这是一个横向下拉的菜 ...

  8. css实现横向进度条和竖向进度条

    一.横向进度条 <html> <head> <title>横向进度条</title> <style type="text/css&quo ...

  9. 用CSS实现横向滚动条

    在进行app制作时,需要使用横向滚动条是内容展示更完善 首先,这是html代码: 这是CSS代码: 要点: 设置显示内容的宽 white-space是防止内容自动折行 overflow-y设置为hid ...

随机推荐

  1. ado.net 完整修改删除,攻击防攻击

    完整修改和删除:当你输入了要删除的用户名,先提示有没有此条数据 先查 后删/后改------------ using System; using System.Collections.Generic; ...

  2. mysql主从切换摘要

    1.需要提升为主的从库,停止io线程等待slave数据全部更新完毕 stop slave IO_THREAD #show processlist的输出,直到看到状态是Slave has read al ...

  3. POJ 1195 二维树状数组

    Mobile phones Time Limit: 5000MS   Memory Limit: 65536K Total Submissions: 18489   Accepted: 8558 De ...

  4. spring security使用数据库管理用户权限

    <authentication-provider> <user-service> <user name="admin" password=" ...

  5. 2016HUAS暑假集训训练2 L - Points on Cycle

    题目链接:http://acm.hust.edu.cn/vjudge/contest/121192#problem/L 这是一道很有意思的题,就是给定一个以原点为圆心的圆,然后给定 一个点  求最大三 ...

  6. Unity学习疑问记录之正交与透视

    Unity中相机的投影是2种方式,正交和透视 这是透视方式 正交方式: //计算屏幕宽度 float height = 2.0f * Camera.main.orthographicSize;//正交 ...

  7. Python打包成exe程序

    如何把.py文件打包成.exe可执行程序. 这里选择用PyInstaller 3.0来打包,PyInstaller 3.0下载地址:https://pypi.python.org/pypi/PyIns ...

  8. DropDownList 绑定DataTable并给默认值

    string sql = @"SELECT FG_Id, FG_Name, FG_Sort, FG_IsDel FROM dbo.FirstGestation";          ...

  9. Android中Parcelable接口用法

    from: http://www.cnblogs.com/renqingping/archive/2012/10/25/Parcelable.html Interface for classes wh ...

  10. android_view自定义中的几个方法

    1.onDraw ,改变View绘制的图像 2.onMeasure,改变View的大小 3.onLayout,改变View在父控件的位置