.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">

代码贴出来啊