0

I'm coding a website for uni right now and it's going pretty well, with the exception of a dropdown menu issue. I've given the li property an ID of "selected" on some menu options (when the user is on the page in question), so that it changes colour to a dark pink.

However, the dropdown options underneath whatever has the li id of "selected" all turn dark pink too. When I add a closed li tag at the end of "about" in the html, the dropdown doesn't appear at all.

I'll post the relevant html and CSS as well as screenshots, hopefully someone could help me, please!

Here's all of the dropdown code:

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#ffeff8;
}
 
.menu {
    width:1000px;
    margin:0px auto;
}
 
.menu li {
    margin:0px;
    list-style:none;
    font-family:"Luna";
    text-transform: lowercase;
    border:1px solid #ed85c4; 
}
 
.menu a {
    transition:all linear 0.15s;
    color:#ed85c4;
    background:#ffeff8;
}
 
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#d771ae;
}
 
.menu .arrow {
    font-size:10px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:14px;
}
 
.menu > ul > li > a {
    padding:3px 40px;
    display:inline-block;
    text-shadow:0px 0px 0px rgba(0,0,0,0.4);
}
 
.menu > ul > li:hover > a, .menu > ul > a {
    background:#f1dae8;
}

.menu > ul > li#selected a{
    color: #ffeff8;
    background: #c864a1;
}

 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:100%;
    padding:0px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 0px 0px rgba(0,0,0,0.2);
}
 
.sub-menu li {
    display:block;
    font-size:12px;
    text-transform: lowercase;
    font-kerning: auto;
}
 
.sub-menu li a {
    padding:10px 30px;
    display:block;
    background: #ffeff8;
}
 
.sub-menu li a:hover, .sub-menu a {
    background: #f1dae8;
}
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li id="selected">
                <a href="/about-us.html">about <span class="arrow">&#9660;</span></a>
 
                  <ul class="sub-menu">
                    <li><a href="/history.html">history</a></li>
                    <li><a href="/values.html">values</a></li>
                    <li><a href="/truck.html">the truck</a></li>
                    <li><a href="/produce.html">produce info.</a></li>
                </ul>
            </li>

2 Answers 2

1

You did not select correctly the link below the #selected list item.

.menu > ul > li#selected a /*This selects all links below the selected li, including links in child list items*/

should be

.menu > ul > li#selected > a /* this selects the immediate descendent link only */
1
  • Great, thank you! I'm a newbie to all of this so the little things go amiss. Cheers. Apr 28, 2016 at 10:10
1

/*----- Menu Outline -----*/
.menu-wrap {
    width:100%;
    box-shadow:0px 1px 3px rgba(0,0,0,0.2);
    background:#ffeff8;
}
 
.menu {
    width:1000px;
    margin:0px auto;
}
 
.menu li {
    margin:0px;
    list-style:none;
    font-family:"Luna";
    text-transform: lowercase;
    border:1px solid #ed85c4; 
}
 
.menu a {
    transition:all linear 0.15s;
    color:#ed85c4;
    background:#ffeff8;
}
 
.menu li:hover > a, .menu .current-item > a {
    text-decoration:none;
    color:#d771ae;
}
 
.menu .arrow {
    font-size:10px;
    line-height:0%;
}
 
/*----- Top Level -----*/
.menu > ul > li {
    float:left;
    display:inline-block;
    position:relative;
    font-size:14px;
}
 
.menu > ul > li > a {
    padding:3px 40px;
    display:inline-block;
    text-shadow:0px 0px 0px rgba(0,0,0,0.4);
}
 
.menu > ul > li:hover > a, .menu > ul > a {
    background:#f1dae8;
}

.menu > ul > li#selected >a{
    color: #ffeff8;
    background: #c864a1;
}

 
/*----- Bottom Level -----*/
.menu li:hover .sub-menu {
    z-index:1;
    opacity:1;
}
 
.sub-menu {
    width:100%;
    padding:0px 0px;
    position:absolute;
    top:100%;
    left:0px;
    z-index:-1;
    opacity:0;
    transition:opacity linear 0.15s;
    box-shadow:0px 0px 0px rgba(0,0,0,0.2);
}
 
.sub-menu li {
    display:block;
    font-size:12px;
    text-transform: lowercase;
    font-kerning: auto;
}
 
.sub-menu li a {
    padding:10px 30px;
    display:block;
    background: #ffeff8;
}
 
.sub-menu li a:hover, .sub-menu a {
    background: #f1dae8;
}
<div class="menu-wrap">
    <nav class="menu">
        <ul class="clearfix">
            <li id="selected">
                <a href="/about-us.html">about <span class="arrow">&#9660;</span></a>
 
                  <ul class="sub-menu">
                    <li><a href="/history.html">history</a></li>
                    <li><a href="/values.html">values</a></li>
                    <li><a href="/truck.html">the truck</a></li>
                    <li><a href="/produce.html">produce info.</a></li>
                </ul>
            </li>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.