将ul的边框颜色更改为兄弟颜色“;a“;背景颜色

Change border color of ul to siblings "a" background-color

本文关键字：颜色 兄弟 背景 ul 边框      更新时间：2023-09-26

我正在创建一个包含嵌套子菜单的菜单。每个ancor标签都有不同的背景颜色。我希望每个嵌套ul的底部边界颜色与特定组"li"中ancor标记的背景颜色相同。

我似乎已经完成了一半，但现在所有嵌套的ul都从第一个ancor标签的背景颜色中获得了相同的边框颜色。不确定我哪里错了。

<nav id="nav-main">
    <ul>
        <li><a href="">Spa Menu</a>
            <ul>
                <li><a href="">Packages</a></li>
                <li><a href="">Touch Therapy</a></li>
                <li><a href="">Hands & Feet</a></li>
                <li><a href="">Grooming</a></li>
                <li><a href="">Specialised Treatments</a></li>
            </ul>
        </li>
        <li><a href="">Bookings</a>
            <ul>
                <li><a href="">Packages</a></li>
                <li><a href="">Touch Therapy</a></li>
                <li><a href="">Hands & Feet</a></li>
                <li><a href="">Grooming</a></li>
                <li><a href="">Specialised Treatments</a></li>
            </ul>
        </li>
        <li><a href="">Vouchers</a></li>
        <li><a href="">Gallery</a></li>
    </ul>
</nav><!-- END #nav-main -->

css

#nav-main {
    float: right;
    position: relative;
    top: 8em;
}
#nav-main > ul > li {
    float: left;
    position: relative;
}
#nav-main > ul > li a {
    color: white;
    text-transform: uppercase;
    font-family: 'Brandon Grotesque', sans-serif;
    font-weight: bold;
    font-size: 18px;
    padding-left: 2em;
    padding-right: 2em;
}
#nav-main > ul > li ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 2;
    border-bottom: 8px solid ;
}
#nav-main > ul > li ul li a {
    white-space: nowrap;
    text-align: left;
    background: #fff;
    color: #b0b0b0;
    font-size: 16px;
}
#nav-main > ul > li:nth-child(1) > a {
    background-color: #5ac6eb;
}
#nav-main > ul > li:nth-child(2) > a {
    background-color: #bcd34d;
}
#nav-main > ul > li:nth-child(3) > a {
    background-color: #5ac6eb;
}
#nav-main > ul > li:nth-child(4) > a {
    background-color: #5ac6eb;
}

和js让它工作

jQuery(document).ready(function($){
    'use strict';
    var child = $('#nav-main ul >li >ul');
    child.css({
        'border-color': child.siblings('a').css('background-color')
    });
});

试试这个：

$('#nav-main ul > li > ul').each(function() {
   $(this).css('border-color', $(this).prev('a').css('background-color'));
});

http://jsfiddle.net/zneapo43/

不过，我不得不诚实地说，它看起来很乱。

相关文章：