我有一個菜單，我用於一個網站，它使用一些JavaScript創建一些衰落效果。我遇到的問題是，直到其中一個主要鏈接懸停後，子菜單纔可見。子菜單的樣式表呼叫display: none，頁面加載時顯然沒有顯示任何內容。我希望子菜單立即顯示，因爲它在我的設計中可見。該網站是here。自定義一個CSS和JS驅動的導航菜單
我曾試圖刪除display:none線，它使，而不是子菜單可見的所有實例這是不是很漂亮:)
任何幫助，將不勝感激。我需要以某種方式重組div嗎？當我還在css的時候，我創建了這個網站。我現在更懂得了很多，但很明顯，我還是會感到困惑：P
您可以添加此CSS規則：
#visitors.submenustyle {
display: block;
}
您應該能夠使用jQuery做到這一點很容易。你將需要添加另一個類到你的CSS，覆蓋你設置的'submenustyle'類。在一類的「主動」將具有以下屬性代碼下面的例子：
.active{display:block}
然後將其放置在沿着一個jQuery庫文件的引用你的頭以下：你可以使用谷歌託管（https：//開頭ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js）
$("ul#maintab li a").hover(function() { var getvalue = $(this).attr('rel'); $(getvalue).toggleClass("active") } );
這會給你的顯示和隱藏，你是缺少的功能。如果你想添加淡入，你就可以到的持續時間添加到腳本如下，其中數字是它需要完成的過渡時間：
$("ul#maintab li a").hover(function() { var getvalue = $(this).attr('rel'); $(getvalue).toggleClass("active", 500) } );
我相信如果你這將工作在你的rel名稱前加'＃'。
我的第一個建議是重構和使用CSS（沒有JavaScript），利用僞類的:hover。
這裏是什麼意思的例子：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" >
<head>
<title>Customizing a CSS and JS driven navigation menu</title>
<style type="text/css">
#maintab {
position:relative;
top:0px;
left:0px;
height:50px;
margin:0px;
padding:0px;
}
#maintab li {
float:left;
margin:0px;
padding:2px;
padding-bottom:22px;
list-style:none;
}
#maintab .submenustyle {
position:absolute;
top:25px;
left:0px;
display:none;
}
#maintab #visitors {
display:block;
}
#maintab li:hover .submenustyle {
display:block;
}
</style>
</head>
<body>
<ul class="basictab" id="maintab">
<li rel="visitors" rev="maintab">
<a href="#">Visitors</a>
<div class="submenustyle" id="visitors">
<a href="calendar_events.php">Calendar Events</a>
<a href="stay.php">Lodging</a>
<a href="eat.php">Dining</a>
<a href="arts.php">Arts/Heritage/Culture</a>
<a href="attractions.php">Attractions</a>
<a href="outdoor_rec.php">Outdoor Recreation</a>
<a href="shopping.php">Shopping</a>
<a href="transportation.php">Transportation</a>
<a href="resources.php">Resources</a>
<a href="request_travel_planner.php">Request Travel Planner</a>
<a href="map.php">Vicinity Map</a></div>
</li>
<li rel="planners" rev="maintab">
<a href="#">Meeting Planners</a>
<div class="submenustyle" id="planners">
<a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
<a href="request_planner.php">Request Meeting Planners Guide</a>
<a href="request_proposal.php">Request for Proposal</a></div>
</li>
<li rel="media" rev="maintab">
<a href="#">Media</a>
<div class="submenustyle" id="media">
<a href="media_form.php">Request For Media Form</a>
<a href="#"></a></div>
</li>
<li rel="members" rev="maintab">
<a href="#">Members</a>
<div class="submenustyle" id="members">
<a href="../events_news.php">News/Events</a>
<a target="_blank" href="MembershipBenefits.pdf">Member Benefits Brochure</a>
<a href="members.php">Become a Member</a>
<a href="members_directory.php">Business Directory</a>
<a href="staff.php">Contact Staff</a></div>
</li>
<li rel="about" rev="maintab">
<a href="about.php">About Us</a>
<div class="submenustyle" id="about">
<a href="about.php">About VCB</a>
<a href="contacts.php">VCB Address and Phone Numbers</a>
<a href="map.php">Vicinity Map</a>
<a href="careers.php">Careers</a></div>
</li>
<li rel="deals" rev="maintab">
<a href="deals.php">Deals</a>
<div class="submenustyle" id="deals">
<a href="deal_event.php">Capitol Experience</a>
<a href="deal_hotel.php">Hotel Packages</a>
<a href="deal_more.php">More Deals</a>
</div>
</li>
</ul>
</body>
</html>
有兩個優勢，該解決方案：
我的第二個答案是先清理你的HTML（<li>沒有rel也不是rev屬性！搬完屬性錨<a>）並使用jQuery：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Customizing a CSS and JS driven navigation menu</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style type="text/css">
#maintab {
position:relative;
top:0px;
left:0px;
height:50px;
margin:0px;
padding:0px;
}
#maintab li {
float:left;
margin:0px;
padding:2px;
padding-bottom:22px;
list-style:none;
}
.submenustyle {
display:none;
}
#visitors {
display:block;
}
</style>
<script type="text/javascript">
$(document).ready(function() {
$("#maintab li a").mouseenter(function() {
var identifier = $(this).attr("rel");
$(".submenustyle").css("display","none");
$("#"+identifier).css("display","block");
}).mouseleave(function() {
var identifier = $(this).attr("rel");
$(".submenustyle").css("display","");
});
});
</script>
</head>
<body>
<div id="nav">
<ul class="basictab" id="maintab">
<li><a href="#" rel="visitors" rev="maintab">Visitors</a></li>
<li><a href="#" rel="planners" rev="maintab">Meeting Planners</a></li>
<li><a href="#" rel="media" rev="maintab">Media</a></li>
<li><a href="#" rel="members" rev="maintab">Members</a></li>
<li><a href="about.php" rel="about" rev="maintab">About Us</a></li>
<li><a href="deals.php" rel="deals" rev="maintab">Deals</a></li>
</ul>
<div class="submenustyle" id="planners">
<a target="_blank" href="meetingplanner.pdf">Download Meeting Planners Guide</a>
<a href="request_planner.php">Request Meeting Planners Guide</a> <a href=
"request_proposal.php">Request for Proposal</a>
</div>
<div class="submenustyle" id="visitors">
<a href="calendar_events.php">Calendar Events</a> <a href="stay.php">Lodging</a>
<a href="eat.php">Dining</a> <a href="arts.php">Arts/Heritage/Culture</a> <a href=
"attractions.php">Attractions</a> <a href="outdoor_rec.php">Outdoor Recreation</a>
<a href="shopping.php">Shopping</a> <a href="transportation.php">Transportation</a>
<a href="resources.php">Resources</a> <a href="request_travel_planner.php">Request
Travel Planner</a> <a href="map.php">Vicinity Map</a>
</div>
<div class="submenustyle" id="media">
<a href="media_form.php">Request For Media Form</a> <a href="#"></a>
</div>
<div class="submenustyle" id="members">
<a href="../events_news.php">News/Events</a> <a target="_blank" href=
"MembershipBenefits.pdf">Member Benefits Brochure</a> <a href="members.php">Become
a Member</a> <a href="members_directory.php">Business Directory</a> <a href=
"staff.php">Contact Staff</a>
</div>
<div class="submenustyle" id="about">
<a href="about.php">About VCB</a> <a href="contacts.php">VCB Address and Phone
Numbers</a> <a href="map.php">Vicinity Map</a> <a href="careers.php">Careers</a>
</div>
<div class="submenustyle" id="deals">
<a href="deal_event.php">Capitol Experience</a> <a href="deal_hotel.php">Hotel
Packages</a> <a href="deal_more.php">More Deals</a>
</div>
</div>
</body>
</html>
只是爲了澄清，你想第一個（遊客）子菜單出現時頁面第一次加載，對不對？ – 2011-03-21 16:44:43
@Thomas Li：對，我需要訪客子菜單先出現，對不完全清楚抱歉。 – 2011-03-21 16:48:37
當我將鼠標懸停在......上時，我甚至沒有看到子菜單？ – 2011-03-21 17:00:17