<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<style>
.sub-nav{
    position: relative;
    border-bottom: 1px solid #E3E6EA;
    height:42px;
    font-family:"Microsoft YaHei", simsun;    
}

.sub-nav ul{
    padding:14px 0px 0px 25px;
}
.sub-nav ul li{
    float:left;
    line-height:14px;
    color:#5f727f;
    border-right: 1px solid #dcdde0;
    curson: pointer;
}
ul, ol{
    list-style:outside none none;    
}
.sub-item-in{
    margin-left:0;
}
.sub-nav ul li .sub-item-in{
    padding:0 6px;
    margin: 0 5px;
    position:relative;
    font-size:14px;
}
.sub-nav .trans {
    position: absolute;
    height: 3px;
    background: none repeat scroll 0% 0% #5EB5F1;
    overflow: hidden;
    left: 25px;
    bottom: -1px;
    width: 68px;
    font-size: 0px;
    line-height: 0;
}
.has-trans {
    transition: all 0.3s ease-out 0s;
}
</style>

</head>
<body>
<div class="sub-nav">
    <ul>
        <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d101">Guo Nei</span></li>
        <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d102" data-type="iflight">HongKong</span></li>
        <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d103" data-type="flightCheap">Special Price</span></li>
        <li><span class="sub-item-in" data-spm-click="gostr=/tbtrip;locaid=d104" data-type="iflightCheap">International Special Price</span></li>
    </ul>
     <div style="left: 25px; width: 40px;" class="trans has-trans J_TransBar"></div>
</div>
</body>
</html>

简单的css 菜单的更多相关文章

  1. js+css实现简单下拉菜单

    <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312&qu ...

  2. Pure Css 菜单的使用

    本人新手,之前偶尔接触Bootstrap,也做过一些响应式开发,但是都是略显皮毛,公司的业务需求也限制了深入学习. 现着手Pure Css学习,尝试了简单的左边菜单自动隐藏的demo.闲话少说,代码贴 ...

  3. 纯CSS菜单样式，及其Shadow DOM，Json接口 实现

    先声明,要看懂这篇博客要求你具备少量基础CSS知识, 当然如果你只是要用的话就随便了,不用了解任何知识 完整项目github链接:https://github.com/git-Code-Shelf/M ...

  4. EasyUI+zTree实现简单的树形菜单切换

    使用easyui_ztree实现简单的树形菜单切换效果 <!DOCTYPE html> <html> <head> <meta charset="U ...

  5. jQuery简单的手风琴菜单

    查看效果:http://keleyi.com/keleyi/phtml/menu/5.htm 本菜单的HTML代码和JS代码都简洁,完整源代码: <!DOCTYPE html PUBLIC &q ...

  6. 简单的dialog菜单

    本文介绍的是我自己做的一个简单的dialog菜单,可以直接植入到类中. 方法代码: /** 显示一个靠右上的dialog列表菜单*/private void showTopBarRightButton ...

  7. 简单的CSS圆形缩放动画

    简单的CSS圆形缩放动画 话不多说鼠标移动上去,看效果吧,效果预览 代码如下: <!DOCTYPE html> <html> <head> <title> ...

  8. 最简单的css实现页面宽度自适应

    <div class="rxs"> <div class="rxleft"> 第一段内容,可以是任何html标签 </div> ...

  9. Python简单实现多级菜单

    # -*- coding: utf-8 -*- # @Time : 2018-06-01 13:40 # @Author : 超人 # @Email : huxiaojiu111@gmail.com ...

随机推荐

  1. xcode运行push通知总是提示输入用户名和密码

    xcode运行push通知总是提示输入用户名和密码,目前找到的解决方案是,  打开钥匙串,然后找到push证书下面的私有密钥,双击进入将访问控制设置为允许全部访问,即可.

  2. mongodb3.x用户角色

    用户和角色是多对多的关系,一个用户可以对应多个角色,一个角色可以拥有多个用户.用户角色的不同对应的权限也是不一样的.下面是一些分配给用户的常见的角色. read                    ...

  3. mysql 得到重复的记录

    select devicetoken from client_user group by devicetoken having count(devicetoken)>1

  4. NYOJ_37.回文字符串 (附滚动数组)

    时间限制:3000 ms  |  内存限制:65535 KB 难度:4 描述 所谓回文字符串,就是一个字符串,从左到右读和从右到左读是完全一样的,比如"aba".当然,我们给你的问 ...

  5. Volley学习总结

    本文主要包括以下内容 volly基本操作(String与Json类型) volly图片操作 自定义volly volly源码分析 Volley简单易用,在性能方面也进行了大幅度的调整,它的设计目标就是 ...

  6. CLR via C#（12）-委托Delegate

    本来按照进度应该学习事件了,可总觉得应该委托在前,事件在后,才好理解. 委托是一个类,它提供了回调函数机制,而且是类型安全的.使用委托可以将方法当作另一个方法的参数来进行传递,这种将方法动态地赋给参数 ...

  7. jquery学习笔记----ajax使用

    一.load() 加载页面数据 load(url,[data],[callback]) url:加载的页面地址,[data]传送的数据,[callback]加载完成时回调函数. 设计一个load.ht ...

  8. Redis笔记（七）Java实现Redis消息队列

    这里我使用Redis的发布.订阅功能实现简单的消息队列,基本的命令有publish.subscribe等. 在Jedis中,有对应的java方法,但是只能发布字符串消息.为了传输对象,需要将对象进行序 ...

  9. Linux文件系统（inode、block……）

    内容源于<鸟哥的Linux私房菜> 认识 EXT2 文件系统 文件系统的特殊观察与操作 文件系统 superblock,inode,block superblock,inode,block ...

  10. SQL SERVER 统计信息概述(Statistics)

    前言 查询优化器使用统计信息来创建可提高查询性能的查询计划,对于大多数查询,查询优化器已经为高质量查询计划生成必要的统计信息,但是在少数情况下,您需要创建附加的统计信息或者修改查询设计以得到最佳结果. ...