ul li 菜单

最新推荐文章于 2024-07-26 11:41:15 发布
最新推荐文章于 2024-07-26 11:41:15 发布
阅读量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 1790
创建CSS样式文本导航条的最简单解决方法也许就是把所有的链接都放在一行文本里，这种方法看起来很合理也很直观。但问题在于把所有的链接都放在一行文本里就很难控制链接之间以及前后的空白。所以，为了避免所有的链接都挤在一起，你最后通常都不得不插入一些东西或者非换行的空白字符作为分隔，让这些文字分离开来，不至于混在一起。现在我们正常的做法是应用ul、li标签把链接作为无序列表(unordered list)...
ul li 制作导航菜单
qq_41512499的博客
04-01 1384
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 1012
<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 1265
本例的最终效果如下： 代码如下：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 684
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 774
菜单实现后，弹出、悬浮变色什么的都没有问题如图：仅仅给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 810
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 556
css多级菜单回复讨论(解决方案)#menu2 ul li:hover ul li ul{ display:none;}加一个这个，否则第二集菜单显示时会连带把第三级 ul 显示出来#menu2 ul li:hover ul li ul{ display:none;}加一个这个，否则第二集菜单显示时会连带把第三级 ul 显示出来感谢Dizzy88的回复，这个问题解决了，但是在IE6下面还是...
小练习：简单三级菜单的制作（ul li）
qq_43812504的博客
12-02 1898
思路： 列表嵌套列表，给一级菜单取名box,二级box2,三级box3, 一级菜单列表项li左浮动，默认初始状态二级和三级菜单都隐藏，鼠标滑过一级菜单列表项li,显示二级标签，划过二级菜单列表项li，显示三级菜单,三级菜单有定位问题，可以相对于二级菜单的li定位（使用“子元素绝对定位，父元素相对定位”），也可以相对于整个二级菜单.box2进行定位。 <!DOCTYPE html> <html lang="en"> <head> <meta charset=
【JS常用效果】jquery实现ul li菜单展开收起效果
iteye_15935的博客
03-06 9827
JSCode： //导入jquery库 //程序代码 $(document).ready(function() { $("#mymenu ul li").next("ul").hide(); $("#mymenu ul li").click(function() { $(this).next("ul").tog...
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结构，使导航菜单垂直水平居中这个问题应该如何解决呢？本文将详细介绍，需要了解的朋友可以参考下
web前端基础面试85题（一）
柯晓楠
07-18 1092
1、什么是HTML语义化？<基本上都是围绕着几个主要的标签，像标题（H1~H6）、列表（li）、强调（strong em）等等>根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。2、为什么要语义化？为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
【React 】开发环境搭建详细指南
lph159的博客
07-24 1245
无论你是刚刚开始学习 React，还是希望在现有项目中采用 React 技术，搭建一个高效的开发环境都是至关重要的。本文将详细介绍如何从零开始搭建 React 开发环境，涵盖所需的工具和最佳实践，帮助你快速启动并顺利进行开发。Visual Studio Code（VS Code）是目前最流行的代码编辑器之一，提供了丰富的扩展和强大的功能。如果你希望对项目的配置有更多的控制，可以选择手动配置 React 项目。下载并安装最新版本的 Node.js，安装 Node.js 后，npm 会自动安装。
在Vue程序中，如何检测用户的登录状态并跳转到对应页面
exlink2012的专栏
07-25 395
通过以上步骤，你可以在Vue应用程序中检测用户的登录状态，并在用户尝试访问受保护页面时跳转到登录页面。同时，在用户登录和登出后，你可以根据需要跳转到相应的页面。
VUE中的重点*
qq_61132537的博客
07-22 1091
实际上就是一个闭包，因为vue是单页面应用，是由很多组件构成，每一个组件中都有一个data， 所以通过闭包给每一个组件创建了一个私有的作用域，这样就不会相互影响。
vue el-select的下拉树形结构 带检索功能
最新发布
Jokerxiuka的博客
07-26 194
【代码】vue el-select的下拉树形结构。
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、付费专栏及课程。

余额充值