一盐固、Html布局

<ul class="topmenu">
        <div class="toptitle">
            全部商品分類
        </div>
        <li><a href="#">圖書刹泄、音像翁逞、數(shù)字商品</a><span></span>
            //加入span標簽是為了遮擋兩個menu之間的邊框
            <div class="submenu">
                <div class="leftdiv">
                    <dl>
                        <dt><a href="#">電子書</a></dt>
                        <dd>
                            <a href="#">免費</a> <a href="#">小說</a> <a href="#">勵志與成功</a> <a href="#">婚戀/兩性</a>
                            <a href="#">文學</a> <a href="#">經管</a> <a href="#">暢讀VIP</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">數(shù)字音樂</a></dt>
                        <dd>
                            <a href="#">通俗流行</a> <a href="#">古典音樂</a> <a href="#">搖滾說唱</a> <a href="#">爵士藍調</a>
                            <a href="#">鄉(xiāng)村民謠</a> <a href="#">有聲讀物</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">音像</a></dt>
                        <dd>
                            <a href="#">音樂</a> <a href="#">影視</a> <a href="#">教育音像</a> <a href="#">游戲</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">文藝</a></dt>
                        <dd>
                            <a href="#">小說</a> <a href="#">文學</a> <a href="#">青春文學</a> <a href="#">傳記</a> <a
                                href="#">藝術</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">人文社科</a></dt>
                        <dd>
                            <a href="#">歷史</a> <a href="#">心理學</a> <a href="#">政治/軍事</a> <a href="#">國學/古籍</a>
                            <a href="#">哲學/宗教</a> <a href="#">社會科學</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">經管勵志</a></dt>
                        <dd>
                            <a href="#">經濟</a> <a href="#">金融與投資</a> <a href="#">管理</a> <a href="#">勵志與成功</a>
                        </dd>
                    </dl>
                    <dl class="fore7">
                        <dt><a href="#">生活</a></dt>
                        <dd>
                            <a href="#">家教與育兒</a> <a href="#">旅游/地圖</a> <a href="#">烹飪/美食</a> <a href="#">時尚/美妝</a>
                            <a href="#">家居</a> <a href="#">婚戀與兩性</a> <a href="#">娛樂/休閑</a> <a href="#">健身與保健</a>
                            <a href="#">動漫/幽默</a> <a href="#">體育/運動</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">科技</a></dt>
                        <dd>
                            <a href="#">科普</a> <a href="#">IT</a> <a href="#">建筑</a> <a href="#">醫(yī)學</a> <a href="#">
                                工業(yè)技術</a> <a href="#">電子/通信</a> <a href="#">農林</a> <a href="#">科學與自然</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">少兒</a></dt>
                        <dd>
                            <a href="#">少兒</a> <a href="#">0-2歲</a> <a href="#">3-6歲</a> <a href="#">7-10歲</a>
                            <a href="#">11-14歲</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">教育</a></dt>
                        <dd>
                            <a href="#">教材</a> <a href="#">中小學教輔</a> <a href="#">考試</a> <a href="#">外語學習</a>
                        </dd>
                    </dl>
                    <dl>
                        <dt><a href="#">其它</a></dt>
                        <dd>
                            <a href="#">英文原版書</a> <a href="#">港臺圖書</a> <a href="#">工具書</a> <a href="#">套裝書</a>
                            <a href="#">雜志/期刊</a>
                        </dd>
                    </dl>
                </div>
                <div class="rightdiv">
                    <dl>
                        <dd>
                            <a >
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/1B/rBEbRlOCFcoIAAAAAAArMNB2tlkAACTlwDgVG8AACtI514.jpg"
                                    width="194" height="70" title="\家電">
                            </a>
                        </dd>
                        <dd>
                            <a >
                                <img src="http://img30.360buyimg.com/erpVCAare/g16/M00/0B/19/rBEbRlOAiHUIAAAAAAAx8X2c6oIAACTCAP56A4AADIJ112.jpg"
                                    width="194" height="70" title="小家電--三請聚寶盆">
                            </a>
                        </dd>
                    </dl>
                    <dl>
                        <dt>推薦品牌</dt>
                        <dd>
                            <a href="#">美的官方旗艦店</a>
                        </dd>
                        <dd>
                            <a href="#">蘇泊爾旗艦店</a>
                        </dd>
                        <dd>
                            <a href="#">九陽旗艦店</a>
                        </dd>
                        <dd>
                            <a href="#">東菱旗艦店</a>
                        </dd>
                        <dd>
                            <a href="#">海爾統(tǒng)帥旗艦店</a>
                        </dd>
                        <dd>
                            <a href="#">小熊旗艦店</a>
                        </dd>
                    </dl>
                    ![](wii.png)
                </div>
            </div>
        </li>
        <li><a href="#">家用電器</a></li>
        <li><a href="#">手機录肯、數(shù)碼</a></li>
        <li><a href="#">電腦蚤假、辦公</a></li>
        <li><a href="#">家居栏饮、家具、家裝磷仰、廚具</a></li>
        <li><a href="#">服飾內衣袍嬉、珠寶首飾</a></li>
        <li><a href="#">個護化妝</a></li>
        <li><a href="#">鞋靴、箱包灶平、鐘表伺通、奢侈品</a></li>
        <li><a href="#">運動戶外</a></li>
        <li><a href="#">汽車用品</a></li>
        <li><a href="#">母嬰、玩具樂器</a></li>
        <li><a href="#">食品飲料逢享、酒類罐监、生鮮</a></li>
        <li><a href="#">營養(yǎng)保健</a></li>
  </ul>

二、Css樣式

• 純css版

