圣诞节后上课就是不在状态，一整天都在神游，还感觉特别累，本来想休息休息的，结果某人看不惯我一直吃东西，非得把电脑给我打开，让整理今天所学的内容，想了一下，确实上午讲的用无序列表<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 下拉列表的制作的更多相关文章
-
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示 实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
-
css中border制作各种形状
css利用border制作各种形状的原理如图: 使用border绘制三角形是什么原理?事实上,宽度相等的border是以45度对接的,如下图: 没有了上border如图所示: 再设置border的宽度 ...
-
用 CSS Grid 布局制作一个响应式柱状图
最新一段时间比较喜欢玩弄图表,出于好奇,我想找出比较好的用 CSS 制作图表的方案.开始学习网上开源图表库,它对我学习新的和不熟悉的前端技术很有帮助,比如这个:CSS Grid. 今天和大家分享我学到 ...
-
CSS下拉列表错误纠正
上一篇关于CSS制作下来列表的错误纠正. 在上一篇中,用CSS只做了下拉列表,但是鼠标不放在导航栏上的时候,下拉列表也是出来的.具体错误就是 div ul{ list-style:none; max- ...
-
神奇的CSS sprites，制作特效的新方法
本文主要内容简译自Dava Shea的英文文章 CSS Sprites: Image Slicing’s Kiss of Death,如果觉得博主讲的含糊不清的话,可以看作者原文. 熟悉了常规切图的我 ...
-
No.3 - CSS transition 和 CSS transform 配合制作动画
课程概述 作业提交截止时间:09-01 任务目的 深度理解掌握 transition-timing-function 以及它的意义 学会配合使用 CSS transform 和CSS transiti ...
-
css用hover制作下拉菜单
首先我们的需求就是 制作一个鼠标移动到某个区域就会有下拉菜单的弹出,这样会有更多的子类内容,示例代码如下: <!DOCTYPE html> <html lang="en&q ...
-
用CSS伪元素制作箭头
现在让我们开始制作箭头吧! 在开始前,你要知道如何用CSS去画一个三角形,如果还不清楚可以看看这里纯CSS画各种图形 我们用到两个CSS伪元素,before和after,它们属于行内元素,但可以用di ...
-
用CSS伪类制作一个不断旋转的八卦图？
前言 介绍一下如何制作一个不断旋转的八卦图.快速预览代码及效果,点击:八卦图 代码如下: HTML部分 <!DOCTYPE html> <html> <head> ...
随机推荐
-
wireshark抓包图解 TCP三次握手/四次挥手详解
http://www.seanyxie.com/wireshark%E6%8A%93%E5%8C%85%E5%9B%BE%E8%A7%A3-tcp%E4%B8%89%E6%AC%A1%E6%8F%A1 ...
-
poj 2010 Moo University - Financial Aid (贪心+线段树)
转载请注明出处,谢谢http://blog.csdn.net/ACM_cxlove?viewmode=contents by---cxlove 骗一下访问量.... 题意大概是:从c个中选出n个 ...
-
NodeMCU之旅（四）：实现Web配置页面
引言 利用Web页面做配置可以轻松适应用户的多种设备,如Android, IOS等.本文将介绍如何在NodeMCU中实现配置页面. 接线图请参考NodeMCU之旅(三):响应配置按钮. 配置页面后端 ...
-
WinForm中，设置不显示窗口的标题栏
1:ControlBox设置False,然后标题为""的时候标题就不显示了2:把窗体设置为无边的窗体 FormBoderStyle 设为 None (在Mdi中,关闭按钮会还在) ...
-
接口中定义变量必须为public static final的原因
在interface里面的变量默认都是public static final 的,原因如下: 1. 接口是一种高度抽象的"模版",,而接口中的属性也就是’模版’的成员,就应当是 ...
-
分布式集群下的Session存储方式窥探
传统的应用服务器,自身实现的session管理是大多是基于单机的,对于大型分布式网站来说,支撑其业务的远远不止一台服务器,而是一个分布式集群,请求在不同的服务器之间跳转.那么,如何保持服务器之前的se ...
-
借助Maven入手Spring Boot第一个程序
目前网上有不少Spring Boot的入门文章,都很有帮助,本人最近在深入学习Spring Cloud,在搭建第一个Hello World程序时,感觉对于新手而言,介绍文章怎么详细都不为过,因为其中坑 ...
-
【转】C#集合类型大盘点
C#集体类型( Collections in C#) 集合是.NET FCL(Framework Class Library)中很重要的一部分,也是我们开发当中最常用到的功能之一,几乎是无处不在.俗话 ...
-
winform 窗体中 Time 控件的用法
作用: 用于背景进程中.通过引发Timer事件,Timer控件可以有规律的隔一段时间执行一次代码.也就是,你可以根据你自己的需要,给Timer控件设置时间,Timer每隔这段时间,就执行一次代码. 属 ...
-
hihocoder 1322 - 树结构判定 - [hiho一下161周][模板题/水题]
题目链接:http://hihocoder.com/problemset/problem/1322 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 给定一个包含 N 个顶 ...