Question

我正在制作一个菜单，其中包含一个带有更改line-height

的子菜单

但是我不能阻止这个行高影响我的孩子（子菜单）li，

我尝试了ul.nav > li，但它仍会影响下方的菜单栏。

$(window).on("scroll resize load", function () {
    if($(window).width() > 863) {
        wide();

        if ($(window).scrollTop() > 75) headerLow();
        else headerHigh();
    } else {
        headerLow();
        thin();
    }
});

var headerHigh = function () {
    $('#head').removeClass('mini').css('height', '75' );
};

var headerLow = function () {
    $('#head').addClass('mini').css('height', '60' );
};

var thin = function() {
    $('#slider').css({ 'padding-top' : '60px'});
};

var wide = function() {
    $('#slider').css( 'padding-top' , '78px');
};

<div id="head">
    <div class="container">
        <ul class="nav pull-right">
            <li><a href="#"></a>
                <ul>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                    <li><a href="#"></a></li>
                </ul>
            </li>
            <li><a href="#"></a></li>
            <li><a href="#"></a></li>
        </ul>
    </div>
</div>

.nav li { line-height: 80px;transition: line-height 0.5s ease; }  
.nav li > ul li { line-height: 10px; }
.mini ul.nav > li, .mini .logo { line-height: 60px; }
.mini h1 { font-size: 2em; }

问题是当我向下滚动时，第二个菜单会受到.mini的影响。 Live demo

Answer 1

使用li:nth-child(3) { line-height: 60px; }

注意：这会影响内部情况，而不会影响子情节。

阅读this以了解nth-child如何运作。

或

让您的li 类并使用该类应用CSS。

<ul>
    <li class="menuLI">Menu</li>
    <li class="menuLI">About Us</li>
    <li class="menuLI">Contact Us
        <ul>
            <li class="subMenuLI">Starters</li>
            <li class="subMenuLI">Breakfast and Brunch</li>
        </ul>
    </li>
</ul>

以下是更新后的JSFiddle Link

注意：以下是我更新的内容。

.nav li > ul li{ line-height: 40px; } // Updated
.nav li ul { line-height: 0px; } // Added

Answer 2

使用选择器ul.nav > li是正确的。该选择器指的是您希望它引用的元素，如JSFiddle所示。

我认为问题是由于继承造成的。无论您选择哪种元素，the child li elements will inherit the line-height property。要解决此问题，您只需重新指定一个不会影响您的设计的更合适的line-height值。

我希望这能回答你的问题！

仅影响父LI

2 个答案: