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中测试过并且适用于我。虽然没有为此元素设置浮点数，但它从div.topnav a。

继承float：left

我的下拉菜单横向进入ie

1 个答案: