Question

我画了一个下拉菜单，不会扩展IE8和9。我将代码复制到一个小提琴中它可以工作，但如果我在ie8和9上运行，我的本地页面就无法正常工作。这是代码运行正常的小提琴，尝试将代码复制到本地页面并在IE上运行，将不再工作。

 <html>


    <head>
    <style>
    body{
    margin:0;
    padding:0;
    }

    #header{
    background: url("back-trans.png") repeat-x;
    margin:0 auto;
    width:100%;
    height:85px;
    position:fixed;
    }


    #menu {  
        list-style:none;  
        width:940px;
        height:50px;     
        margin:15px auto 0px auto;  
        padding:0px 20px 0px 20px;
        border-color: #f4f4f4 white white;
        border-style: solid;
        border-width: 1px;
        border-radius: 10px;
        box-shadow: 0 1px 8px 1px ghostwhite;
    }

    #menu .buhuhu {  
            float:left;  
            text-align:center;  
            position:relative;
            /*margin-right:30px;*/  
        }  

    #menu li a{
    padding:15px;
    z-index:5;
    border-right: 1px solid #FAFAFA;
    }

    #menu .linkClass a{
    padding:4px;
    }


    #menu li:hover {  
        background: #f4f4f4;  
        border-radius: 5px 5px 0px 0px;  
    }

    #menu li a {  
        color: #275424;  
        display:block;  
        text-decoration:none;  
    }

    #menu li:hover a {  
            color:#161616;
           display:block;        
        }  
    #menu li:hover > div{
    display:block
    }

       /* #menu li .drop {  
            padding-right:21px;  
            background:url("img/drop.png") no-repeat rightright 8px;  
        }  
        #menu li:hover .drop {  
            background:url("img/drop.png") no-repeat rightright 7px;  
        } --arrow */
    .dropdown_1column,  
    .dropdown_2columns,  
    .dropdown_3columns,  
    .dropdown_4columns,  
    .dropdown_5columns {  
        position:absolute;  
        display:none;
        text-align:left;  
        padding:10px;  
        box-shadow:inset 0px 0px 1px brown;  
        border-top:none;  
        background:#f4f4f4;  
        border-radius: 0px 5px 5px 5px;  
    }
        .dropdown_1column {width: 165px;}  
        .dropdown_2columns {width: 657px;}  
        /*.dropdown_3columns {width: 300px;}*/
        .dropdown_4columns {width: 660px;}  
        .dropdown_5columns {width: 495px;}  

        #menu li:hover .dropdown_1column,  
        #menu li:hover .dropdown_2columns,  
        #menu li:hover .dropdown_3columns,  
        #menu li:hover .dropdown_4columns,  
        #menu li:hover .dropdown_5columns {  
        display:block;
          }  





    .flesh{
        display:block;
        float:left;
        background:#fafafa;
        width:150px;
        height:100%;
        position:relative;
        top:0;
        margin:7px;
        }

    .flesh p{
    border-bottom:1px solid #eaeaea;
        font-weight:bold;
    }


    .flesh li a{
    display:inline-block;
        width:125px;
        text-align:left;
        cursor:pointer;
    }

    #menu li div div ul li{
    list-style:none;
    margin-left:0;
    }

    #menu li div div ul li a{
    width:100%;
    }




    </style>
    </head>

 <body> 
    <div id="header">
       <ul id="menu">  
            <li class="buhuhu"><a href="#" class="drop">Column1</a>  
       <div class="dropdown_5columns">  
         <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   </ul>
                    </div>
             <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
              </ul>
              </div>
             <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
               </ul>
                    </div>
                    </div>
            </li>

            <li  class="buhuhu"><a href="#" class="drop">Column2</a>  
          <div class="dropdown_4columns">  
                <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                   <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
                   <li class="linkClass"><a>Link6</a></li>
                   <li class="linkClass"><a>Link7</a></li>
                   <li class="linkClass"><a>Link8</a></li>
                   <li class="linkClass"><a>Link9</a></li>
                   </ul>
                    </div>
                  <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   </ul>
                    </div>
          <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
                   <li class="linkClass"><a>Link6</a></li>
                   <li class="linkClass"><a>Link7</a></li>
                   <li class="linkClass"><a>Link8</a></li>
                </ul>
              </div>  
              <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
                   <li class="linkClass"><a>Link6</a></li>  
              </ul>
              </div>  
             </div>  
            </li>  
            <li class="buhuhu"><a href="#" class="drop">Column3</a></li>  
            <li class="buhuhu"><a href="#" class="drop">Column4</a>  
                <div class="dropdown_2columns">  
                <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
                   <li class="linkClass"><a>Link6</a></li>
                   <li class="linkClass"><a>Link7</a></li>
                   <li class="linkClass"><a>Link8</a></li>
              </ul>
              </div>  
            <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
              </ul>
              </div>              
               <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>
                   <li class="linkClass"><a>Link4</a></li>
                   <li class="linkClass"><a>Link5</a></li>
              </ul>
              </div>

                     <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
                   <li class="linkClass"><a>Link3</a></li>  
              </ul>
              </div>
                 </div>  
            </li>  
            <li class="buhuhu"><a href="#" class="drop">Column5</a>  
                <div class="dropdown_1column">  
                           <div class="flesh">
            <p>Paragraph</p>                     
              <ul>
                  <li class="linkClass"><a>Link1</a></li>
                   <li class="linkClass"><a>Link2</a></li>
              </ul>
              </div>
             </div>
            </li>  
        </ul>
    </div>    
        </body>
        </html>

DropDown菜单不会在Ie8 / 9本地扩展

0 个答案: