我正在尝试制作一个网站,当我对其进行测试时,导航栏无法与 Internet Explorer 一起使用,但它可以与 Chrome 和 Firefox 一起使用。在 IE 中,将鼠标悬停在上方时,栏不会下降。
这是html:
<head><!--CSS Linking, Icon, Title, etc.//-->
<link type="text/css" rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="/favicon.ico">
</head>
<nav><!-- Creates the Navigation Bar //-->
<ul>
<li><a href="/home">Our Troop</a>
<ul>
<li></li>
<li><a href="/about/location">About Us</a></li>
<li><a href="/about/history">Calendar</a></li>
<li><a href="/about/meetings">Meetings</a></li>
<li><a href="/about/joining">How to Join</a></li>
<li><a href="/about/contact">How to contact us</a></li>
</ul>
</li>
<li><a href="/leadership">Leadership</a>
<ul>
<li><a href="/leadership">Leadership roles in our Troop</a></li>
<li><a href="/leadership/youth">Current Youth Leadership</a></li>
<li><a href="/leadership/adult">Current Adult Leadership</a></li>
</ul>
</li>
<li><a href="/scouting">About Scouting</a>
<ul>
<li></li>
<li><a href="/scouting/whatis">What is Scouting</a></li>
<li><a href="/scouting/history">History of Scouting</a></li>
<li><a href="/scouting/ranks">Scouting Ranks</a></li>
<li><a href="/scouting/oath_law">The Scout Oath and Law</a></li>
<li><a href="/scouting/sign_salute">The Scout sign and Salute</a></li>
<li><a href="/scouting/motto_slogan">The Scout Motto and Slogan</a></li>
<li><a href="/scouting/uniform">The Scout Uniform</a></li>
</ul>
</li>
<li><a href="/skills">Skills and Scoutcraft</a>
<ul>
<li><a href="/skills/full_listings">Complete Listing of Skill Guides</a></li>
<li><a href="/skills/camping">General Camping</a></li>
<li><a href="/skills/firstaid">Firstaid</a></li>
<li><a href="/skills/ropecraft">Ropes, Knots, and Lashing</a></li>
<li><a href="/skills/orienteering">Orienteering</a></li>
<li><a href="/skills/backpaking">Backpacking</a></li>
<li><a href="/skills/firemaking">Firemaking</a></li>
<li><a href="/skills/tools">Tools</a></li>
<li><a href="/skills/wildlife">Wildlife</a></li>
<li><a href="/skills/watercraft">Watercraft</a></li>
</ul>
</li>
<li><a href="/skills">More Skills and Scoutcraft</a>
<ul>
<li><a href="/skills/full_listings">Complete Listing of Skill Guides</a></li>
<li><a href="/skills/camping">hiking</a></li>
<li><a href="/skills/firstaid">Being prepared</a></li>
<li><a href="/skills/ropecraft">cooking outdoors</a></li>
<li><a href="/skills/orienteering">shelter building</a></li>
<li><a href="/skills/backpaking">equipment</a></li>
<li><a href="/skills/firemaking">Firemaking</a></li>
<li><a href="/skills/tools">Tools</a></li>
<li><a href="/skills/wildlife">Wildlife</a></li>
<li><a href="/skills/watercraft">Watercraft</a></li>
</ul>
</li>
<li><a href="/other">Other</a>
<ul>
<li><a href="/skills/full_listings">Links</a></li>
<li><a href="/skills/camping">Uniform Chest</a></li>
<li><a href="/skills/forms">Forms</a></li>
</ul>
</li>
</ul>
</nav>
这是CSS:
/* START NAV MENU */
nav {
background-color: #004700;
height:40px;
}
nav ul {
font-family: Arial, Verdana;
font-size: 20px;
margin: 0;
padding: 0;
list-style: none;
}
nav ul li {
display: block;
position: relative;
float: left;
}
nav li ul {
display: none;
}
nav ul li a {/* top level*/
display: block;
text-decoration: none;
padding: 7px 15px 3px 15px;
background: #165016;
color: #ffffff;
margin-left: 1px;
white-space: nowrap;
height:30px; /* Width and height of top-level nav items */
text-align:center;
}
nav ul li a:hover { /* highlighted top level items */
background: #617F8A;
}
nav li:hover ul {
display: block;
position: absolute;
height:30px;
}
nav li:hover li {/* sub items*/
float: none;
font-size: 15px;
}
nav ul li ul li a:hover { /* highlighted sub items*/
background: #617F8A;
}
nav li:hover li a:hover { /*highlighted subitems*/
background: #95A9B1;
}
nav ul li ul li a {/*sub items*/
text-align:left; /* Top-level items are centered, but nested list items are left-aligned */
}
/* END NAV MENU */