ul li 菜单

最新推荐文章于 2024-07-06 16:47:02 发布
最新推荐文章于 2024-07-06 16:47:02 发布
阅读量83 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/wbydoc/articles/2662947.html
版权

<!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;
}
#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: 180px;
position: absolute;
}
#nav li ul li
{
float: left;
width: 180px;
background: #F6F6F6;
}
#nav li ul a
{
display: block;
width: 156px;
text-align: left;
padding-left: 24px;
}
#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="#">产品一</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><a href="#">服务介绍</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>
</ul>
</li>
<li><a href="#">成功案例</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><a href="#">关于我们</a>
<ul>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四</a></li>
<li><a href="#">我们四111</a></li>
</ul>
</li>
<li><a href="#">在线演示</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><a href="#">联系我们</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>
</ul>
</li>
</ul>
</body>
</html>

转载于:https://www.cnblogs.com/wbydoc/articles/2662947.html

diuqian3543
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html ul li做左侧菜单,用ul、li标签创建css横向导航菜单示例
weixin_30575925的博客
05-30 1779
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)...
ul li 制作导航菜单
qq_41512499的博客
04-01 1383
ul li 制作导航菜单 效果图： 代码段： <%@ Page Language="C#" AutoEventWireup="true" CodeFile="daohang.aspx.cs" Inherits="daohang" %> <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> &...
下拉菜单ul li
qq_45889379的博客
09-22 991
<style> *{ margin: 0; padding: 0; } .box{ width: 700px; overflow: hidden; margin: 20px auto; } .box>ul>li{ float: left; .
html+ul+li菜单样式,一个由ul l构成的漂亮的菜单样式i
weixin_35886717的博客
07-14 1262
本例的最终效果如下： 代码如下：htmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">/**{list-style:none;margin:0;padding:0;font-size:12px;}#navigation{m...
css 多层ul li,css中的ul li ul li ul li ul li 实现四级菜单
weixin_33477335的博客
08-03 675
a{color:Black; /*--a标签的默认颜色为黑色--*/text-decoration:none; /*--隐藏超链接的下划线--*/}a:hover{/**--当鼠标聚焦到a标签的时候文字显示为红色,当鼠标移出a标签的时候又变回原来的颜色--*/color:Red;}#div1 ul{/*--去掉文字前面的小圆点--*/list-style-type:none;}#div1 u...
html ul li多级菜单,通过ul li标签实现二级菜单后添加a标签出现的问题
weixin_42557656的博客
06-21 770
菜单实现后，弹出、悬浮变色什么的都没有问题如图：仅仅给ul的每个li的内容添加a标签后，就是下面的样子的NewsNewZealandAustraliaBritainFrancecss代码：.nav_ul,.nav_ul li{height: 30px;display: inline-block;}.nav_ul li{line-height: 30px;padding-left: 15px;p...
html ul li做左侧菜单,css ul li实现纵向导航菜单效果
weixin_42510026的博客
05-30 807
Document.nav>li {float: left;}.nav{list-style: none;}.drop-down-content{list-style: none;}.nav a{display: block;text-decoration: none;width: 100px;height: 50px;text-align: center;line-height: 50px;...
html css ul 菜单,如何用css中的ul li ul li ul li 实现三级菜单_html/css_WEB-ITnose
weixin_35401836的博客
06-15 553
css多级菜单回复讨论(解决方案)#menu2 ul li:hover ul li ul{ display:none;}加一个这个，否则第二集菜单显示时会连带把第三级 ul 显示出来#menu2 ul li:hover ul li ul{ display:none;}加一个这个，否则第二集菜单显示时会连带把第三级 ul 显示出来感谢Dizzy88的回复，这个问题解决了，但是在IE6下面还是...
【JS常用效果】jquery实现ul li菜单展开收起效果
iteye_15935的博客
03-06 9805
JSCode： //导入jquery库 //程序代码 $(document).ready(function() { $("#mymenu ul li").next("ul").hide(); $("#mymenu ul li").click(function() { $(this).next("ul").tog...
小练习：简单三级菜单的制作（ul li）
qq_43812504的博客
12-02 1882
思路： 列表嵌套列表，给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动，默认初始状态二级和三级菜单都隐藏，鼠标滑过一级菜单列表项li,显示二级标签，划过二级菜单列表项li，显示三级菜单,三级菜单有定位问题，可以相对于二级菜单的li定位（使用“子元素绝对定位，父元素相对定位”），也可以相对于整个二级菜单.box2进行定位。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
css中使用ul li ul li ul li ul li 实现四层级联菜单
12-08
复制代码代码如下: <!DOCTYPE html PUBLIC “-//... <head> <title></title>...style type=”text/css”>... /*–a标签的默认颜色为黑色–*/ text-decoration:none; /*–隐藏超链接的下划线–*/ } a:
jquery实现ul_li菜单展开收起效果
09-06
在网页设计中，导航菜单是不可或缺的部分，而`ul`和`li`元素通常是构建这种菜单的基础。`jQuery`作为一种强大的JavaScript库，提供了简洁的API，使得实现`ul_li`菜单的展开收起效果变得非常简便。这个效果常用于创建...
css控制UL LI 的样式详解(推荐)
09-25
在HTML中，`<ul>` 和 `<li>` 标签是用于创建无序列表的常见元素，通常用于构建导航菜单、展示项目列表等。本文将深入讲解如何使用CSS来控制`<ul>`和`<li>`的样式。 首先，`<ul>`标签用于创建一个无序列表，每个列表...
css ul li导航菜单居中问题解决方法
09-25
不改变html结构，使导航菜单垂直水平居中这个问题应该如何解决呢？本文将详细介绍，需要了解的朋友可以参考下
css引入方式有几种？link和@import有什么区别？
tianxianghuiwei的博客
06-13 475
link>标签和@import规则。<link>这种方式是在HTML文档的<head>部分或者XHTML文档的<head>或<body>部分添加<link>标签，通过href属性指定外部样式表的URL。<link>标签会在页面加载时同时加载并解析外部样式表，从而使得样式可以立即生效。@import@import规则是在CSS文件中使用的一种方式，用于引入外部样式表。它需要写在CSS文件的顶部（除了可能的@charset声明），并且只能引入一次。@import规则相对于<link>
ES6 新特性有哪些
weixin_64684095的博客
07-06 765
1. 拥有块级作用域，这意味着在 if 语句、for 循环、while 循环等代码块中声明的 let 变量，只在该代码块内有效。2. 不允许在同一作用域内重复声明同一个变量1. 也具有块级作用域。2. 声明时必须进行初始化赋值，且赋值后不能再重新赋值修改其值。3. 如果 const 声明的是一个对象或数组，虽然不能重新赋值整个对象或数组，但可以修改对象的属性值或数组的元素值。
【vueUse库Component模块各函数简介及使用方法--上篇】
xiejunlan的博客
07-02 1271
vueUseComponent函数理解 `computedInject` 的概念模拟 `computedInject`使用场景总结构想`createReusableTemplate`的用途可能的实现方式方法一：使用高阶组件（HOC）方法二：使用插槽（Slots）和默认插槽内容结论构想`createTemplatePromise`的用途可能的实现方式使用Vue 3的异步组件构想中的`createTemplatePromise`结论使用Vue的`ref`属性在模板中引用元素或组件示例：引用模板中的DOM元素。
Vue 3集成krpano 全景图展示
最新发布
Mr丶GUO
07-06 192
Vue 3集成krpano 全景图展示，需要借助官方工具进行制作注意事项：vue@cli3没有static，需要放在public目录下。
前端播放RTSP视频流，使用FLV请求RTSP视频流播放（Vue项目，在Vue中使用插件flv.js请求RTSP视频流播放）
weixin_65793170的博客
07-01 993
在浏览器中请求 RTSP 视频流并进行播放时，直接使用原生的浏览器 API 是行不通的，因为它们不支持 RTSP 协议。为了解决这个问题，开发者通常会选择使用像 flv.js 这样的库，它专为在浏览器中播放 FLV 和其他流媒体格式设计。然而，flv.js 本身并不直接支持 RTSP，这意味着我们需要一个额外的步骤来桥接 RTSP 和 flv.js。
css ul li 横向排列
05-28
要让 CSS 中的 ul li 横向排列，你可以使用以下代码： ... ...<ul> <li>菜单1</li> <li>菜单2</li> ...` 将 ul 元素设置为 flex 布局，然后通过设置 li 元素的 margin 和 padding 等样式，来控制菜单项的间距和样式。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值