<style type="text/css">

*{margin:0px;padding:0px;}设置所有标签属性《初始化页面属性》

#nav{background-color:#eee;width:600px;height:40px;margin:0 auto;}

ui{list-style:none;} 去掉ul的默认样式

ui li{

float:left;左浮动

line-height:40px;垂直居中

text-align:center;水平居中

position:relative;//相对定位

}

a标签是行内元素

a{

text-decoration:none;取消下划线

color:#000;

display:block;变成块元素

width:90px；

padding:0  10px;自动适应

}

a:hover{

color:#fff;

background-color:#666;

}

ul li ul li{

float:none;//去掉浮动

border-left:none;

margin-top:2px;

background-color#eee;

}

ui li ul{

width:90px;

position:absolute;//绝对定位要配合top letf使用以浏览器来定位

left:0px;top:40px;

display:none;//隐藏

}

ul li :hover ul{display:block;//显示

}

</style>

<div id="nav">

<ul>

<li>首页</li>

<li>课程大厅

<ul>

<li>二级菜单</li>

</ul>

</li>

<li>学习中心</li>

<li>经典案例</li>

</ul>

<div>

<!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=utf-8" />
<title>无标题文档</title>
<style type="text/css">
*{ margin:0px; padding:0px;}
 #menu{ background-color:#eee; width:600px; height:40px; margin:0 auto;}
 ul{ list-style:none;}
 ul li{ line-height:40px; text-align:center; position:relative; float:left; }
 a{ text-decoration:none; color:#000; display:block; width:90px;}
 a:hover{ color:#FFF; background-color:#666;}
 ul li ul li{ float:none;margin-top:2px; background-color:#eee; }
 ul li ul{width:90px; position:absolute;  display:none;  }
ul li:hover ul{ display:block;}
</style>
</head>

<body>
<div id="menu">
<ul>
  <li><a href="#">首页</a></li>
  <li><a href="#">课程大厅</a>
    
     <ul>
      <li><a href="#">视频学习</a></li>
      <li><a href="#">案例学习</a></li>
      <li><a href="#">交流平台</a></li>
    </ul>
    
    
  </li>
  <li><a href="#">学习中心</a>
    <ul>
      <li><a href="#">视频学习</a></li>
      <li><a href="#">案例学习</a></li>
      <li><a href="#">交流平台</a></li>
    </ul>
  </li>
  <li><a href="#">经典案例</a></li>
  <li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>

Css下拉菜单设置的更多相关文章

  1. CSS+JS下拉菜单和纯CSS下拉菜单

    下拉菜单 (思路:先把二级定位到屏幕外,鼠标悬停重新定位回来:另一个就是ul浮动,li也浮动) 下拉菜单的一般思路就是把子导航嵌套在无序列表中,把列表定位到屏幕之外,当鼠标悬停在其父列表项上时,重新定 ...

  2. CSS：CSS 下拉菜单

    ylbtech-CSS:CSS 下拉菜单 1.返回顶部 1. CSS 下拉菜单 使用 CSS 创建一个鼠标移动上去后显示下拉菜单的效果. 下拉菜单实例 实例演示 1 实例演示 2 基本下拉菜单 当鼠标 ...

  3. 超简洁的CSS下拉菜单

    效果体验:http://hovertree.com/texiao/css/3.htm HTML文件代码: <!DOCTYPE html> <html xmlns="http ...

  4. 支持多种浏览器的纯css下拉菜单

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. 华丽导航CSS下拉菜单特效

    华丽导航CSS下拉菜单特效,华丽导航,导航特效,CSS,下拉菜单,华丽特效. 代码地址:http://www.huiyi8.com/sc/26811.html 风景图片网:http://www.hui ...

  6. 纯css下拉菜单的制作

    通过观察下拉菜单的过程,发现有两种状态,一种是鼠标没有hover时,一种是鼠标hover时. 主菜单hover时,显示子菜单:主菜单没有hover时,不显示子菜单 <!DOCTYPE html& ...

  7. 【BIEE】BI Publisher下拉菜单设置

    在使用BIEE的过程中,通常会有需要根据下拉菜单所选内容进行数据展示,如下图所示: 设置参数 进入数据模型编辑界面→参数 新增参数,P_DATADATE为示例参数 参数赋值 同时点击"值列表 ...

  8. 简易的CSS下拉菜单 - 1

    <!DOCTYPE html> <html> <head> <style> body{ margin:0; } .dropmenu{ backgroun ...

  9. [CSS]下拉菜单

    原理:先让下拉菜单隐藏,鼠标移到的时候在显示出来 1>display 无动画效果,图片是秒出 2>opacity 有动画效果,我这里是1S出现,推荐配合绝对定位使用

随机推荐

  1. .NET Core Tools for Visual Studio 2015 安装失败

    You may be blocked from installing the .NET Core Tooling Preview 2 for Visual Studio 2015 installer ...

  2. Windows server 2008 R2实现多用户远程连接 (转)

    经常使用远程桌面的朋友可能会注意到,Windows server 2008 R2中,远程桌面最多只允许两个人远程连接,第三个人就无法连接过去,但是生产环境中有一些服务器可能有许多人需要连接上去,而微软 ...

  3. 20155228 2016-2017-2 《Java程序设计》第2周学习总结

    20155228 2006-2007-2 <Java程序设计>第2周学习总结 教材学习内容总结 类型 Java可以区分为基本类型和类类型(或称参考类型).对于基本类型,使用时得考虑一下数据 ...

  4. 【Hadoop学习之五】win7+Eclipse+hadoop3搭建本机开发环境

    环境 虚拟机:VMware 10 Linux版本:CentOS-6.5-x86_64 客户端:Xshell4 FTP:Xftp4 jdk8 hadoop-3.1.1 拓扑: 知识准备: 1.eclip ...

  5. Java 内存分配

    静态储存区:全局变量,static 内存在编译的时候就已经分配好了,并且这块内存在程序运行期间都存在. 栈储存区:1,局部变量.2,,保存类的实例,即堆区对象的引用.也可以用来保存加载方法时的帧.函数 ...

  6. impala与hive的比较以及impala的有缺点

    最近读的几篇关于impala的文章,这篇良心不错:https://www.biaodianfu.com/impala.html(本文截取部分内容) Impala是Cloudera公司主导开发的新型查询 ...

  7. 证券化代币的时代已经到来，STO将引爆区块链经济

    STOs 似乎会在 2019 年取代 ICOs,即使不是完全取代,但置换的比例也会相当大.所有在美上市的公司都将按照 SEC 制定的相关规定进行交易.Vellum Capital 的 CEO 兼管理合 ...

  8. C++中set用法详解

    1.关于set C++ STL 之所以得到广泛的赞誉,也被很多人使用,不只是提供了像vector, string, list等方便的容器,更重要的是STL封装了许多复杂的数据结构算法和大量常用数据结构 ...

  9. 前端框架VUE----node.js的简单介绍

    一.什么是node.js? 它是可以运行JavaScript的服务平台,可以吧它当做一门后端程序,只是它的开发语言是JavaScript 二.安装 1.node.js的特性: - 非阻塞IO模型 - ...

  10. Qt Dll总结（二）——创建及使用Qt的Dll（转载）

    先讲一下对QT动态链接库的调用方法,主要包括: 1.显式链接DLL,调用DLL的全局函数,采用Qt的QLibrary方法 2.显示链接DLL,调用DLL中类对象.成员函数.(通过对象即可实现类成员函数 ...