纯css打造绿色横向二级导航菜单代码

最新推荐文章于 2021-05-30 22:56:50 发布
最新推荐文章于 2021-05-30 22:56:50 发布
阅读量3.5k 收藏 2
点赞数
文章标签： css class dropdown 电子商务 div stylesheet

纯css打造绿色横向二级导航菜单代码

演示图:

详细代码:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纯css打造绿色横向二级导航菜单代码--免费模板</title>
<link rel="stylesheet" href="http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/css/base.css" type="text/css" media="screen" />
<!--[if IE 6]>
<style>
body {behavior: url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/csshover3.htc");}
#menu li .drop {background:url("http://cssdh.mianfeimoban.com/uploadfile/2012/0311/menu1/images/arrow.gif") no-repeat right 14px;
</style>
<![endif]-->

</head>

<body>

<div id="menu">

<ul>
<li><a href="#"  class="nodrop">首　页</a></li>
    
<li><a href="#" class="drop">免费模板</a>    
        <div class="dropdown_1column">        
                <div class="col_1">                
                    <ul class="simple">
                        <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>                        
                </div>                
        </div>        
    </li>

<li><a href="#" class="drop">网站建设</a>    
        <div class="dropdown_1column">        
                <div class="col_1">                
                    <ul class="simple">
                        <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>                        
                </div>                
        </div>        
  </li>

   <li><a href="#" class="drop">网络营销</a>    
        <div class="dropdown_1column">        
                <div class="col_1">                
                    <ul class="simple">
                        <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>                        
                </div>                
        </div>        
  </li>

    <li><a href="#" class="drop">网络营销</a>    
        <div class="dropdown_1column">        
                <div class="col_1">                
                    <ul class="simple">
                       <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>                        
                </div>               
        </div>        
    </li>
    
　　　<li><a href="#"  class="nodrop">关于我们</a></li>

　　　<li><a href="#"  class="nodrop">联系我们</a></li>
    
</ul>

</div>

</body>

</html>

原文地址:http://cssdh.mianfeimoban.com/cssdaohangtiao/20120311138.html


lose_ever
关注
横向二级导航菜单(html+css+js)
LindenTao
05-16 1万+
/*基本信息*/ body { margin: 0; padding: 0; background: #FFFFFF; } /*导航*/ #navigation { font: 12px bolder "Lucida Grande" ,​Helvetica,​Arial,​Verdana,​sans-serif; /* 设置文字大小和字体样式 */ heig
html横向导航二级菜单代码,横向二级导航菜单
weixin_39734646的博客
06-07 1761
无标题文档var num=5;function getObj(objName){return(document.getElementById(objName));}function tag(id){getObj("searconrow2").innerHTML=getObj("produce"+id).innerHTML;for(var i=1;i<=num;i++){if(i==id) {...
css横向下拉二级导航菜单
04-10
这个效果还不错,主要是用于做导航条使用。。可以参考
横向二级导航菜单css
02-25
横向二级导航的基于css菜单，可以把最后的float改成none,形成二级横向的菜单。
html二级菜单纵向,纯CSS制作二级导航菜单(纵向)，不用JS/jquery，响应速度快
weixin_30569303的博客
05-30 1327
制作二级导航菜单(纵向)#menu{width: 200px;border: 1px solid #999;}#menu ul{margin: 0px;padding: 0px;list-style: none;/* 隐藏默认列表符号*/}#menu ul li{background: #06C;height: 35px;line-height: 35px; /*行距*/text-align: ...
js鼠标滑过显示横向二级导航菜单代码
11-20
在本示例中，我们将探讨如何使用JavaScript实现这种“鼠标滑过显示横向二级导航菜单”的功能。 首先，我们需要创建HTML结构来定义一级和二级导航菜单。一级菜单通常包含几个链接，每个链接下面都有一个对应的二级...
js实现横向伸展开的二级导航菜单代码
10-23
本文将介绍如何使用JavaScript实现一个横向伸展开的二级导航菜单，涉及的核心技术包括HTML结构设计、CSS样式布局以及JavaScript事件处理。首先，我们来看一下菜单的基本结构。 HTML部分是构建导航菜单的基础，它...
仿CmsEasy网站横向二级JS+CSS导航菜单
06-06
"仿CmsEasy网站横向二级JS+CSS导航菜单"是一种常见的网页元素，它模仿了CmsEasy系统的导航风格，提供了美观且实用的下拉菜单功能。这种菜单特别适合于有多个层级分类的大型网站，因为它可以有效地组织大量链接，同时...
漂亮的CSS二级竖向导航菜单
06-06
本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
11-24
在本文中，我们将探讨如何使用jQuery和CSS技术创建一个炫丽的横向二级下拉菜单，同时提供源码供下载。这个菜单设计适用于网站导航，它不仅具有良好的视觉效果，还能帮助用户更方便地访问二级子菜单中的内容。 首先...
绿色极简的CSS导航条 菜单代码分享.rar
07-10
绿色极简的CSS导航条 菜单代码分享，支持鼠标动作，鼠标放在菜单上，菜单背景色改变，深绿色与淡绿色相结合的清新菜单风格，纯CSS代码实现，用了一些图片来修饰菜单背景，这款菜单的样式比较经典，可通用于多种类型的网站页面中。
纯css制作的简单的二级横向导航条
08-12
用纯div+css布局，来制作的一个比较简单实用的下拉横向的导航条
横向二级导航菜单
09-26
js导航菜单制作一个蓝色横向二级导航菜单，鼠标滑过slide滑动动画效果显示二级导航菜单。内含js代码下载。兼容IE6-8,firefox等主流浏览器
JS横向二级导航菜单
12-09
JS横向二级导航菜单 CSS样式控制<UL样式
很好看的二级横向导航菜单
05-15
很好的二级横向导航菜单，你开发过程中导航菜单的首选
精致纯CSS打造绿色漂亮导航栏
weixin_34130389的博客
02-22 646
代码简介： 极精致的纯CSS实现的菜单，兼容性非常好，条例WEB标准，能用性好，用到有修饰图片，请根据代码地址自己下载。 代码内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xm...
二级导航菜单（横向）
abc1498880402的博客
12-07 8519
&lt;%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%&gt; &lt;html&gt; &lt;head&gt; &lt;meta http-equiv="Content-Type" content="text/html; chars
CSS绿色导航代码
weixin_33868027的博客
04-16 1496
代码简介： 很漂亮、代码很简洁的CSS导航条，鼠标放上更换菜单背景颜色，简单才是应道理，希望你们喜欢。 代码内容： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <...
十天学会Div+CSS第四天之【纵向导航与二级菜单】
weixin_34138056的博客
08-07 242
一、纵向列表纵向列表或称为纵向导航，在网站的产品列表中应用比较广泛，如淘宝网左侧的淘宝服务，今天我们就学习一下纵向导航的制作先新建一个页面，然后插入一个ID为menu的div，然后在设计视图中选中文字，点击工具栏的ul图标，即会自动插入ul和li，然后修改文字内容为你需要的内容。 &lt;div id="menu"&gt; &lt;ul&gt; &lt;li&gt;首页&lt;/li&g...
css导航栏横向二级菜单onmouseover
最新发布
10-26
CSS导航栏横向二级菜单onmouseover是一种常见的网页导航栏设计方式。它通过CSS的定位属性和JavaScript的事件监听实现了鼠标悬停在主菜单上时，显示对应的二级菜单的效果。具体实现方法如下： 1. 使用CSS设置主菜单和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值