0

やあみんな私は次のものを持っています：

 <ul class='main_nav'>
        <li class='first' style='padding-top:0;'><a href='#' onclick='return false;'><span class='shaper'>Tools</span></a>
            <ul>
                <li class='second'><a href='emailfunction.php'>Email Tool</a></li>
                <li class='second'><a href='insurancetool.php'>Insurance Tool</a></li>
                <li class='second'><a href='monthlyreport.php'>Monthly Report Tool</a></li>
                <li class='second'><a href='statuschanger.php'>Status Change Tool</a></li>
                <li class='second'><a href='addtool.php'>Add Tool</a></li>
                <li class='second'><a href='revisetool.php'>Revise Tool</a></li>
                <li class='second'><a href='csvuploaderform.php'>Upload an Employee List (.csv file)</a></li>
                <li class='second'><a href='csvmanualuploaderform.php'>Upload a Single Employee</a></li>
                <li class='second'><a href='insuranceverificationviewer.php'>View Employee Car Insurance Information</a></li>
            </ul>
        </li>       
 </ul>

これが私のナビゲーションで、スタイルは次のとおりです。

.main_nav {
    display: block;
    float: left;
    width: 118px;
    height: 60px;
    background: #009;
    margin: 0 .5% 0 0;
    padding:0;
    color:black;


}
.main_nav:hover{
    background: lightgray;
    border-top:1px solid #009;
    border-right:1px solid #009;
    border-left:1px solid #009;
    color:#009;
}
.main_nav .first {
    text-align: center;
    width: 100%;
    color:white;
    z-index:9999;
}
.main_nav li a {
    color:white;
    height:60px;
    display: block; 
    z-index:9999;
}
.main_nav a:hover {
    color:black;    
}
.main_nav li {
    list-style:none;
    z-index:9999;
}
.main_nav li:hover {

}
.main_nav ul {
    display:none;
    list-style:none;    
    position:relative;
    float: left;
    z-index:9999;
}
.main_nav li:hover > ul {
    display: block;
    padding:0;
    margin:0;
    position:absolute;
    background: lightgray;
    }
.main_nav  li ul li {
    border-left:1px solid #009;
    border-right:1px solid #009;
    border-bottom:1px solid #009;
    z-index:9999;
}

したがって、これはうまく機能しますが、IEでこの問題が発生するのは、その下に線を追加する絶対的なdivがある場合です。IE では、カーソルを合わせたときに表示されるトップ ナビゲーションの前に行が配置されます。Google、firefox では、すべて素晴らしいです。

バーは次のとおりです。

<div class="top-backgroundwrap">

</div><!-- top-backgroundwrap -->

.top-backgroundwrap {
    width: 100%;
    height: 20px;
    background: lightgray;
    margin-top: -24px;  
}

z-index を試してみましたが、成功しませんでした。私はIEがそれを最も前の位置であると見なしていることに気付きました：絶対; インデックスを少なくした後でも、それを前面に表示します。手を貸していただければ幸いです。他に何か必要な場合はお知らせください。

デビッド

4

1 に答える 1

1

それを理解しました...絶対位置を取り除き、別のIEスタイルシートでパディングを変更する必要があります。

于 2013-02-12T20:56:53.937 に答える