<style type="text/css">
   body{
        padding: 0;
        font-size: 10pt;
        behavior:url(css/csshover.htc);
        /*為兼容IE6引的補丁文件*/
    }
    .topmenu{
        display: block;
        width: 220px;
        border: 2px solid #e4393c;
        margin: 0;
        padding: 0;
    }
    .toptitle{
        height: 40px;
        line-height: 40px;
        text-align: left;
        font-size: 11pt;
        font-weight: bold;
        color: White;
        background: #e4393c;
        padding-left: 20px;
    }
    .topmenu li{
        height: 30px;
        line-height: 30px;
        font-size: 11pt;
        list-style-type: none;
        text-align: left;
        padding-left: 8px;
        z-index: 3;
        /*圖層*/
        background-image:url(http://img.mukewang.com/5411027300014f0200220030.jpg);
        /*箭頭圖片*/
        background-repeat:no-repeat;
        background-position:right;
    }
    .topmenu li:hover{
        background-image:none;
        /*去掉箭頭圖片*/
        border:1px solid #DDD;
        border-right: 0;
        box-shadow:0 0 8px #DDD;
        /*向框添加一個或多個陰影*/
        -moz-box-shadow: 0 0 8px #DDD;
        /* 老的 Firefox */
        -webkit-box-shadow: 0 0 8px #DDD;
        /*兼容谷歌*/
        border-left: 4px solid #e4393c;
    }
    .topmenu li a{
        text-decoration: none;
        color: #313131;
    }
    .topmenu li a:hover{
        text-decoration: underline;
        font-weight: bold;
        color: #e4393c;
    }
    .submenu{
      display: none;
      width: 715px;
      position: absolute;
      top: 40px;
      left:220px;
      border: 1px solid #DDD;
      z-index: 4;
      background: white;
      box-shadow:0 0 8px #DDD;
      -moz-box-shadow: 0 0 8px #DDD;
      -webkit-box-shadow: 0 0 8px #DDD;
    }
    .leftdiv{
      float: left;
      width: 490px;
      margin: 5px;
    }
    .rightdiv{
      float: left;
      width: 200px;
      margin: 5px;
    }
    .topmenu li:hover .submenu{
      display: block;
    }
    .topmenu li:hover span{
      background: white;
      display: inline-block;
      z-index: 20;
      width: 20px;
      height: 30px;
      float: right;
      position: relative;
    }
    .leftdiv dl{
      display: block;
      border-bottom: 1px solid #EEE;
      padding-bottom: 6px;
      overflow: hidden;
    }
    .leftdiv dl dt{
      display: block;
      float: left;
      width: 60px;
      text-align: right;
      height: 22px;
      line-height: 22px;
      padding-right: 6px;
    }
    .leftdiv dl dt a{
      color: #e4393c;
      font-weight: bold;
      text-decoration: underline;
      font-size: 10pt;
    }
    .leftdiv dl dd{
      display: block;
      overflow: hidden;
    }
    .leftdiv dl dd a{
      display: block;
      float: left;
      border-left: 1px solid #ccc;
      color: #737373;
      font-size: 9pt;
      padding: 0 8px;
      height: 14px;
      line-height: 14px;
      margin: 4px 0;
    }
    .rightdiv dl dd{
      margin: 3px 0;
    }
    .rightdiv dl dt{
      color: #e4393c;
      font-size: 10pt;
      font-weight: bold;
    }
    .rightdiv dl dd a{
      font-size: 9px;
      color: #737373;
      line-height: 22px;
    }
    .rightdiv dl dd a:hover{
      font-weight: normal;
      color: #737373;
    }
</style>

• Js版的css樣式(簡單的將 li:hover 改成一個類名 .lihover)

.topmenu .lihover{/*鼠標移動到上面時應用的樣式*/
        background-image:none;
        /*去掉箭頭圖片*/
        border:1px solid #DDD;
        border-right: 0;
        box-shadow:0 0 8px #DDD;
        /*向框添加一個或多個陰影*/
        -moz-box-shadow: 0 0 8px #DDD;
        /* 老的 Firefox */
        -webkit-box-shadow: 0 0 8px #DDD;
        /*兼容谷歌*/
        border-left: 4px solid #e4393c;
    }
    .topmenu .lihover .submenu{/*懸浮層*/
      display: block;
    }
    .topmenu .lihover span{/*白色小方框*/
      background: white;
      display: inline-block;
      z-index: 20;
      width: 20px;
      height: 30px;
      float: right;
      position: relative;
    }

三拼苍、Js部分

<script>
  window.onload = function(){
    var Lis = document.getElementsByTagName('li');
    for (var i = 0; i < Lis.length; i++) {
      Lis[i].i = i;//由于Js中的閉包 for循環(huán)中的i是最后一個數(shù) 所以不能直接使用i
      Lis[i].onmouseover = function(){
        this.className = "lihover";
        // 為其添加lihover類的樣式 后面的.submenu span等會自動繼承

        var h0 = (this.i-1)*30+42;//當前的一級菜單的高度 30為每一行的高度 42為標題的高度
        var y = this.getElementsByTagName('div')[0].offsetHeight;//當前一級菜單下懸浮層的高度
        var h = this.getElementsByTagName('div')[0].style.top + y;
        if(h < h0){
          this.getElementsByTagName('div')[0] = h0+'px';
          //防止當懸浮層內容太少的時候其遠離一級菜單
        }
        if(y>550){
          this.getElementsByTagName('div')[0].style.top = "3px";
          //防止當懸浮層內容太多的時候一屏無法展示完整將其上移
        }
      }
      Lis[i].onmouseout = function(){
        this.className = "";
      }
    }
  }
</script>