html css实现二级导航

最新推荐文章于 2024-05-27 17:27:19 发布
最新推荐文章于 2024-05-27 17:27:19 发布
阅读量1.1k 收藏 15
点赞数 4
分类专栏： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zyfacd/article/details/105416495
版权

在这里插入图片描述
这里就只做了第一个点击效果，如果需要可自行添加

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>京东导航</title>
<style type="text/css">
	/* CSS Document */
	nav{
	    position:absolute;
	    left:100px;
	    top:100px;
	    border:1px solid #b61d1d;
	    }
	/*全部商品分类*/
	.all{
	    width:190px;
	    height:44px;
	    line-height:44px;
	    background:#b1191a;
	    padding:0 10px;
	    }
	    .all a{
	            color:white;
	            font-size:16px;
	
	        }
	/*导航菜单*/
	.nav_item{
	
	    width:190px;
	    height:31px;
	    line-height:31px;
	    color:white;
	    background:#b61d1d;
	    padding:0 10px;
	    }
	ul li a{color:white;}
	
	.jt{
	    color:white;
	    float:right;
	    width:12px;
	    padding-top:10px;
	    font: 13px consolas;
	    }
	    /*hover*/
	ul li:hover {
	    background:white;
	    }
	ul li:hover a{
	        color:#b61d1d;
	        }
	    /*submenu*/
	.sub_menu{
	    display:none;
	    width:790px;
	    position:absolute;
	    left:210px;
	    top:44px;
	    background:#f7f7f7;
	}
	ul li:hover .sub_menu{display:block;}
	.leftmenu{
	   width: 550px;
	   overflow:hidden;
	   float:left;
	}
	.leftmenu dl{
	    overflow:hidden;
	    display:block;
	    margin: 20px 0;
	
	    }
	.leftmenu dl dt{
	    float:left;
	    font-weight:bold;
	    color:#737373;
	    padding:0 8px;
	
	}
	
	.leftmenu dl  dd  a{
	     color: #737373;
	    float:left;
	    height:20px;
	    line-height:20px;
	    padding:0 10px;
	    border-left: 1px solid #e0e0e0;
	     font-size:12px;
	     margin-top:5px;
	}
	.rightmenu{
	    float:right;
	    }
	.rightmenu dl {
	    margin-top:20px;
	
	    }
	.rightmenu dl dd {
	    padding:0;
	    margin-bottom:2px;
	    }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre, 
form,fieldset,input,textarea,p,blockquote,th,td { 
    padding: 0; 
    margin: 0; 
    border: none;
 font-family: "Microsoft YaHei", "微软雅黑", "SimSun", "宋体";
 font-size: 14px;
} 
ol,ul{
    list-style: none;
}
fieldset,img{
    border:0;
}
h1,h2,h3,h4,h5,h6 { 
    font-weight: normal; 
    font-size: 100%; 
} 
a{
    text-decoration: none;
     color: #737373;
}
img, iframe {
    border: none;
    text-decoration:none;
} 

</style>
</head>

<body>
<nav>
<div class="all">
    <a href="#">全部商品分类</a>
