Question

我有一个我用于网站的菜单，它使用一些javascript来创建一些淡化效果。我遇到的问题是，在其中一个主要链接悬停之前，子菜单不可见。子菜单的样式表调出display: none，在页面加载时显然没有显示任何内容。我希望子菜单立即显示，因为它在我的设计中可见。该网站为here。

我试图删除display:none行，它会显示子菜单的所有实例，而不是非常漂亮：）

任何帮助将不胜感激。我需要以某种方式重组div吗？当我还是css的樱桃时，我创建了这个网站。我现在知道的很多，但显然，我仍然感到困惑：P

Answer 1

您可以添加此css规则：

#visitors.submenustyle {
 display: block;
}

Answer 2

您应该可以使用JQuery轻松地完成此操作。您需要在CSS中添加另一个类来覆盖您设置的“submenustyle”类。在下面的示例中，“active”类将具有以下属性代码：

.active{display:block}

然后将以下内容放在标题中，并引用Jquery库文件：您可以使用Google托管（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) } );

我相信如果你在你的名字之前添加'＃'，这将有效。

Answer 3

我的第一个建议是重新构建并使用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>

此解决方案有两个优点：

这是一种更传统的方式来构建导航菜单。
即使禁用或崩溃JavaScipt

Answer 4

我的第二个答案是首先清理您的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>

自定义CSS和JS驱动的导航菜单

4 个答案: