我的下拉菜單橫向在ie

Question

我有一個下拉菜單，可以在Firefox和Chrome中正常工作，但不在ie中。子菜單出現在主菜單下方，但它顯示在側面。我如何解決它？

該網站網址爲菜單www.umvaonline.org

代碼

<li class='top'><a href='blog/'>News/Blog</a> 
         <ul class='item'> 
          <li><a href='/blog/category/news/exhibition-listings/'>Exhibition Listings</a></li> 
          <li><a href='/blog/category/news/opportunities/'>Opportunities for Artists</a></li> 
          <li><a href='/blog/category/news/workshops-classes/'>Workshops & Classes</a></li> 

         </ul> 
        </li> 
        <li class='top'><a href='index.php?page=journal'>Quarterly Journal</a> 
         <ul class='item'> 
          <li><a href='index.php?page=submission'>Submission Guidelines</a></li> 
          <li><a href='/blog/category/archived-journals/'>Archived Journals</a></li> 
         </ul> 
        </li> 

css 

div.topnav { height:40px;margin-left:30px;margin-bottom:20px;} 
    div.topnav ul {z-index:10000;padding: 0 1px;  
    list-style: none; 
    position: relative; 
    top:0; 
    display: inline-table;} 
    div.topnav ul:after { 
     content: ""; clear: both; display: block; 
    } 
    div.topnav ul li { 
    height: 100%; 
    float: left; 
    font-family: arial, verdana, helvetica; 
    font-size: 95%;} 
    div.topnav a { 
     float: left; 

     height: 40px; 
     line-height: 40px; 
     text-align:center; 
     background-image: url('umva_images/umva_button.png'); 
     padding-left:12px; 
     padding-right:12px; 
     background-repeat: repeat-x; 

     color: silver; 
     font-weight:bold; 
     text-shadow: 1px 1px black; 

     transition:color .25s ease; 
     text-transform:uppercase; 
     text-decoration:none 
     } 
    div.topnav ul.item{display:none} 
    div.topnav li.top:hover ul.item {display:block} 
    div.topnav a.left {border-top-left-radius:5px;border-bottom-left-radius:5px} 
    div.topnav a.right {border-top-right-radius:5px;border-bottom-right-radius:5px} 

    div.topnav a:hover { background-image: url('umva_images/umva_button_hover.png');color:white} 
    div.topnav a.current { background-image: url('umva_images/umva_button_hover.png');color:white} 







    div.topnav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0;  
    position: absolute; top: 100%; 
    box-shadow:2px 2px 5px black 

    } 
    div.topnav ul ul li { 
     float: none; 

     position: relative; 

    } 

     div.topnav ul ul li a { 
      background: #5f6975; 
      color: #fff; 
      font-size:90%; 
      width:auto; 
      height:25px; 
      line-height:25px; 
      text-align:left; 

     } 
      div.topnav ul ul li a:hover { 
       background: #5f6975; 
      text-decoration:underline; 

      } 
    div.topnav ul ul li a { 

      } 
    div.topnav ul li.left {border-top-left-radius:5px; border-bottom-left-radius:5px} 
    div.topnav ul li.right {border-top-right-radius:5px; border-bottom-right-radius:5px} 

Answer 1

你必須檢查，如果這是爲你工作 - 添加浮動：無;以div.topnav ul ul li a。 剛剛在IE10和Firefox中測試過並適用於我。雖然這個元素沒有設置浮點，但它繼承了float：left from div.topnav a。