圣诞节后上课就是不在状态，一整天都在神游，还感觉特别累，本来想休息休息的，结果某人看不惯我一直吃东西，非得把电脑给我打开，让整理今天所学的内容，想了一下，确实上午讲的用无序列表<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. php源码之遍历目录下的所有的文件

    <?php //遍历目录下的所有的文件 -- 递归调用 // http://www.manongjc.com/article/1495.html function get_all_file1($ ...

  2. ubuntu下使用visual studio code来编译和调试C++

    最近想在linux上编译c++代码,自己却一直习惯window上的IDE.以前公司要我写Linux代码的时候,我一般都是用eclipse + CDT,而eclipse这东西吧,我个人感觉因为加载组件太 ...

  3. iOS 趣谈设计模式——通知

    [前言介绍] iOS的一种设计模式,观察者Observer模式(也叫发布/订阅,即Publich/Subscribe模式). 观察者模式,包含了通知机制(notification)和KVO(Key-v ...

  4. nodejs——qureystring的作用

    当node服务器向另一个服务器发送数据时,首先要转换成字符串再post或者get,这个时候就要用到node内置的这个包querystring, querystring.stringify(data);

  5. HTML5 File详解

    input file控件限制上传文件类型 Html5 FileReader 对文件进行Base64编码 FileReader.readAsDataURL

  6. 【SSM 5】Mybatis分页插件的使用

    一.添加maven依赖项 <span style="font-family:KaiTi_GB2312;font-size:18px;"><dependency&g ...

  7. LVS+keepalived负载均衡实战

    1 首先安装虚拟机 安装系统 这里 配置两台虚拟机 1:192.168.137.102   2:192.168.137.103 分别安装tomcat 默认80端口,同时都是开启状态 配置192.168 ...

  8. How secure FB Messenger is?

    It's reported that FB Messenge is the most secure App for instant messaging service. Let's see if FB ...

  9. 41个Web开发者JavaScript实用小技巧

    1. 将彻底屏蔽鼠标右键 oncontextmenu="window.event.returnValue=false" < table border oncontextmen ...

  10. 比较常用的几个maven第三方镜像

    OSC的:<mirror>    <id>CN</id>    <name>OSChina Central</name>           ...