0

私たちのウェブサイトには純粋な 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

ありがとう！

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 に答える