CSS网页菜单
<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs"
Inherits="WebUserControl" %>
<!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>昆明**家政服务公司</title>
<style type="text/css">
*
{
border-style: none;
border-color: inherit;
border-width: ;
margin: ;
padding: ;
height: 51px;
}
body
{
font-family: arial, 宋体, serif;
font-size: 12px;
}
#nav
{
line-height: 24px;
list-style-type: none;
background: #;
}
#nav a
{
display: block;
width: 80px;
text-align: center;
}
#nav a:link
{
color: #;
text-decoration: none;
}
#nav a:visited
{
color: #;
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: #;
}
#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
{
wedisplay: block;
width: 156px;
text-align: left;
padding-left: 24px;
}
#nav li ul a:link
{
color: #;
text-decoration: none;
}
#nav li ul a:visited
{
color: #;
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;
}
#topinfo li{float:right;list-style-type:none;
}
#topinfo li a{text-decoration:none;
display:block;padding:5px; } </style>
<script type="text/javascript">
<!-- //--><![CDATA[//><!--
function menuFix() {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i = ; i < sfEls.length; i++) {
sfEls[i].onmouseover = function () {
this.className += (this.className.length > ? " " : "") + "sfhover";
}
sfEls[i].onMouseDown = function () {
this.className += (this.className.length > ? " " : "") + "sfhover";
}
sfEls[i].onMouseUp = function () {
this.className += (this.className.length > ? " " : "") + "sfhover";
}
sfEls[i].onmouseout = function () {
this.className = this.className.replace(new RegExp("( ?|^)sfhover\\b"),
"");
}
}
}
window.onload = menuFix;
//--><!]]>
</script>
</head>
<body>
<table width="100%" >
<tr><td width="85%" class="style1"><h1 align="center">昆明**家政服务公司</h1></td>
<td class="style1"><ul id="topinfo" ><li><a href="#">联系我们</a></li><li><a href="#">加入收藏</a></li><li><a href="#">设为首页</a></li></ul></td></tr>
<tr>
<td>
<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>
</td>
</tr>
</table>
</body>
</html>
CSS网页菜单的更多相关文章
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
- 11款样式新颖的 jQuery/CSS3 网页菜单
今天为大家准备了11款样式风格挺不错的jQuery/CSS3网页菜单,主要包括面包屑菜单.下拉菜单.Tab菜单等,喜欢的朋友赶紧收藏,一起来看看这些菜单. 1.jQuery / CSS3多功能下拉菜单 ...
- Adobe Edge Animate –使用css制作菜单
Adobe Edge Animate –使用css制作菜单 版权声明: 本文版权属于 北京联友天下科技发展有限公司. 转载的时候请注明版权和原文地址. 效果图:
- 强烈推荐一款CSS导航菜单
强烈推荐一款CSS导航菜单,用到政府学校类网站上超级不错,有点类似站长网菜单的味道,只不过颜色不一样而已,这种菜单还不是真正意义上的“下拉”菜单,应该叫滑出菜单吧?反正比较不错,不多说了. <! ...
- div+css网页标准布局实例教程（一）
今天学习<十天学会web标准(div+css)>的最后一个章节,本章节把前面学习的零碎内容串联起来,组织成一个网站,将根据本人这些年来的从业经验,从建立站点到一个完整的div+css网页的 ...
- 43个实例xHTML+CSS(DIV+CSS)网页及导航布局
在中国,很多前端开发初学者都会把xHTML+CSS页面制作说成DIV+CSS,甚至很多人都还不知道xHTML+CSS是什么意思,只知道盲目的追求DIV+CSS,但在国外,是没有DIV+CSS这个概念的 ...
- css三级菜单效果
一个简单实用的css三级菜单效果 <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS网页布局全精通
在本文中将使用四种常见的做法,结合CSS于结构化标记语法制作两栏布局.很快地就会发现,不用嵌套表格,间隔用的GIF也能做出分栏版面布局. 相关文章:CSS网页布局开发小技巧24则 稍后在"技 ...
- HTML5 div+css导航菜单
HTML5 div+css导航菜单 视频 音乐 小说 故事 作品 阅读 联系
随机推荐
- Mysql插入中文的字段内容时乱码的解决方法
Mysql插入中文的字段内容时乱码的解决方法 1.我们在往数据库插入数据的时候,当遇到中文字符的插入时会发现插入的数据会变为?号,也就是乱码,如下所示: 2.这时候我们使用如下的查询语句可以看到相应的 ...
- Eclipse创建web项目目录结构
效果图如下: 0 新建Web项目 1.右击项目MyProject进入Java Build Path 2. 点击Add Folder按钮,进入如下界面 3.选择src,点击Add New Folder按 ...
- Javascript和JQuery函数定义方式
Javascript 函数定义方式 1.function show() { } 2.var cal = function() { },必须先声明才能调用 示例: <html> ...
- CentOS 7 个性化配置指南
博客原文地址:CentOS 7 个性化配置指南 - Wind Spirit 0x00 前言 该教程主要安装了如下软件包 iptables MySQL PHP PHP 相关模块 Nginx 主要配置实现 ...
- 大牛是怎么思考设计MySQL优化方案
在进行MySQL的优化之前,必须要了解的就是MySQL的查询过程,很多查询优化工作实际上就是遵循一些原则,让MySQL的优化器能够按照预想的合理方式运行而已. 1.优化的哲学 注:优化有风险,涉足需谨 ...
- Vue.js的复用组件开发流程
本文由蔡述雄发表 接下来我们会详细分析下如何完成由多个组件组成一个复用组件的开发流程. 下面先看看我们的需求 列表组件quiList.vue 本节我们主要要完成这样一个列表功能,每一行的列表是一个组件 ...
- Vxlan学习笔记——原理
1. 为什么需要Vxlan 普通的VLAN数量只有4096个,无法满足大规模云计算IDC的需求,而IDC为何需求那么多VLAN呢,因为目前大部分IDC内部结构主要分为两种L2,L3.L2结构里面,所有 ...
- laravel C层接收数据的步骤
use Illuminate\Http\Request; function fun(Request $request){ //获取修改的数据 $arr = $request->all(); // ...
- C++ QT中自定义控件的简单创建
为了给控件添加自定义的方法以及重绘控件,我们需要自定义控件来达到自己希望的结果,网上的自定义控件文章比较少,并且过程比较粗略. 此教程以中文版的QT Creator进行介绍 首先我们创建一个新的项目, ...
- ASP.NET Core配置环境变量和启动设置
在这一部分内容中,我们来讨论ASP.NET Core中的一个新功能:环境变量和启动设置,它将开发过程中的调试和测试变的更加简单.我们只需要简单的修改配置文件,就可以实现开发.预演.生产环境的切换. A ...