</div>
<ul>
    <li class="nav_item"><a href="#">家用电器</a><span class="jt">&gt;</span>
    <div class="sub_menu">
            <div class="leftmenu">
            <dl>
                <dt><a href="#">大家电</a></dt>
               <dd>
                <a href="#" >平板电视</a>
                <a href="#">空调</a>
                <a href="#">冰箱</a>
                <a href="#">洗衣机</a>
                <a href="#">家庭影院</a>
                <a href="#">DVD</a>
                <a href="#">迷你音响</a>
                <a href="#">烟机/灶具</a>
                <a href="#"> 热水器</a>
                <a href="#">消毒柜/洗碗机</a>
                <a href="#">冷柜/冰吧</a>
                <a href="#">酒柜</a>
                <a href="#">家电配件</a>
                </dd>
            </dl> 
                  <dl>
                <dt><a href="#">生活电器</a></dt>
               <dd>
                <a href="#">电风扇</a>
                <a href="#">冷风扇</a>
                <a href="#">净化器</a>
                <a href="#">加湿器</a>
                <a href="#">扫地机器人</a>
                <a href="#">吸尘器</a>
                <a href="#">挂烫机/熨斗</a>
                <a href="#">插座</a>
                <a href="#"> 电话机</a>
                <a href="#">清洁机</a>
                <a href="#">除湿机</a>
                <a href="#">干衣机</a>
                <a href="#">收录/音机</a>
                </dd>
            </dl>  
                  <dl>
                <dt><a href="#">厨房电器</a></dt>
               <dd>
                <a href="#">电压力锅</a>
                <a href="#">空调</a>
                <a href="#">冰箱</a>
                <a href="#">洗衣机</a>
                <a href="#">家庭影院</a>
                <a href="#">DVD</a>
                <a href="#">迷你音响</a>
                <a href="#">烟机/灶具</a>
                <a href="#"> 热水器</a>
                <a href="#">消毒柜/洗碗机</a>
                <a href="#">冷柜/冰吧</a>
                <a href="#">酒柜</a>
                <a href="#">家电配件</a>
                </dd>
            </dl>  
                  <dl>
                <dt><a href="#">个护健康</a></dt>
               <dd>
                <a href="#" >平板电视</a>
                <a class="test" href="#">空调</a>
                <a href="#">冰箱</a>
                <a href="#">洗衣机</a>
                <a href="#">家庭影院</a>
                <a href="#">DVD</a>
                <a href="#">迷你音响</a>
                <a href="#">烟机/灶具</a>
                <a href="#"> 热水器</a>
                <a href="#">消毒柜/洗碗机</a>
                <a href="#">冷柜/冰吧</a>
                <a href="#">酒柜</a>
                <a href="#">家电配件</a>
                </dd>
            </dl>  
                  <dl>
                <dt><a href="#">五金家装</a></dt>
               <dd>
                <a href="#">平板电视</a>
                <a href="#">空调</a>
                <a href="#">冰箱</a>
                <a href="#">洗衣机</a>
                <a href="#">家庭影院</a>
                <a href="#">DVD</a>
                <a href="#">迷你音响</a>
                <a href="#">烟机/灶具</a>
                <a href="#"> 热水器</a>
                <a href="#">消毒柜/洗碗机</a>
                <a href="#">冷柜/冰吧</a>
                <a href="#">酒柜</a>
                <a href="#">家电配件</a>
                </dd>
            </dl>      

            </div>
            <div class="rightmenu">
                 <dl>
                        <dd>
                            <a href="http://sale.jd.com/act/1XDZ6ShE5M7tTrl.html">
                                <img src="http://img10.360buyimg.com/vclist/jfs/t1198/21/1061230330/3619/48ee51cc/556ed3a0N9004a8f7.jpg"
                                    width="168" height="134" title="by:罗坚元">
                            </a>
                        </dd>
                        <dd>
                            <a href="http://sale.jd.com/act/v8kJIaPmsMGuebpH.html">
                                <img src="http://img11.360buyimg.com/vclist/jfs/t1531/43/307393451/3092/229dc57a/557194e1N0d5188f3.jpg"
                                    width="168" height="134" title="by:罗坚元">
                            </a>
                        </dd>
                    </dl>
            </div>
        </div>
    </li>       

    <li class="nav_item"><a href="#">手机</a>、<a href="#">数码</a>、<a href="#">京东通信</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">电脑</a>、<a href="#">办公</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">家居</a>、<a href="#">家具</a>、<a href="#">家装</a>、<a href="#">厨具</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">男装</a>、<a href="#">女装</a>、<a href="#">内衣</a>、<a href="#">珠宝</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">个护化妆</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">鞋靴</a>、<a href="#">箱包</a>、<a href="#">钟表</a>、<a href="#">奢侈品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">运动户外</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">汽车</a>、<a href="#">汽车用品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">母婴</a>、<a href="#">玩具乐器</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">食品饮料</a>、<a href="#">酒类</a>、<a href="#">生鲜</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#">营养保健</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">图书</a>、<a href="#">音像</a>、<a href="#">数字商品</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">彩票</a>、<a href="#">旅行</a>、<a href="#">充值</a>、<a href="#">票务</a><span class="jt">&gt;</span></li>
    <li class="nav_item"><a href="#"><a href="#">理财</a>、<a href="#">众筹</a>、<a href="#">白条</a>、<a href="#">保险</a><span class="jt">&gt;</span></a></li>
</ul>
</nav>
</body>
</html>
zyfacd
关注
  • 4
    点赞
  • 踩
  • 15
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML简单实现京东商城底部导航
ttxs62825的博客
08-04 6258
HTML实现京东商城底部导航 京东商城底部截图： 比如，“购物指南”栏，在鼠标未放到下面导航时为原色，当鼠标移动到上面时，会变颜色，点击会跳转新的页面。 可以看出采用的是表格样式，即是 ,外部再加个div标签。 实例代码如下： 京东(JD.COM)-综合网购首选-正品低价、品质保障、配送及时、轻松购物！ #nav{ text-decoration:none;
html 中怎么写二级导航,html二级菜单导航栏成品
weixin_42419782的博客
05-30 4105
html 高级二级导航菜单代码如下： #menu { width: 600px; font-family: Arial; font-size: 15px; } #menu ul { display: block; width: 100%; margin: 0; position: relative; } #menu ul li { list-style-type: none; float: lef...
HTML 纯CSS二级菜单的导航
08-12
NULL 博文链接：https://onestopweb.iteye.com/blog/2277031
html电商导航,电商网站常用的楼层导航效果
weixin_35112865的博客
06-10 553
很多电商网站都使用楼层导航效果来布局，如京东，唯品会等大型网站。那楼层导航效果怎么写了，其实很简单，主要用到鼠标滚动事件和高度的应用。现在我们就来用jquery来写以下。代码是直接copy过来的，因为注释比较多所以看起来有点乱。感兴趣的同学可以下载下面的源码来学习。楼层导航3*{margin: 0;padding: 0;}#container{width: 900px;margin: 0 auto...
【html+css（大作业）】二级菜单导航栏
最新发布
2301_79982543的博客
05-27 1161
hello，hello好久不见！
html+css京东电商页面
qq_43925054的博客
06-04 4600
京东电商页面开始的准备工作开始写代码head的内容body的内容hedaer头部 开始的准备工作 -准备好目录 -准备好图片素材 一级目录是jingdong这个文件，里面包括css+js+images+fonts文件，再包括主页面index以及图标ico 开始写代码 head的内容 简单介绍一下 normalize.css是一个准备好的初始化文件直接用 一般搜索网站的ico直接在后面写上/favicon.ico就可以获取该网站的图标 第三个链接是关于index的头部内容和尾部内容的主要css样式 关
html：制作简易京东导航栏
astar2022的博客
06-30 3602
又是让人头秃的一天！
CSS/HTML制作京东商城顶部导航条
Etui۹(･༥･´)و的博客
01-24 4331
京东商城原网站： 效果图： 源码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东商城导航条</title> <link rel="stylesh
京东左侧导航条
object6的博客
11-08 705
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>京东的左侧导航</title> <link rel="stylesheet" href="./reset.
css +html实现网站二级导航
lansing_1995的博客
05-22 1761
做了好几个小时，也算有点模样，学到了很多东西，看过的东西还是要多练才能理解的透彻，连接处的白边可以用小白块覆盖，真的很有创意（这是’剽窃’老师的思想了），做的练习还是不太够的感觉，以后应该可以做的快一点。<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
纯CSS制作二级导航下拉列表
04-30
至此，一个基本的纯CSS二级导航下拉列表就完成了。你可以根据自己的需求调整颜色、大小、过渡效果等样式。这个方法的好处是代码简洁，易于理解和维护，同时也兼容各种现代浏览器。 需要注意的是，虽然这种方法在...
纯CSS实现二级导航下拉菜单
05-06
以上就是使用纯CSS实现二级导航下拉菜单的基本步骤。通过调整CSS属性，你可以自定义菜单的样式、动画效果以及交互行为，以适应不同网站的设计需求。记住，良好的导航设计应简洁易用，同时保持与网站整体风格的一致性...
漂亮的CSS二级竖向导航菜单
06-06
本教程将深入探讨如何创建一个“漂亮的CSS二级竖向导航菜单”。这个菜单具有优雅的下拉效果，使得用户体验更加友好。 首先，我们来理解CSS（层叠样式表）在构建导航菜单中的作用。CSS是一种用于描述HTML或XML（包括...
纯CSS+XHTML实现的二级导航菜单效果
09-24
标题中的“纯CSS+XHTML实现的二级导航菜单效果”是指使用CSS（层叠样式表）和XHTML（可扩展超文本标记语言）这两种技术来创建一个具有二级结构的导航菜单。这种菜单在用户交互时，如鼠标悬停，会显示或隐藏下一级的...
html+css二级导航栏的创建
02-09
html+css二级导航栏的创建
HTML5之横向二三级,纵向三级导航栏
我不是秃头的博客
10-18 5618
横向二级导航栏 HTML代码 <div id="nav"> <ul> <li><a href="#">学院首页</a></li> <li><a href="#">招生就业</a> <ul> <li><a href="#">招生信息</a></li> <li><a href="#
html纵向导航条代码步骤,html纵向导航范例
weixin_39769675的博客
05-30 1153
无标题文档*{ margin:0px; padding:0px; font-size:12px; }#menu{ width:100px; border:1px solid #ccc;}#menu ul{ list-style:none;}#menu ul li{ height:30px; line-height:30px; background:#FFCCFF; border-bottom:1p...
＜CSS＞一级导航栏和二级导航栏
Snowyufly的博客
07-18 9943
二级导航栏的制作
用HTML和css实现二级菜单
05-20
以下是一个简单的HTML和CSS代码示例，用于实现一个带有二级子菜单的导航菜单： ```html <li><a href="#">菜单1 <li><a href="#">子菜单1</a></li> <li><a href="#">子菜单2</a></li> <li><a href="#">子...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值