0

Internet Explorer のどのバージョンでも、1、2、3、4 ではなく 1、1、1、1 として認識される番号付きリストがあります。これを読んだ後、li に幅が設定されており、「display: list-item;」を追加する必要があるため、これが発生するように見えます。それが機能するためにliに-私は結果を出さずに試しましたが、同じ問題で幅を完全に削除しようとしました。

ここに私のリストがあります：

<div id="nav">
<ul>
    <li><a href="/">Home</a></li>
    <li>
        <a href="#">New Products</a>
        <ol class="newProducts">
            <li><a href="#"><span>Link 1</span></a></li>
            <li><a href="#"><span>Link 2</span></a></li>
            <li><a href="#"><span>Link 3</span></a></li>
            <li><a href="#"><span>Link 4</span></a></li>
            <li><a href="#"><span>Link 5</span></a></li>
            <li><a href="#"><span>Link 6</span></a></li>
            <li><a href="#"><span>Link 7</span></a></li>
            <li><a href="#"><span>Link 8</span></a></li>
        </ol>
    </li>
    <li><a href="news.html">News</a></li>
    <li><a href="payment-and-shipping.html">Payment &amp; Shipping</a></li>
</ul></div>

ここに私のCSSがあります：

<pre>
#nav ul, #nav ol {
position: absolute;
top: 158px;
    left: 0px;
    list-style: none;
    text-transform: uppercase;
}

#nav ul > li {
    float: left;
    padding: 10px;
    border-right: 2px solid #000000;
    font-size: 16px;
    position: relative;
}    

#nav ul > li:hover {
    background: url(../images/headerHover.png) bottom no-repeat;
    padding-bottom: 10px;
}    

#nav ul > li a {
    color: #FFFFFF; 
}

#nav ul > li > ol {
    display: none;
}

#nav ul > li:hover ol {
    margin-top: -120px;
    left: 0px;
    display: block;
    padding-top: 7px;
    list-style: decimal outside;
    font-size: 10px;
    color: #fdc800;
    font-family: Arial, Helvetica, sans-serif;
    display: block;
    text-transform: none;
}    

#nav ul > li:hover ol > li {
    text-align: left;
    padding: 0px 0px 5px 0px;
    width: 240px;
    border: 0px;
}    

#nav ul > li:hover ol > li:hover {
    background: none;   
}

#nav ul > li:hover ol > li a {
    color: #FFFFFF;
    text-decoration: none;
}    
</pre>
4

1 に答える 1