.topmenu li:hover.submenu这个地方应该改成.topmenu li:hover .submenu就是.submenu前面应该有一个空格才行

加上border的话，效果会更加明显一些，因为shadow只是阴影，所以其颜色很浅。

另外，那2px的放大，从我个人的角度来看，倒是增添了一点点的动态效果，用户体验更棒了呢~

这些是position的属性值，你要移动图片本身，使用top、right、bottom、left这些属性时，就要加上position这个属性,

老铁，这个问题我也很疑惑，你解决了没有？求答案

submenu是包涵在标题div中的 ， 层级自然比标题div高

???

一样的，编辑PHP配置文件，开启pdo的扩展就可以^_^...错了，单引号内不能用转义字符。要用转义字符，需要把单引号改成双引号。

为了兼容老版本的 IE6 浏览器而引用的，

。。没加top

当你定义的CSS中有position属性值为absolute、relative或fixed时，用z-index取值方可生效。

是的 这里用相对定位的好处就是 小白框和悬浮层完美融合在一块  大家知道absolute是绝对定位，会脱离文档，不太好控制， 一般我们在网页制作的时候，一般父元素为相对定位，子元素为绝对定位，这里li没有设置相对定位，再用相对定位的话，小白块的位置需要再作调整、

当你定义的CSS中有position属性值为absolute、relative或fixed时，用z-index此取值方可生效。

rightdiv是200，设置了左浮动，右边空白会多出来，也可以把submenu减少5个像素会好看一点

设置span的位置试试position:relative;

实现一个效果可以 用多种方式完成，能想到别的办法解决问题说明你对页面布局的理解力还是挺不错的

li加上边框后,li的实际高度就等于li原来的高度加上li上下边框的高度了，所以要提前把li的高度减去li上下边框的总高度，然后再加边框就不会影响原来ul的高度了。

方法一：把div的宽度减去padding、margin值；

方法二：css3中有个属性可以在不改变宽度的同时增加border margin padding  就是box-sizing  可以去查一下他的用法

li  放错地方了

1. body有margin
   

2. 一级菜单有边框，实际宽度大于220px
   

给分。。。。。。。

.fenlei1{
    padding:0;
    margin:0;
   }
   .li1{
    float:left;
    height:30px;
    line-height:30px;
   }
   .fenlei1 li{
    height:40px;
    line-height:40px;
    z-index:3;
    background-image:url(../images/1.png);
    background-repeat:no-repeat;
    background-position:right;
    padding:0;
    margin:0;
   }
   .fenlei1 li a{
    color:#313131;
    padding-left:15px;
   }
   .fenlei1 li a:hover{
    text-decoration:underline;
    font-weight:bold;
    color:#e4393c;
    
   }
   .fenlei1 li:hover{
    border:1px solid #DDD;
    border-right:0;
    box-shadow: 0 0 8px #DDD;
    background-image:none;
   }
   .subfenlei{
    display:none;
    width:715px;
    position:absolute;
    top:0px;
    left:180px;
    border:1px solid #DDD;
    z-index:4;
    background:white;
    box-shadow: 0 0 8px #DDD;
    padding-left:0px;
   }
   .leftsub{
    background:white;
    float:left;
    width:490px;
    margin:5px;
   }
   .rightsub{
    background:white;
    float:left;
    width:200px;
    margin:5px;
   }
   .fenlei1 li:hover ~.subfenlei{
    display:block;
   }
   
   .fenlei1 li:hover ~span{
    background:white;
    display:inline-block;
    z-index:20;
    width:20px;
    height:40px;
    float:right;
    position:absolute;
    top:1px;
    left:175px;
   }
   .leftsub dl{
    display:block;
    border-bottom:1px solid #EEE;
    padding-botting:6px;
    overflow:hidden;
   }
   .leftsbu dl dt{
    display:block;
    float:left;
    width:60px;
    text-align:right;
    height:22px
    line-height:22px;
   }

<div class="fenlei">
    <ul class="fenlei1">
     <li><a href="#">信息科学与工程学院</a></li><span></span>
      <div class="subfenlei">
        <div class="leftsub">
         <dl>
          <dt><a href="#">专业</a></dt>
          <dd>
          <a href="#">计算机科学与技术</a><a href="#">光电子</a><a href="#">信息安全</a>
          </dd>
         </dl>               
        </div>
        <div class="rightsub">

不然位置会出现偏移

好像要实现鼠标放在上面后 文本变大是动画效果，不是用font-size实现的  简单一句就是字变大是动画效果 得用JavaScript

刚试了下，absolute的话，因为脱离文档流，float无效了，没有紧贴右边。而直接float不要position的话，z-index就失效了，没法覆盖边框。所以只能同时用relative和float。

另外，直接absolute，然后right：0的话，跑到屏幕最右边了~~试着把父级定位relative，结果在边框内，父级定位absolute，全乱了~~我也搞不清了

粗心

.nevigation li:hover .submenu1

{

display:block;

}里面的nevigation写错了，应该是navigation