菜单不会像在 IE7 中那样下拉。谁能帮忙……拜托!?
您必须单击标题才能显示它,否则菜单将被隐藏。
下面的CSS:
#top_nav{ width: 810px; float: left; background: #DADADA; margin: 0; position: relative; z-index: 100; padding: 0;}
#top_nav ul {margin: 0 0 0 10px; padding: 0; list-style: none; float: left; width: 800px; height: 40px; }
#top_nav li {float: left; margin: 0; padding: 0; width: auto; font-weight: normal; cursor: pointer; white-space: nowrap; font-size: 100%; color: #000; line-height: 150%;}
#top_nav li a{text-decoration: none; color: #000; width: auto; display: block; padding: 8px 18px 7px 18px; line-height: 25px; text-align: center; font-weight: normal; }
#top_nav li ul {position: absolute; left: -999em; height: auto; width: 234px; w\idth: 224px; font-weight: normal; padding: 0px 0 0 0; margin: 0 0 0 0; border-bottom: 1px solid #aaa; }
#top_nav li li {padding: 0; background-color: #DADADA; font-size: 90%; line-height: 120%;}
#top_nav li li a{line-height: auto; text-align: left; width: 212px; w\idth: 202px; padding: 3px 10px; border-top: 1px solid #aaa; border-left: 1px solid #aaa; border-right: 1px solid #aaa; }
#top_nav li li a:hover{ background-color: #92D400; color: #fff;}
#top_nav li:hover ul ul, #top_nav li:hover ul ul ul, #top_nav li.sfhover ul ul, #top_nav li.sfhover ul ul ul {left: -999em;}
#top_nav li:hover ul, #top_nav li li:hover ul, #top_nav li li li:hover ul, #top_nav li.sfhover ul, #top_nav li li.sfhover ul, #top_nav li li li.sfhover ul { left: auto;}
#top_nav li:hover, #top_nav li.sfhover, #top_nav a.active{ background-color: #92D400; }
#sub_nav{ background: #002F5F; float: left; width: 810px; margin: 0; }
#sub_nav ul{ float: left; width: 790px; margin: 0 0 0 10px; padding: 0; list-style: none; }
#sub_nav li{ float: left; margin: 0; padding: 0; font-size: 90%; font-weight: bold; text-align: center; }
#sub_nav li a{ color: #fff; display: block; height: 105px; padding: 8px 30px 0 30px; text-decoration: none; }
#sub_nav li a:hover,
#sub_nav li a.active{ background-color: #DADADA; color: #002F5F; }
#section_nav{ float: left; margin: 1px 0 0px 0; width: 810px; background: #002F5F; }
#section_nav ul{ float: left; width: 808px; margin: 0; padding: 0; list-style: none; }
#section_nav li{ float: left; margin: 0; padding: 0; font-size: 70%; font-weight: bold; }
#section_nav li a{ color: #fff; display: block; padding: 8px 10px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; text-decoration: none; }
#section_nav li a:hover,
#section_nav li a.active{ background: #92D400;}
#section_nav img{ float: left; margin: 2px 0 0 2px;}
下拉菜单在 IE8 中不会自动工作,您还必须单击标题才能显示。
HTML 如下所列:
<link href="css/stylesheet.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.1.7.1.js"></script>
<link rel="stylesheet" href="js/nivo-slider/nivo-slider.css" type="text/css" media="screen" />
<script src="js/nivo-slider/jquery.nivo.slider.pack.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(window).load(function() {
var total = jQuery('#slider img').length;
var rand = Math.floor(Math.random()*total);
jQuery('#slider').nivoSlider({
animSpeed: 1000, // Slide transition speed
pauseTime: 4000, // How long each slide will show
directionNav: false,
effect: 'boxRainGrow'
});
});
</script>
<script type="text/javascript">
$(function(){
$('a[href*=#]').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'')
&& location.hostname == this.hostname) {
var $target = $(this.hash);
$target = $target.length && $target || $('[name=' + this.hash.slice(1) +']');
if ($target.length) {
var targetOffset = $target.offset().top;
$('html,body').animate({scrollTop: targetOffset}, 500);
return false;
}
}
});
});
</script>
</head>
<body>
<a name="top"></a>
<div id="wrap"><!-- START OF WRAP -->
<div id="header"><!-- START OF HEADER -->
<a href="http://thehub/livelinkprod/llisapi.dll/intranet/9555529/" class="hub"><img src="images/buttons/btn_back_to_hub.png" width="117" height="27" border="0"></a>
<img src="images/txt/txt_global_energy_transformation.png" width="361" height="43" id="logo">
<br clear="all">
<div id="slider" class="nivoSlider">
<a href="http://thehub/livelinkprod/llisapi.dll/intranet/9530498//index.htm?nodeid=9530361&vernum=0" target="_blank"><img src="images/headers/New-org-chart.png" width="730" height="162"></a>
<a href="http://thehub/livelinkprod/llisapi.dll/fetch/2000/9697/5358303/9288735/appointments-vacancies.html"><img src="images/headers/New-appointments.png " width="730" height="162"></a></div>
</div><!-- END OF HEADER -->
<div id="top_nav"><!-- START OF TOP NAVIGATION -->
<ul>
<li><a href="index.html" class="active">Home</a></li>
<li><a href="#">GET Information</a>
<ul>
<li><a href="latest-news.html">Latest news</a></li>
<li><a href="appointments-vacancies.html">Appointments & vacancies</a></li>
<!-- <li><a href="blogs.html">Blogs</a></li> -->
<li><a href="change-champions-smes.html">Change champions & SMEs</a></li>
<li><a href="stakeholders.html">Stakeholders</a></li>
</ul>
</li>
<li><a href="get-involved.html">GET Involved</a></li>
<li><a href="#">GET Answers</a>
<ul>
<li><a href="get-answers.html">General</a></li>
<li><a href="get-answers-structure.html">Service line-specific</a>
</ul>
</li>
<li><a href="mailto:get@lr.org?subject=Global Energy Transformation - Site Enquiry">GET in touch</a></li>
<li><a href="service-lines.html">Service lines/functions</a>
<ul>
<li><a href="inspection-services.html">Inspection services</a></li>
<li><a href="compliance-services.html">Compliance services</a></li>
<li><a href="asset-integrity-services.html">Asset integrity services</a></li>
<li><a href="drilling-integrity-services.html">Drilling integrity services</a></li>
<li><a href="consultancy-services.html">Consultancy services</a></li>
<li><a href="business-development-services.html">Business development services</a></li>
<li><a href="business-services.html">Business services</a></li>
<li><a href="finance.html">Finance</a></li>
<li><a href="human-resources.html">Human resources</a></li>
<li><a href="technology.html">Technology</a></li>
<li><a href="strategic-projects.html">Strategic projects</a></li>
</ul>
</li>
</ul>
</div><!-- END OF TOP NAVIGATION -->