CODEWITHSUNDEEP
htmlcsscss-selectors
Joe Ainsworth
Joe Ainsworth

Reputation: 571

Multiple unordered lists within a div ID

I'm having an issue. My intention to has another UL list in my footer but I would like to assign different symbols to the second navigation using css:before.

However, I am having an issue getting the following code to work if I remove .mini-nav the styling is applied correctly.

#footer {
    margin: 25px 0 25px 0;
    text-align: center;
    color: #8F8F8B; 
    font-size: 0.8em;
    text-align: center;
}

#footer a {
    text-decoration: none;
    color: #CCDDDD;
}

#footer a:hover {
    border-bottom: 2px solid #FFFFFF;
    padding-bottom: 3px;
    color: #FFFFFF;
}

#footer .mini-nav ul li {
    display: inline;
}

#footer .mini-nav ul li+li:before {
    content: ' | ';
    margin: 10px;
}

<div id="footer" class="sixteen columns">
    <ul class="mini-nav">
        <li><a href="#">Gallery</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Studio</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</div

Upvotes: 0

Views: 218

Answers (1)

drip
drip

Reputation: 12933

Your mistake is here 

#footer .mini-nav ul li+li:before

you are targeting the .mini-nav ul (and there is no such thing), a.k.a it should be 

#footer ul.mini-nav li+li:before

Upvotes: 1

Related Questions