这样是京东允许的:
.user-xxx{
font-size:16px
background: yellow
}
.userList{float: left}
这也是京东允许的:
-moz-xxx{padding: 0 3px}
但是下面这些你别想了,JD不让:
body{}
html{}
估计你刚接触这东西。你想要写他们一样的代码出来估计没个小团队三五个月,你想都不要加。但你可以走其他方法。你要是效果,你就收“仿天猫导航代码 ”,再自己稍改下就好。别想着自己写。如果不能掌握好css+js+html和各种兼容,累死也写不出来用 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 的复杂定位
其他莫名其妙的问题
...
最终结果一切未知,有兴趣的话可以自己试着写代码。