<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>css float clear 练习， 利用float clear 定位，下拉菜单演示</title>
<style>
*{
margin:0;
padding:0;
}
html,body{
margin:0;
text-align:left;
}
a{text-decoration:none;color:#666;}
.clear_both{
clear:both;
}
.div1{
border:1px #339999 solid;
margin:0 auto;
width:960px;
text-align:right;
}
.div2{
border:1px #339999 solid;
width:100px;
height:30px;
float:left;
}
.div3{
border:1px #339999 solid;
height:30px;
float:left;
width:850px;
}
li{
list-style:none;
}
li ul{display:none;position:absolute;}
li{
float:left;
}
.div3 a {
display:block;width:90px;height:30px;text-align:center; vertical-align:middle;
}
li ul li{clear:both;}
li ul li a:hover{background:#FFF;color:#A33236;}
li ul a{width:130px;border-top:1px solid #FFF;text-align:center;background:#A33236;-webkit-transition:all 0.5s ease;-moz-transition:all 0.5s ease;transition:all 0.5s ease;}
.div4 {
height:400px;
background:url(logo.png) no-repeat;
border:1px solid #FF3300;
margin:0 auto;
}
</style>
<script>
/*-----显示子菜单-----*/
function display(li) {
var subNav = li.getElementsByTagName("ul")[0];
subNav.style.display = "block";
}
/*-----隐藏子菜单-----*/
function hide(li) {
var subNav = li.getElementsByTagName("ul")[0];
subNav.style.display = "none";
}
</script>
</head>
<body>
<div class="div1">
<div class="div2">div2</div>
<div class="div3">
<ul>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">学校概况</a>
<ul>
<li><a href="#"><span>学校简介</span></a></li>
<li><a href="#">学校领导</a></li>
<li><a href="#">机构设置</a></li>
<li><a href="#">院系设置</a></li>
<li><a href="#">创新平台</a></li>
<li><a href="#">师大印象</a></li>
<li><a href="#">校标释义</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">教学科研</a>
<ul>
<li><a href="#">教务处</a></li>
<li><a href="#">教务教学管理系统</a></li>
<li><a href="#">精品课程</a></li>
<li><a href="#">科学技术处</a></li>
<li><a href="#">社会科学处</a></li>
<li><a href="#">实验教学示范中心</a></li>
<li><a href="#">语言文字网</a></li>
<li><a href="#">实习支教专题网</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">招生就业</a>
<ul>
<li><a href="#">研究生招生</a></li>
<li><a href="#">普高招生</a></li>
<li><a href="#">高职本科招生</a></li>
<li><a href="#">成教招生</a></li>
<li><a href="#">就业指导</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">学生工作</a>
<ul>
<li><a href="#">共青团</a></li>
<li><a href="#">学工在线</a></li>
<li><a href="#">学生工作管理系统</a></li>
<li><a href="#">心理教育中心</a></li>
</ul>
</li>
<li onmouseover="display(this)" onmouseout="hide(this)">
<a href="javascript:;">信息服务</a>
<ul>
<li><a href="#">网络中心</a></li>
<li><a href="#">网络自助服务</a></li>
<li><a href="#">邮件系统</a></li>
<li><a href="#">选课系统</a></li>
<li><a href="#">财务信息</a></li>
<li><a href="#">VPN:教师专线</a></li>
<li><a href="#">后勤报修服务</a></li>
<li><a href="#">国内高校信息</a></li>
</ul>
</li>
<li><a href="#">图书资源</a></li>
<li><a href="#">校友工作</a></li>
<li><a href="#">招标信息</a></li>
</ul>
</div>
<p class="clear_both"></p>
</div>
<div class="div4">
</div>
</body>
</html>
分享到：
相关推荐
4. **定位**：下拉菜单通常需要相对于其父元素进行绝对定位（`position:absolute;`）。通过调整`top`和`left`属性，可以控制子菜单相对于父菜单的位置。 5. **过渡和动画**：虽然IE9及以下版本不支持CSS3的过渡和...
1. **定位**：通过`position`属性，我们可以设置下拉菜单相对于其父元素的位置，使其在鼠标悬停时正确显示。 2. **浮动**：可能需要使用`float`属性来确保菜单不会影响到周围的元素布局。 3. **层叠顺序**：`z-index...
纯CSS下拉菜单主要利用CSS的盒模型、定位（positioning）、选择器（selectors）以及过渡（transitions）等特性。下面我们将逐一探讨这些关键知识点： 1. **盒模型**：CSS的盒模型是理解布局的基础，包括content、...
在网页设计中，下拉菜单是一种常见的交互元素，它能够有效地组织和展示多个层次的链接。本篇文章将探讨如何利用HTML的`<ul>`和`<li>`元素以及CSS和JavaScript来创建一个功能完备的下拉菜单。我们将通过分析给定的`...
1. **布局与定位**：CSS用于设置菜单的位置，使其适应宽屏显示器的宽度，通常通过`width`、`float`或`display`属性实现。 2. **样式设计**：包括字体、颜色、背景、边框等，CSS可以创建出各种视觉效果，增强菜单的...
在CSS3库中，这种大型下拉菜单的设计利用了选择器的高级特性，如伪类（`:hover`、`:active`、`:focus`）、过渡（`transition`）和动画（`@keyframes`），以及盒模型、定位（`position`）和浮动（`float`）等基础概念...
此外，压缩包中的"float.htm"可能包含一个浮动式下拉菜单的示例，这种菜单常用于网站导航栏，允许用户在页面滚动时始终保持可见。"logo.gif"、"arrow3.gif"、"arrow4.gif"、"arrow2.png"、"arrow.png"等图像文件可能...
- **纯CSS下拉菜单**：仅使用CSS实现，利用伪类和定位实现菜单的展开和收起。 - **JavaScript增强**：结合JavaScript，可以增加更复杂的交互，如延迟显示、点击关闭等。 8. **示例中的文件名**： - `zip`可能是...
4. **下拉子菜单样式**：通过绝对定位实现了子菜单的下拉效果，并控制其显示状态和样式。 ```css #div ul li ul { position: absolute; z-index: 99; top: 36px; left: 0px; display: none; width: 154px; ...
1. **层叠和定位**：CSS的`position`属性是实现下拉菜单的关键，通常设置为`relative`或`absolute`。`relative`使元素相对于其正常位置定位，而`absolute`则使其相对于最近的非静态定位祖先元素定位。`z-index`属性...
利用CSS的`float`属性可以使元素在容器内浮动，创建多列下拉菜单。但是，这种方法可能会遇到清除浮动的问题，需要额外的CSS来处理。 3. **Flexbox下拉菜单**： Flexbox（弹性盒模型）是现代CSS布局的一种方式，它...
浮动（`float`）和相对/绝对定位（`position`）属性是创建下拉效果的关键。 3. **JavaScript 事件**：JavaScript 通常使用 `addEventListener` 或 `attachEvent` 方法监听用户的鼠标事件，如 `mouseover` 和 `mouse...
我对css几个主要属性的理解，inline,block,float,clear
CSS中使用了`display: inline`和`float: left`来使菜单项水平排列，而`position: absolute`则用于实现下拉菜单的垂直定位。 关键的CSS选择器如`ul#navmenu li:hover ul`和`ul#navmenu li.iehover ul`用于在鼠标悬停...
为了实现多级下拉菜单，我们需要对这个基础进行扩展，引入jQuery库以利用其强大的事件处理和DOM操作功能。 1. **集成jQuery**: 在HTML文件中，确保引入了jQuery库，通常在`<head>`标签内添加以下代码： ```html ...
本教程将深入探讨如何利用jQuery这一强大的JavaScript库，创建功能丰富的图文下拉菜单。jQuery的简洁语法和丰富的插件使得实现这样的效果变得相对容易。 首先，我们需要理解jQuery的基本概念。jQuery是一个轻量级的...
### CSS的下拉菜单，支持IE6 IE7 Firefox #### 概述 本文将详细介绍一个兼容Internet Explorer 6（IE6）、Internet Explorer 7（IE7）以及Firefox浏览器的纯CSS下拉菜单实现方法。该下拉菜单不仅具有良好的跨浏览器...
float:left; } a:link{ color:#336601; text-decoration:none; float:left; width:100px; padding:3px 5px 0px 5px; } a:visited{ color:#336601; text-decoration:none; float:left; padding:3px 5px 0px...
总结来说，纯CSS下拉菜单和右拉菜单的实现主要依赖于CSS的布局和动态效果特性，如浮动、定位和`:hover`状态。理解这些基础概念，开发者就能够创建出功能齐全且易于维护的网页导航菜单。在实践中不断调整和优化，可以...
这些CSS规则定义了下拉菜单的基本样式，包括去除默认的边距、填充以及设置相对定位等，使得菜单在显示时更加整洁美观。 #### 四、总结 通过上述步骤，您可以成功地在Joomla!1.5的rhuk_milkyway模板中添加下拉菜单...