下拉导航栏

最新推荐文章于 2022-03-20 15:07:30 发布
最新推荐文章于 2022-03-20 15:07:30 发布
阅读量347 收藏
点赞数
文章标签： function float border

 

<!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" lang="zh-CN"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>CSS下拉菜单演示</title> 
<style type="text/css"> 
<!-- 
*{margin:0;padding:0;border:0;} 
body { 
font-family: arial, 宋体, serif; 
font-size:12px; 
} 
#nav { 
line-height: 24px; list-style-type: none; background:#666; padding-left:200px;
} 
#nav a { 
display: block; 
width: 80px; 
text-align:center; 
} 
#nav a:link { 
color:#666; text-decoration:none; 
} 
#nav a:visited { 
color:#666;
text-decoration:none; 
} 
#nav a:hover { 
color:#FFF;
text-decoration:none;
font-weight:bold; 
} 
#nav li { 
float: left; width: 80px; background:#CCC; 
} 
#nav li a:hover{ 
background:#999; 
} 
#nav li ul { 
line-height: 27px; 
list-style-type: none;
text-align:left; 
left: -999em; 
width: 500px; //注意,这里一定要设置宽度;
position: absolute; 
} 
#nav li ul li{ 
float: left; 
width: 90px; 
background: #F6F6F6; 
} 
#nav li ul a{ 
wedisplay: block;
width: 90px;
text-align:center;
/*text-align:left;
padding-left:14px;*/ 
} 
#nav li ul a:link { 
color:#666;
text-decoration:none; 
} 
#nav li ul a:visited { 
color:#666;
text-decoration:none; 
} 
#nav li ul a:hover { 
color:#F3F3F3;
text-decoration:none;
font-weight:normal; 
background:#C00; 
} 
#nav li:hover ul { 
left: auto; 
} 
#nav li.sfhover ul { 
left: auto; 
} 
#content { 
clear: left; 
} 
--> 
</style> 
<script type=text/javascript> 
<!--//--><![CDATA[//><!-- 
function menuFix() { 
var sfEls = document.getElementById("nav").getElementsByTagName("li"); 
for (var i=0; i<sfEls.length; i++) { 
sfEls[i].οnmοuseοver=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseDown=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].onMouseUp=function() { 
this.className+=(this.className.length>0? " ": "") + "sfhover"; 
} 
sfEls[i].οnmοuseοut=function() { 
this.className=this.className.replace(new RegExp("( ?|^)sfhover//b"), 
""); 
} 
} 
} 
window.οnlοad=menuFix; 
//--><!]]> 
</script> 
</head> 
<body> 
<ul id="nav">
  <li><a href="">文章</a>
    <ul>
      <li><a href="#">CSS教程</a></li>
      <li><a href="#">DOM教程</a></li>
      <li><a href="#">XML教程</a></li>
      <li><a href="#">Flash教程</a></li>
    </ul>
  </li>
  <li><a href="">参考</a>
    <ul>
      <li><a href="#">XHTML</a></li>
      <li><a href="#">XML</a></li>
      <li><a href="#">CSS</a></li>
    </ul>
  </li>
  <li><a href="">Blog</a>
    <ul>
      <li><a href="#">全部</a></li>
      <li><a href="#">网页技术</a></li>
      <li><a href="#">UI技术</a></li>
      <li><a href="#">Flash技术</a></li>
    </ul>
  </li>
</ul>
</body> 
</html>

sk_wzh
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html左边导航栏点击下拉显示内容,html导航栏-简单运用display设置左拉和下拉导航栏...
weixin_39594191的博客
06-03 1525
运用display的block设置左拉导航栏,设置下拉导航栏。1左拉导航栏index.html第一级d导航hehehhehehheheh第二级导航skdjfldskdjfldskdjfld第三季导航dfasdfdfasdfdfasdfindex.css*{margin: 0;padding:0;}li{list-style: none;}.div1{width: 100px;height: 120...
vue2自定义下拉导航栏与从vue3自定义下拉导航栏
ScumStudy的博客
04-25 2192
` `
使用 CSS 创建下拉导航栏
allway2的博客
02-06 5264
下拉菜单有一个可以通过单击选择的项目列表。我们可以使用 HTML 元素和 CSS 创建一个下拉列表。所以，让我们学习创建一个下拉菜单。 创建下拉列表 可以使用<div>容器和<button>标签来创建下拉菜单以切换下拉菜单。该<a>标签用于在 <div> 中创建链接列表。 使用position:absolute下拉菜单和position:relative下拉内容，以便下拉菜单位于按钮下方。 使用box-shadow属性像卡片一样自定义下拉菜单。 当用
怎么在html5中制作下拉导航栏,在PPT中制作下拉式导航菜单效果的方法
weixin_34829543的博客
06-03 1101
为了提高PPT演示文稿的观赏性，用户可能希望在PPT幻灯片中添加下拉式导航菜单效果，通过该导航菜单在不同幻灯片间进行导航(如图1所示)，制作下拉式导航菜单的具体操作步骤如下。图1 下拉式导航菜单(1)导航菜单需要出现在演示文稿的所有幻灯片中，因此可以在幻灯片母版中进行设置。打开需要添加下拉式导航栏的演示文稿，在“视图”选项卡的“演示文稿视图”选项组中，单击【幻灯片母版】按钮，切换到幻灯片母版视图。...
jQuery实现侧边下拉导航栏
zsl15039718107的博客
12-05 1047
<!Doctype html> <html> <head> <meta charset="utf-8"> <title>下拉导航栏</title> <style> a{ text-decoration:none; } .menu{ margin:100px ...
html优美界面左侧下拉,纯css实现的下拉导航栏附html结构及css样式
weixin_32550525的博客
05-31 328
这里是html文件复制代码代码如下:导航栏AAAAA1A2A3A4A5A6BBBBB1B2B3B4B5B6CCCCC1C2C3C4C5C6DDDDD1D2D3D4D5D6EEEEE1E2E3E4E5E6FFFFF1F2F3F4F5F6GGGGG1G2G3G4G5G6下面是css文件复制代码代码如下:.navigator{/*当然，宽度可以你自己定义*/width: 100%;margin: 0;}...
HTML+CSS/CSS3实现滑动下拉导航栏
热门推荐
Menkongkong的博客
05-19 1万+
HTML+CSS/CSS3实现滑动下拉导航栏 纯css实现的滑动下拉导航栏，超详细代码，以及实现中遇到的小问题 首先创建一个列表以及一些标签的全局样式 html代码 <div class="nav"> <ul> <li><a href="">一级目录</a></li> <li><a href="">一级目录</a
html 下拉导航栏源码,html导航栏下拉菜单怎么制作？这里有详细的代码实例
weixin_31884143的博客
06-07 2411
元素来包裹这些元素，并使用CSS来设置下拉内容的样式。html导航栏菜单的CSS部分：.dropdown类使用position:relative,这将设置下拉菜单的内容放置在下拉按钮(使用position:absolute)的右下角位置。.dropdown-content类中是实际的下拉菜单。默认是隐藏的，在鼠标移动到指定元素后会显示。 注意min-width的值设置为160px。你可以随意修改它...
CSS导航条以及简单下拉菜单实现
loveforlongtime的博客
03-20 1696
css下拉菜单实现
html左侧导航栏点击下拉菜单,CSS中的导航栏和下拉菜单的实现
weixin_36354924的博客
05-30 3078
一、CSS导航栏(1)导航栏的作用熟练使用导航栏，对于网站排版非常重要,使用CSS你可以转换成好看的导航栏而不是枯燥的HTML菜单。(2)垂直导航栏<1>代码如下垂直导航栏主页新闻联系关于垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏垂直导航栏body{margin:0;}ul{padding...
左侧下拉导航栏.html
02-17
左侧竖直下拉菜单，点击能够收缩和展开
纯css实现的下拉导航栏附html结构及css样式
09-25
在网页设计中，下拉导航栏是一个常见的交互元素，它能有效地组织大量链接，提高用户体验。过去，我们通常依赖JavaScript库如jQuery来实现这种效果，但随着CSS技术的发展，现在可以仅使用CSS来创建功能完备的下拉导航...
JQuery三级下拉导航栏
07-20
`jQuery`是一个强大的JavaScript库，常用于简化DOM操作、事件处理和动画效果，因此在实现动态交互的三级下拉导航栏时，jQuery是一个理想的工具。本篇文章将深入探讨如何使用jQuery创建一个功能完善的三级下拉导航栏...
下拉菜单导航栏
07-19
小例子，用来学习导航栏的下拉菜单 html+js
二级下拉导航栏
12-01
在网页设计中，二级下拉导航栏是一种常见的交互元素，用于组织复杂的网站结构，帮助用户更高效地浏览和定位信息。这种导航模式尤其适用于大型网站或含有多个子分类的菜单，因为它可以有效地节省页面空间，同时保持...
【Matlab仿真】资源useless，don‘t download
07-12
【Matlab仿真】资源useless，don‘t download
岗位述职报告PPT模板 (4)
07-12
【作品名称】：岗位述职报告PPT模板 (4) 【适用人群】：适用于希望学习不同技术领域的小白或进阶学习者。可作为毕设项目、课程设计、大作业、工程实训或初期项目立项。
顾客购物数据.CSV（3900条记录）
最新发布
07-12
标题中的“客户购物偏好数据集 CSV（3900条记录）【500010051】”指的是一个包含3900条记录的CSV格式数据集，专门用于研究客户的购物偏好。CSV（Comma Separated Values）是一种常见的数据交换格式，易于处理并能被多种数据分析软件读取，如Excel、Python的pandas库等。这个数据集的编号为500010051，可能是一个特定项目或研究的一部分，便于管理和引用。 描述中提到，“本数据集包含与客户购物偏好相关的各种特征”，这暗示了数据集中可能存在多个列，每个列代表一种特征，例如客户的年龄、性别、购买频率、购买时间、产品类别、消费金额等。这些特征可以用来分析消费者的购买习惯、产品喜好、消费时段选择以及潜在的消费模式。企业可以通过分析这些数据来定制更精准的营销策略，提高客户满意度和销售额。 购物偏好数据集通常包括以下几个关键领域的知识点： 1. **客户基础信息**：如年龄、性别、地理位置、职业等，这些信息有助于理解不同群体的购物习惯。 2. **购买行为**：如购买频率、每次购物的平均消费、购买的产品种类等，可以揭示消费者的购物频次和消费水平
ACM（Association for Computing Machinery）国际大学生程序设计竞赛
07-12
ACM（Association for Computing Machinery）国际大学生程序设计竞赛
html下拉导航栏菜单css
06-10
可以使用以下 CSS 代码来实现基本的下拉导航栏菜单： ```css /* 隐藏下拉菜单 */ .dropdown-menu { display: none; } /* 鼠标悬停时显示下拉菜单 */ .dropdown:hover .dropdown-menu { display: block; } /* ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值