纯CSS版
注意节点之间的继承关系：
style：
.topmenu dl:hover .subdiv
{
display:block;
}
body：
<ul class="topmenu">
<dl>
<li><a href="#">图书、音像、数字商品</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="#">图书、音像、数字商品
<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 属性逻辑方面有些混乱 只求效果正确 可读性差 今后要注意