0

I have a pure CSS dropdown on our website. It works fine in Chrome, but in IE9, the child elements are to the right of the parent rather than below the parent.

CSS code:

/* 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>

website: http://starkhousepress.com

thank you!

4

1 回答 1

0

我相信你的问题出在 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/ 希望对你有所帮助

于 2012-12-04T00:10:02.137 回答