HTML简单的下拉菜单

最新推荐文章于 2024-04-27 17:27:51 发布
最新推荐文章于 2024-04-27 17:27:51 发布
阅读量6.8k 收藏
点赞数
分类专栏： WEB 文章标签： html menu border 测试 function table
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Rifhvk/article/details/234940
版权

<html>
<head>
<title>打造下拉菜单</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style>
body,td { font-size:12px; font-family:宋体}
a:link {  color: #ffffff; text-decoration: none}
a:visited {  color: #ffffff; text-decoration: none}
a:hover {  color: #ff9933; text-decoration: none}
table {  border: #000000; border-style: solid; border-top-width: 1px; border-right-width: 1px; border-bottom-width: 1px; border-left-width: 1px}
</style>
<script language="JavaScript">
<!--
<!--
function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
    document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; οnresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->

function MM_findObj(n, d) { //v4.0
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && document.getElementById) x=document.getElementById(n); return x;
}

function MM_showHideLayers() { //v3.0
  var i,p,v,obj,args=MM_showHideLayers.arguments;
  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];
    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }
    obj.visibility=v; }
}
//-->
</script>
</head>

<body bgcolor="#CCCCCC" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" scroll=auto>
<div id="title" style="position:absolute; left:8px; top:15px; width:240px; height:15px; z-index:1; background-color: #006699; layer-background-color: #006699; border: 1px none #000000">
  <table width="480" cellspacing="0" cellpadding="2">
    <tr>
      <td width="120" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')"><b><font color="#FFFFFF"><a href="#"><img border="0" src="file:///C:/Documents%20and%20Settings/Administrator/桌面/123.gif" width="100" height="20"></a></font></b> </td>
      <td width="120" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')"><b><font color="#FFFFFF"><a href="#"><img border="0" src="file:///C:/Documents%20and%20Settings/Administrator/桌面/123.gif" width="100" height="20"></a></font></b> </td>
      <td width="120" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">&nbsp;</td>
      <td width="120" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">&nbsp;</td>
    </tr>
  </table>
</div>
<div id="menu1" style="position:absolute; left:8px; top:34px; width:120px; height:80px; z-index:2; background-color: #999966; layer-background-color: #999966; border: 1px none #000000; visibility: hidden" onMouseOver="MM_showHideLayers('menu1','','show')" onMouseOut="MM_showHideLayers('menu1','','hide')">
  <table width="100%" cellspacing="0" cellpadding="2" height="80">
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a></td>
    </tr>
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a></td>
    </tr>
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a></td>
    </tr>
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a></td>
    </tr>
  </table>
</div>
<div id="menu2" style="position:absolute; left:127px; top:34px; width:120px; height:80px; z-index:2; background-color: #999966; layer-background-color: #999966; border: 1px none #000000; visibility: hidden" onMouseOver="MM_showHideLayers('menu2','','show')" onMouseOut="MM_showHideLayers('menu2','','hide')">
  <table width="100%" cellspacing="0" cellpadding="2" height="80">
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a>&nbsp;</td>
    </tr>
    <tr>
      <td height="20">&nbsp;<a href="#">测试按钮</a></td>
    </tr>
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;<a href="#">测试按钮</a></td>
    </tr>
  </table>
</div>
</body>
</html>

