0

我知道有 400 个这样的线程，但似乎每个人的代码都有点不同：我已经设置了我的 CSS，以便每次您将鼠标悬停在导航中的页面上时都会出现一个蓝条，并且当​​该链接页面被点击，蓝条停留在它上面。当我单击带有下拉菜单的链接之一时，我无法让它停留在父页面上。我可以让一个蓝色条出现在下拉列表中（大声笑），但根本无法让它留在父母身边。我已经尝试了所有祖先的技巧，所有的菜单当前技巧，我只是束手无策。我将永远感激任何帮助。

        /*** ----------------------------CHANGE THE COLOR OF THE SQUARES UNDERNEATH THE NAVIGATION BAR HERE ------------------------------- ***/
    nav ul li a:hover, nav ul li a.current {
        border-bottom: 5px solid #00BCF2;
        color: #00BCF2;
    }

    /*** THIS WILL PROBABILY GET US TO WHERE WE WANT TO BE WITH ADDING AND HOVERING THE PARENT LINK 



     nav ul li:hover > a, .current-menu-ancestor > a, .current-menu-parent > a {
            background-color: #536f9e !important;
            color: #ffffff !important;
        }
        ***/

    /*** add publications from box site level 1 here ***/
    /**** Dropdown ****/
    /*** ----------------------------- CHANGE THE LOGO OF THE DROPDOWN ARROW ------------------------------ ***/



    /*** ----------------------------- CHANGE THE height OF THE DROPDOWN menu ------------------------------ ***/

    .dropdown{
        padding: 14px 16px 37px 10px;
        background: url('images/dropdown_icon.png') no-repeat 99% 21px;
    }
    .dropdown:hover{
        border-bottom: none;
    }
    nav ul ul{
        display: none;
        margin: 0;
        position: absolute;
        background-color: #000;
        z-index: 1;

    }
    nav ul li:hover  ul{
        display: block;
            opacity: 0.9;


    }
    nav ul li ul li{
        margin: 0;



    }
    /*** ----------------------------- CHANGE THE WIDTH OF THE DROPDOWN MENU ------------------------------ ***/
    nav ul li ul li a{ 
        margin: 0;
        padding: 5px 10px;
        width: 100px;
    }
    /*** ----------------------------- CREATE BLUE BARS INSIDE OF DROPDOWN ------------------------------ ***/

    nav ul li:hover ul li a:hover, nav ul li:hover ul li a.current{
        border-bottom: none;
    }

根据要求，我开头的 HTML --> 标头是：

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>XXXXXX</title>

    <link rel="stylesheet" href="style.css" type="text/css" media="screen, projection" />

    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
    $(function(){
    $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
    $(this).addClass('current');
    }
    <!--END OF HEADER -->
    });
    });
    </script>
</head>
<body>
    <div id="wrapper">

        <!--========================== L O G O  &   N A V    B A R ============================-->
        <header>
            <div id="logo">
                <a href="home.html"><img src="images/xylophone.png" alt="YouRock" /></a>
            </div>
            <nav>
                <ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Founders</a></li>
                    <li><a href="#" class="dropdown">Pipeline</a>
                        <ul>
                        <ul>
                            <li><a href="timeline.html">Timeline</a></li>
                            <li><a href="Phases.html">Phase I / II</a></li>
4

2 回答 2

0

好吧，检查活动链接是否在下拉块内的最简单方法是设置一个类。<li>此外，将一个类设置为包含.dropdown链接以轻松实现它可能很有用：

<li class="drop-li"><a href="#" class="dropdown">Pipeline</a>
        <ul>
            <li><a href="timeline.html" class="dropdowned">Timeline</a></li>
            <li><a href="Phases.html" class="dropdowned">Phase I / II</a></li>
        </ul>

现在您可以像这样突出显示所需的父链接：

$(function(){
    $('a').each(function() {
    if ($(this).prop('href') == window.location.href) {
        if ($(this).attr('class') == 'dropdowned'){
            $(this).closest('.drop-li').children('a').addClass('current');
        }
        else{
            $(this).addClass('current');
        }
    }
}

这样，无论您有多少下拉菜单以及链接和模板的名称是什么，它都会起作用。

于 2015-10-09T21:51:58.617 回答
0

在timeline.html 和phases.html 上放这个

<ul>
                    <li><a href="home.html">Home</a></li>
                    <li><a href="about.html">About</a></li>
                    <li><a href="portfolio.html">Founders</a></li>
                    <li><a href="#" class="dropdown" class="current">Pipeline</a>
                        <ul>
                        <ul>
                            <li><a href="timeline.html">Timeline</a></li>
                            <li><a href="Phases.html">Phase I / II</a></li>

，不要把它放在其余部分，等中提琴

于 2015-10-09T21:18:19.457 回答