圣诞节后上课就是不在状态，一整天都在神游，还感觉特别累，本来想休息休息的，结果某人看不惯我一直吃东西，非得把电脑给我打开，让整理今天所学的内容，想了一下，确实上午讲的用无序列表<ul>做的下拉列表还不熟练，之前一直都是在用<div>做的，下面是用<ul>做的示例：

<style>

*{

    margin:0px;

    padding:0px;}

.a{

    margin: auto;

    height:50px;

    width:460px;

    position:relative;

    background-color:#396;}

.aa{

    height:50px;

    width:90px;

    float:left;

    text-align:center;

    line-height:50px;

    border:1px solid red;

    cursor:pointer;

    overflow:hidden;} //还可以做延迟的特效：transition要考虑各个浏览器的兼容性

.aa:hover{

    background-color:#909;

    overflow:visible;}

.aa li:hover{

    background-color:#F00;}

</style>

<body>

<div class="a">

    <div class="aa">第一个导航

        <ul style="list-style:none; background-color:#036">

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

        <li>5</li>

        </ul>

    </div>

    <div class="aa">第二个导航</div>

    <div class="aa">第三个导航</div>

    <div class="aa">第四个导航</div>

    <div class="aa">第五个导航</div>

</div>

</body>

我重新做了一遍，发现这种方法比较简单一些，如果单纯用无序列表来做，有点乱，我自己都糊涂了。。。ps:为了清楚一些，边框线没有去掉，以后看的时候不会傻眼，哈哈。。。

css 下拉列表的制作的更多相关文章

  1. 利用css+原生js制作简易钟表

    利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...

  2. css中border制作各种形状

    css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...

  3. 用 CSS Grid 布局制作一个响应式柱状图

    最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...

  4. PHP全栈开发（八）：CSS Ⅹ 导航栏制作

    学习了这么久的CSS,我们现在也可以小试牛刀一下了,我们使用我们学会的CSS知识来制作一个导航栏. 我们都知道,在现代的导航栏里面,最普遍的就是使用无序列表来制作导航栏. 我们可以使用如下代码来制作一 ...

  5. CSS下拉列表错误纠正

    上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...

  6. 神奇的CSS sprites，制作特效的新方法

    本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...

  7. No.3 - CSS transition 和 CSS transform 配合制作动画

    课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...

  8. css用hover制作下拉菜单

    首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...

  9. 用CSS伪元素制作箭头

    现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...

随机推荐

  1. 介绍Unreal Engine 4中的接口(Interface)使用C++和蓝图

    这个教程是从UE4 Wiki上整理而来. 在C++中直接使用Interface大家应该很熟悉.只是简单先定义一个个有虚函数的基类,然后在子类中实现相应的虚函数.像这样的虚函数的基类一般概念上叫接口.那 ...

  2. 集成 Kendo UI for Angular 2 控件

    伴随着 Angular 2 的正式 release,Kendo UI for Angular 2 的第一批控件已经发布了,当前是 Beta 版本,免费使用. 官方站点:Kendo UI for Ang ...

  3. Oracle中将查询出的多条记录的某个字段拼接成一个字符串的方法

    11g里面用listagg: select listagg(name,',') within (order by id) from table 10g里面用wm_concat:select wm_co ...

  4. js判断是否是移动设备登陆网页

    var browser = {            versions: function () {                var u = navigator.userAgent, app = ...

  5. NOIP模拟赛-护花

    [题目描述] 约翰留下他的N(N<=100000)只奶牛上山采木．他离开的时候,她们像往常一样悠闲地在草场里吃草．可是,当他回来的时候,他看到了一幕惨剧:牛们正躲在他的花园里,啃食着他心爱的美丽 ...

  6. vc-complex-type.2.3: Element 'filter-mapping' cannot have character [children], because the type's content type is element-only.

    报这种错一般是因为导入的项目或者黏贴的代码中有中文空格或者中文编码,只需将报错代码重写一遍即可.

  7. mouseover和mouseout、mouseenter和mouseleave

    又一个傻傻分不清楚的东东~ 现实真是一个问题天天有的世界~本以为我对js中的事件还是比较了解的,对于早就接触的mouse事件,更是觉得得心应手了~但是现实却给了我一记重拳! 我自身工作中遇到的犯二的故 ...

  8. Linux文件及目录权限解析

    Linux系统9位基础权限体系 文件权限   * r权限 可读          对文件具有读取及查看文件内容的全新啊   * w权限 可写        对文件具有新增.修改文件内容的权限     ...

  9. PAT - 测试 01-复杂度2 Maximum Subsequence Sum (25分)

    1​​, N2N_2N​2​​, ..., NKN_KN​K​​ }. A continuous subsequence is defined to be { NiN_iN​i​​, Ni+1N_{i ...

  10. WPS for Linux（ubuntu）字体缺失解决办法（转）

    原文:http://www.cnblogs.com/liangml/p/5969404.html 启动WPS for Linux后,出现提示"系统缺失字体" . 出现提示的原因是因 ...