Rifhvk
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
html下拉菜单怎么做？高手教你如何在HTML和CSS中创建下拉菜单
lin123_00的博客
05-16 5185
html下拉菜单怎么做？html下拉菜单代码是什么？这些对于刚刚入门的新手，还不是很明白，下面高手教你如何在HTML和CSS中创建下拉菜单？ 很多人都会遇到将鼠标悬停在导航上，会出现下拉菜单; 一般出现下拉菜单，用户就可以点击其中一个选项来访问来进入另外一个网址。 打造全网web前端全栈资料库（总目录）看完学的更快，掌握的更加牢固，你值得拥有（持续更新） 一：首先我们打开Notepad ++，如果使用Notepad ++的话，请在HTML窗口顶部的“ 语言”菜单设置成“H”。 二：创建下拉菜单代码，
html导航栏下拉，实现代码
as953的博客
09-14 9660
代码如下（示例）： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> *{padding: 0px;margin: 0px;box-sizing: border-box;} ul,ol{list-style-type: none;} a{text-decora
传智商城下拉菜单html,《HTML+CSS+JavaScript网页制作案例教程》 - 教学大纲 - 图文...
weixin_39842237的博客
06-04 931
博学谷——让IT教学更简单，让IT学习更有效【案例22】违停查询：“违停查询界面”默认效果博学谷——让IT教学更简单，让IT学习更有效鼠标经过第一个“违停坐标”效果[知 识 点]? ? ? ? ? ? ? ? ? ? ?元素的浮动属性float clear属性清除浮动 overflow属性清除浮动 after伪对象清除浮动 overflow属性 元素的定位属性 静态定位 相对定位 绝对定位 固定定...
web-综合 商城下拉菜单的制作
m0_60416689的博客
01-08 3017
第1关：商城下拉菜单颜色样式的制作 任务描述 本关任务： 实现对a标签字体背景颜色的修改，要求颜色型号（#06F）。 选择鼠标指针浮动在a标签上的颜色样式，要求颜色样式（#FF3）。 相关知识 为了完成本关任务，你需要掌握：a标签样式设置 a标签样式设置 a:link {color: blue} /* 未被访问的链接 蓝色 */ a:visited {color: blue} /*已被访问过的链接 蓝色 */ a:hover {color: blue} /*鼠标悬浮在上的链接 蓝色 */ a:a
HTML-表单，下拉菜单,文本域
Kevin7_35Durant的博客
04-27 545
双标签：select嵌套option,select是下拉菜单整体，option是下拉菜单的每一项。作用：收集用户信息，类似登陆界面，调查问卷，搜索区域。占位文本-提示信息,在文本框和密码框没输入时显示。单标签：单选框是圆圈，多选框是方圈。
HTML+CSS实现简单下拉菜单效果
01-19
使用Html+css实现简单的下拉菜单代码非常简单，需要的的朋友参考下吧： 代码： <!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <...
JavaScript简单下拉菜单实例代码
10-23
在这个实例中，我们将探讨如何使用JavaScript和CSS来创建一个简单的下拉菜单，并实现渐显效果。 首先，HTML结构是构建下拉菜单的基础。在这个例子中，我们看到使用了`<div>`元素来组织菜单，其中`<dt>`表示菜单项，...
JavaScript简单下拉菜单特效
10-21
JavaScript简单下拉菜单特效是通过JavaScript编程语言实现的动态交互效果，使得用户在选择一项时，能够自动触发关联的下拉选项，提供更便捷的操作。本文将详细介绍如何使用JavaScript实现这种联动的下拉菜单特效。 ...
jQuery实现简单二级下拉菜单
12-29
html代码 软件开发网</a></dt> 特效</a> 教程</a> 资源</a> 模板</a> 资讯<
前端html+css开发：简单下拉菜单（附源码）
qq_57210034的博客
05-21 1262
效果图： css代码： <style type="text/css"> .downorder { width: 100px; height: auto; position: relative; } .downorder:hover a{ display: block;/*鼠标移入菜单显示a标签内容*/ } .order { position: relative; text-align: center.
HTML下拉框，下拉菜单源码
09-05
这是一个有趣的HTML下拉框，下拉菜单功能，得体大方，方块式呈现下拉功能
JavaScript实现HTML导航栏下拉菜单
01-21
JavaScript实现HTML导航栏下拉菜单[悬浮显示] 前端界面进行设计时，我们会遇到鼠标悬浮在某选项上，然后就会凭空显示出菜单出来，这种设计的确受到了很多人的青睐。其实纯css也是可以实现的，但是会有一些限制，必须如要显示的菜单需要作为鼠标悬浮元素的子元素，选择器优先级等等。废话不多说，直接看效果！ 样式有点丑。 代码实现（JavaScript） 1、获取要悬浮的对象和菜单对象 //获取需要悬浮的对象 let show = document.getElementById(show); //获取被隐藏的菜单 let menu = document.getElementB
css 设置下拉列表 select 样式
03-16
NULL 博文链接：https://jiangpan.iteye.com/blog/419038
HTML+CSS+JavaScript实现下拉菜单效果
apple_54470279的博客
04-17 8404
HTML 方面，导航栏的每个 <li>元素里面包含 <a> 和 <ul> ，将 <li> 设置为相对定位， 将 <ul> 设置为绝对定位，并将 <ul> 的 display 属性设置为 none 。通过 js 给导航栏的每个 <li> 添加事件监听器，当鼠标覆盖 <li> 时，令 <ul> 的display 属性值为 block；当鼠标离开<li> 时，令 <ul> 的display 属性值为 none；
简单的导航下拉菜单
weixin_33815613的博客
10-26 74
&lt;html&gt; &lt;head&gt; &lt;title&gt;打造下拉菜单&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/html; charset=gb2312"&gt; &lt;style&gt; body,td { font-size:12px; font-f
HTML下拉框样式美化
老杨头的博客
02-24 5840
在网页中，下拉框的样式最难美化，默认样式巨丑，好在现在已经有各种框架实现了下拉框的样式美化，主要思路都是通过JS代码将下拉框元素用更容易设置样式的div进行替换，再将对应选项及事件进行关联。最近一项目需要修改很久以前的页面，用户需求又需要美化下拉框样式，又不能引入第三方的框架，只好自己动手写了一个JS插件，实现下拉框的样式美化。
html如何设置下拉列表
不负韶话
05-24 2万+
一.html中的下拉列表介绍 可以用许多方法完成下拉列表的功能。介绍在htlm中下拉列表的实现，html中下拉列表由select和option这两个表单标签一起使用来完成下拉功能的。 代码： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>e易行</title> </head> <body style="text-align
HTML+CSS实现简单下拉菜单
热门推荐
qq_32915337的博客
06-20 2万+
HTML+CSS实现下拉菜单 使用Html+css实现简单的下拉菜单 代码： 下拉框 *{ margin:0px; padding:0px;} #nav{ width:600px; height:40px; margin:0 auto;} #nav ul{ list-style:none;} #nav ul li{ float:left;
h5学习笔记： 下拉菜单
夏天的树人的专栏
08-24 1万+
鼠标经过菜单的时候，下拉菜单形成起来。这个案例中，有一些比较有趣的事情。首先要了解这种菜单设计结构。我们知道ul+li经常组合列表，这种列表既有纵向，也有横向。列表中的li元素，再包一个ul+li的组合元素。这样一个列表下拉菜单结构就变得很清晰了。 <ul> <li>菜单一</li> <li>菜单二 <div class="sub_item">
简单html导航栏下拉菜单
最新发布
05-22
下面是一个简单的 HTML 导航栏下拉菜单的示例： ``` <li><a href="#">首页</a></li> <li><a href="#">产品 <li><a href="#">产品1</a></li> <li><a href="#">产品2</a></li> <li><a href="#">产品3</a></...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值