やあみんな私は次のものを持っています:
<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がそれを最も前の位置であると見なしていることに気付きました:絶対; インデックスを少なくした後でも、それを前面に表示します。手を貸していただければ幸いです。他に何か必要な場合はお知らせください。
デビッド