Question

京东的左侧导航。如果用纯css如何做出子菜单成为一个整体的效果。如图。

Answer 1

用 a:hover span 试试，如果你 css 非常熟，能处理好很多细节问题，有可能能行，不断的嵌套 a:hover span ，下面这个如果你看得明白的话可以试试：

<ul>
<li>
<a>
家用电器
<span>
<strong>生活电器</strong>
<ul>
<li><a>净化器</a></li>
<li><a>净水设备</a></li>
<li><a>电风扇</a></li>
</sapn>
</a>
</li>
</ul>

核心就是一个链接里面放一个span，然后这个span里面又放二级菜单的链接：
<a>一级菜单<span><ul>二级菜单</ul></sapn></a>

然后先把 span 用 display:none; 隐藏起来，当一级菜单的链接发生 a:hover 时，又把 span 的 display 设置为 block 使其可见。

纯 css 不上 js 并且：不用表格、条件注释的话，那上面我说的这些就是唯一的办法了。

另一种可能是：上面我说的这些根本做不到你想要的效果，因为我也没试过这么复杂的嵌套会出现什么预料之外的东西要处理，考虑各浏览器兼容问题，能否处理掉这些问题是未知的。

你至少需要解决：
IE6 下 a:hover span 无效(要让其生效需要设置一个多余的空背景，方法自行百度)
各种 z-index 问题
span 的复杂定位
其他莫名其妙的问题
...

最终结果一切未知，有兴趣的话可以自己试着写代码。

追问

我写出了类似的代码。。但是我的代码家用电器跟旁边的子菜单不是连一起的。我就想知道怎么样才能实现看起来在一个圈里那种样子。

追答

如果 a:hover span 你已经实现了弹出菜单的话：

1.试试各主流内核浏览器下弹出的菜单里面的链接能点击到不

2.把 家用电器 这个一级菜单设置上、下边框为红色，然后整个 二级菜单 span 的边框设置为上下左右为红色，然后用相对定位嵌套绝对定位、或负外边距之类的方法移到一级菜单的边缘-1px的地方，让一级菜单右边的白边那部分挡住 span 的红边；这样做可能 z-index 的问题你得多测几个浏览器，如果出麻烦的话还有个变通方法，另外定位一个1像素的白色条，恰当的覆盖在一二级菜单交界处的红边上

另外这样嵌套效果上也许正确，但语意和结构上来说是不好的，睡觉青蛙 说得对：这个东西你不如用 js 做来得简单直接，不要抗拒 js ，学会了结合 css 能做的事就多了。

Answer 2

<style type="text/css">
.main{
width:1002px;
height:600px;
margin:0 auto;
background:#ccc;
}
.box {
position:relative;
font-size:14px;
color:#333;
padding:10px;
}
.box>ul {
list-style:none;
margin:0px;
padding:0px;
}
.box>ul>h4 {
margin:0;
position:relative;
width:120px;
line-height:22px;
padding:10px;
border:1px solid transparent;
cursor:pointer;
z-index:999;
}
.box>ul>li {
width:300px;
height:400px;
position:absolute;
left:151px;
top:10px;
background:#FFF;
border:1px solid #666;
display:none;
}
.box>ul:hover>h4 {
background:#FFF;
color:#F60;
border:1px solid #666;
border-right:1px solid #fff;
}
.box>ul:hover>li {
display:block;
}
</style>
<div class="main">
<div class="box">
<ul><h4>导航一</h4>
<li>这里放你展开的图什么的</li>
</ul>
<ul><h4>导航二</h4>
<li>这里放啥都行</li>
</ul>
<ul><h4>导航三</h4>
<li>这里也是，随便放</li>
</ul>
</div>
</div>

Answer 3

ie6不支持a以外的标签用:hover哦，