Question

这是我的css ...一段时间后写了这篇文章，它完全适用于IE / Firefox / Chrome并且最近回到了它，现在很惊讶它不会在IE中显示我的下拉导航。帮助

/* ANYTHING UNDEFINED */
*
{
margin:0px;
border:none;
}    

/* CONTENT WRAPPER */ 
#contentwrapper {
margin-left: auto;
margin-right: auto;
margin-bottom:50px;
width: 800px;
border:1px solid black;
background-image:url('contentbg.png');
}

 /* IMAGE GALLERY */
 div.img
 {
 margin:2px;
 margin-left:auto;
 float:left;
 text-align:center;
}
div.img img
{
 display:inline;
border:1px solid black;
 }
div.img a:hover img
 {
 border:2px solid #0000ff;
 }
 div.desc
 {
 text-align:center;
 font-weight:normal;
 width:120px;
 margin:2px;
  }  /**** ^^^END IMG GALLERY^^^ ****/



 /* TITLE PANEL */
 #titlepane {
background-color: white;
background-image:url(badgesketch.jpg);
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
text-align:center;
width: 800px;
\width: 800px /* IE9 */
 }
/* LEFT ALIGN ANYTHING WITH LA ID'S */
#la{
text-align:left;
}

/* BODY TEXT AND CONTENT */
#btext {
margin-top:50px;
min-height:500px;
text-align:CENTER;
margin-left:20px;
margin-right:20px;
margin-bottom:20px;
}

 /* NAVBAR DIV */
 #navbar {
 width:800px;
 \width:800px;
 }

 /* NAV ID'S */
 #nav {
background-image:url('navbarbg.png');
list-style: none;
font-weight: bold;
/* Clear floats */
float: right;
width: 760px;
/width:800px;
height:45px;
/* Bring the nav above everything else--uncomment if needed.
 position:relative;
 z-index:5;
 */
     }

    /* NAV LI'S */
    #nav li {
float: left;
margin-right: 10px;
position: relative;

       }

 /* TOP LINKS ACROSS THE NAVBAR (NON-DROPDOWNS) */
 #top {
 margin-top:7px;
 margin-bottom:7px;
 }

 /* FIRST NON-DROPDOWN LINK (CENTERING) */
 #first{
 margin-left:35px;
 /margin-left:73px;
 margin-top:7px;
 margin-bottom:7px;
 }

 /* FOOTER */
 #foot{
 text-align:center;
 border-top: 1px solid black;
 background-color:white;
 margin:0px;
 padding:10px;
 }

 /* LINKS WITH NAV ID'S */
 #nav a {
display: block;
padding: 5px;
color: white;
background: black;
border: 1px solid white;
text-decoration: none;
text-align:center;
z-index:400;
 }

 /* HOVERED LINKS WITH NAV ID'S */
 #nav a:hover {
color: red;
background: #000262;
text-decoration: underline;

 }
 /* UL'S WITH NAV ID'S */
 #nav ul {
background: black; /* Background color of the dropdown */
background: rgba(255,255,255,0); /* Transparency of the Background*/
list-style: none;
position: absolute;
left: -9999px; /* Hide the dropdown off-screen when not needed */
 }

 /* UL LI'S WITH NAV ID'S */
 #nav ul li {
padding-top: 0px; /* spacing between the li's */
float: none;
 }

 /* UL LINKS WITH NAV ID'S */
 #nav ul a {
white-space: nowrap; /* No text wrapping keeps links on one line*/
 }

 /* HOVERED LI'S WITH NAV ID'S (DISPLAYING DROPDOWNS) */
 #nav li:hover ul { /* Display the dropdown on hover */
left: -60px; /* Bring back on-screen when needed -60px is roughly centered */
 }

 /* HOVERED LI'S WITH NAV ID'S (TOP LINK HOVERED) */
 #nav li:hover a { /* Top link remains hovered */
background: black;
text-decoration: underline;
 }

 /* HOVERED LI'S WITH NAV ID'S (REMOVING EFFECTS) */
 #nav li:hover ul a { /* Remove effects */
text-decoration: none;
 }

 /* HOVERING OVER DROPDOWN LI'S WITH NAV ID'S */
 #nav li:hover ul li a:hover { /* What happens when you hover over a dropdown link*/
background:#000262;
 }

我尝试更改z-index，但没有效果。谢谢你的帮助。

Answer 1

你错过了一些位置：相对声明。使用菜单和菜单下的div在div上添加它们

IE中的下拉导航隐藏/不工作

1 个答案: