<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 的复杂定位
其他莫名其妙的问题
...
最终结果一切未知，有兴趣的话可以自己试着写代码。
*{}这样的优先级是非常低的
强制生效就每一条css属性后面都加!important
*{margin:0px !important
padding:0px !important
list-style-type:none !important
}
这样就可以了。
当然平时写代码是不推荐使用!important的，渲染原理上来讲，加载到!important后浏览器要回过头去重新渲染，效率比较低下
//设置小于1000px时，固定宽度显示@media screen and (max-width:1000px){
body{
width:1000px
height:760px
}
@import url(index.css)//调用原有的css，实现自适应宽度
}
在html中调用两个css文件即可。
2.让页面不会随着屏幕变大变形的方法，在div中设置另一个div，layout，将内容放在其中，设置固定宽度，设置margin:0 auto. ----京东导航条
