Question

我的网站上有一个纯CSS下拉列表。它在Chrome中工作正常，但在IE9中，子元素位于父元素的右侧而不是父元素的下方。

CSS代码：

/* drop down menus on front page */

ul#dropdown {
  font-size: 14pt;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    color: #92008f;
    width: 100%;
    font-family: Times New Roman, Georgia, Times;
    z-index: 1;
}

ul#dropdown li, ul#dropdown li ul li {
    list-style: none;
    margin: 0;
    padding: 0;
    float: left;
    position: relative;
    overflow: visible;
    width: 140px;
    text-align: center;
    z-index: 1;
}

li ul {
    display: none;
    list-style: none;
    position: absolute;
    font-size: 11pt;
    width: 140px;
    font-family: Times New Roman, Georgia, Times;
    color: #000000;
    overflow: auto;
    background-color: #efdaef;
    border: 1px solid #92008f;
    margin: 0;
    padding: 0;
    z-index: 1;
}

li:hover ul {display: block;}

HTML：

<!DOCTYPE html>
<?php
  $author='STARK HOUSE'; 
include 'header.php'; ?>


<div id="wrapper">
     <ul id="dropdown">
<!--    STARK HOUSE -->
        <ul>
          <li><img src="images/downarrow.jpg" style="margin:0"> STARK HOUSE 
            <ul>
          <li><a href="pages/mysteryclub.html">Crime Book Club</a>
          <li><a href="http://www.ollerman.com/starkhouse/shnewsletter.html">Newsletter</a>
            </ul>
      </ul>
 <!--   FANTASY -->
        <ul>
          <li><img src="images/downarrow.jpg" style="margin:0">FANTASY
            <ul>
        <li><a href="blackwood.php">Algernon Blackwood</a>
          <li><a href="butzen.php">Catherine Butzen</a>
          <li><a href="constantine.php">Storm Constantine</a>
            </ul>
      </ul>

网站：http://starkhousepress.com

谢谢你！

Answer 1

我相信你的问题是IE7，我用IE9测试并且工作正常：

尝试下面的代码（我测试了IE 7 8 9和其他..工作正常） HTML：

<div id="wrapper">
    <div id="dropdown">
        <!--    STARK HOUSE -->
        <div class="drop">
            <div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0"> STARK HOUSE </div>
            <ul>
                <li><a href="pages/mysteryclub.html">Crime Book Club</a></li>
                <li><a href="http://www.ollerman.com/starkhouse/shnewsletter.html">Newsletter</a></li>
            </ul>
        </div>
        <!--   FANTASY -->
        <div class="drop">
            <div class="menu"><img src="http://starkhousepress.com/images/downarrow.jpg" style="margin:0">FANTASY</div>
            <ul>
                <li><a href="blackwood.php">Algernon Blackwood</a></li>
                <li><a href="butzen.php">Catherine Butzen</a></li>
                <li><a href="constantine.php">Storm Constantine</a></li>
            </ul>
        </div>
    </div>
</div>

CSS：

#dropdown {
    font-size: 14pt;
    margin: 0;
    padding: 0;
    padding-top: 10px;
    color: #92008f;
    width: 100%;
    font-family: Times New Roman, Georgia, Times;
    z-index: 1;
}
.drop {
    display:inline-block;
    width:140px;
    vertical-align:top;
    *display:inline;
}
.drop ul{
    display:none;
}

.drop:hover ul {
    display: block;
}

http://jsfiddle.net/vRRw8/8/ 我希望能帮助你

IE9和CSS下拉列表定位

1 个答案: