首页 > 代码库 > 仿写练习-京东商城导航条
仿写练习-京东商城导航条
纯CSS版
注意节点之间的继承关系：
style：
.topmenu dl:hover .subdiv
{
display:block;
}
body：
<ul class="topmenu">
<dl>
<li><a href="http://www.mamicode.com/#">图书、音像、数字商品</a></li>
<div class="subdiv">
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
</div></dl>
意为：subdiv的父节点为topmenu下的dl 且只有在hover的时候才能满足这个关系。
之前写作.topmenu a:hover.subdiv 本意是在鼠标移动到链接上的时候显示模块，其中的问题：
首先 subdiv并没有被包含在a标签内，不满足父子关系；
另外a标签中写入列表后：
<ul class="topmenu">
<li><a href="http://www.mamicode.com/#">图书、音像、数字商品
<div class="subdiv">
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
hhhhhhhhhhhhhhhhhhhhhh<br />
</div></a></li>
鼠标移上链接后可以显示subdiv模块 但subdiv中的text会被直接加上a标签 并且因为链接和模块之间的距离导致无法选择subdiv中的内容
贴上完整链接 subdiv还未完全完成 之后有时间再补上。
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>无标题文档</title> 6 7 <style type="text/css"> 8 body 9 { 10 font-size:10pt; 11 padding:0; 12 line-height:1.5; 13 } 14 .toptitle 15 { 16 padding:0px; 17 height:50px; 18 line-height:50px; 19 font-size:11pt; 20 background-color:#C30; 21 font-weight:bold; 22 color:white; 23 text-align:left; 24 width:224px; 25 padding-left:20px; 26 27 } 28 .topmenu 29 { 30 display:block; 31 font-size:11pt; 32 border:2px solid #C30; 33 padding:0; 34 width:220px; 35 padding-left:20px; 36 37 margin:0; 38 } 39 .topmenu li 40 { 41 height:30px; 42 line-height:30px; 43 list-style-type:none; 44 background-image:url(0.png); 45 background-repeat:no-repeat; 46 background-position:right; 47 padding-left:0; 48 } 49 .topmenu li:hover 50 { 51 background-image:none; 52 border:1px solid #DDD; 53 border-right:0; 54 border-left:0; 55 box-shadow:0 0 8px #DDD; 56 -moz-box-shadow:0 0 8px #DDD; 57 padding-left:0; 58 } 59 .topmenu li a 60 { 61 text-decoration:none; 62 color:#003; 63 } 64 .topmenu li a:hover 65 { 66 text-decoration:underline; 67 color:#C30; 68 font-weight:bold; 69 font-size:12pt; 70 } 71 .subdiv 72 { 73 display:none; 74 position: absolute; 75 width: 715px; 76 left: 228px; 77 top: 60px; 78 border: 1px solid #DDD; 79 background-color: white; 80 } 81 .topmenu a:hover .subdiv 82 { 83 display:block; 84 } 85 </style> 86 </head> 87 88 <body> 89 <div class="toptitle">全部商品分类</div> 90 <ul class="topmenu"> 91 92 <li><a href="#">图书、音像、数字商品 93 <div class="subdiv"> 94 hhhhhhhhhhhhhhhhhhhhhh<br /> 95 hhhhhhhhhhhhhhhhhhhhhh<br /> 96 hhhhhhhhhhhhhhhhhhhhhh<br /> 97 hhhhhhhhhhhhhhhhhhhhhh<br /> 98 hhhhhhhhhhhhhhhhhhhhhh<br /> 99 100 </div></a></li>101 <li><a href="#">家用电器</a></li>102 <li><a href="#">手机、数码、京东通信</a></li>103 <li><a href="#">电脑、办公</a></li>104 <li><a href="#">家居、家具、家庭、厨具</a></li>105 <li><a href="#">男装、女装、内衣、珠宝</a></li>106 <li><a href="#">个护化妆</a></li>107 <li><a href="#">鞋靴、箱包、钟表、奢侈品</a></li>108 <li><a href="#">运动户外</a></li>109 <li><a href="#">整车、汽车用品</a></li>110 <li><a href="#">母婴、玩具乐器</a></li>111 <li><a href="#">食品饮料、酒类、生鲜</a></li>112 <li><a href="#">营养保健</a></li>113 <li><a href="#">彩票、旅行、充值、票务</a></li>114 </ul>115 </body>116 </html>
PS：因为是第一次动手写CSS 属性逻辑方面有些混乱 只求效果正确 可读性差 今后要注意
仿写练习-京东商城导航条