2 different styled <ul><li> on one page?

[mlegg]

I have one page that I'm making and I am stuck. The responsive navbar uses the `<ul><li>` and I want a different style below on the page. I didn't think much about it at first until I got this:



What can I change to make the general list items in the page, not the menu, to look different?
here is the live page

here is my CSS code

 /* General List */
    ul.b {
    list-style-type: disc;
    }

    /* Responsive Menu */
    #menuBackground {
        background:#5EA5B9;
        width:100%;
        height:50px;
        text-align: center;
     }
    #menuContainer {
        text-align: center;
        position: absolute;
        width: 90%;
        z-index: 1;
    }
    /*Strip the ul of padding and list styling*/
    ul {
        list-style-type:none;
        margin:0;
        padding:0;
    }

    /*Create a horizontal list with spacing*/
    li {
        display:inline-block;
        vertical-align: top;
    }

    /*Style for menu links*/
    li a {
        display:block;
        min-width:140px;
        height:50px;
        text-align:center;
        line-height:50px;
        font-family:Georgia;
        color:#fff;
        background:#5EA5B9;
        text-decoration:none;
        font-size: 1rem;
    }

    /*Hover state for top level links*/
    li:hover a {
    color: #036;     
         background:#fff
    }

    /*Prevent text wrapping*/
    li ul li a {
        width:auto;
        min-width:100px;
        padding:0 20px
    }

    /*Style 'show menu' label button and hide it by default*/
    .show-menu {
        font-family:Georgia;
        text-decoration:none;
        color:#fff;
        background:#5EA5B9;
        text-align:center;
        padding:16px 0;
        display:none;
        width:100%!important
    }

    /*Hide checkbox*/
    input[type=checkbox] {
        display:none
    }

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu {
        display:block;
        margin:0 auto
    }

    /*Responsive Styles*/
    @media screen and (max-width : 760px) {
        /*Make dropdown links appear inline*/
        ul {
            position:static;
            display:none;
          
          
            white-space: initial;
        }
        
        /*Make all menu links full width*/
        ul li,li a {
            width:100%
        }
        
        /*Display 'show menu' link*/
        .show-menu {
            display:block
        }
    }

<div id="menuBackground">
        <div id="menuContainer">
            <label for="show-menu" class="show-menu">Show Menu</label>        <input type="checkbox" id="show-menu" role="button" />
            <ul id="menu">
                <li><a href="index.html">Home</a>
                </li>
                <li><a href="accommodations.html">Accommodations</a>
                </li>
                <li><a href="amenities.html">Amenities</a>
                </li>
                 <li><a href="rates.html">Rates</a>
                </li>
                 <li><a href="links.html">Links</a>
                </li>
                <li><a href="contact.html">Contact</a>
                </li>
             </ul>
        </div>
    </div>

[jscheuer1]

Your image didn't come through real well, best to link to a remote image. The forum often condenses uploaded images too much.

In cases like this I usually resort to class distinctions of one sort or another. Sometimes id or element antecedent selectors will suffice/work better.

Anyways this question almost answers itself. The tricky part can be that sometimes one has to be more specific than seems necessary to achieve the desired result.

I'm not sure the exact result you want, but try, for example, this rule:

ul.b a {
    background: red;
}

I'm shooting around here, if I missed something, or you can be more specific, just ask or add on. If this gets it for you though (is enough of a spark) - Great!

[mlegg]

I wasn't sure how well the image show that's why I linked to the temporary live page

[jscheuer1]

OK (kinda got that), did what I said help?

[mlegg]

no and I've been messing with it for the whole day too.

[jscheuer1]

That (what I suggested) does make a difference in the look of the the ul.b a elements as opposed to the top menu links. I'm not saying it's exactly the difference you want, but it should light the way.

However, if both of those were as you already wanted them and it's some other ul a elements (or something else) you want to affect, then you need an additional class (most likely) for those or some other way of distinctly selecting them. CSS (cascading style sheets) isn't as complicated as one might think. It cascades. If you want to interrupt that cascading effect, you need a distinct way of differentiating those elements you don't want to have following other rules.

If that still doesn't turn the light on (and/or I'm missing the question) In simplest terms - What exactly on the page do you want to look exactly a certain way? (always easier to answer than a general question)

[Beverleyh]

It looks like the CSS you provided, if it is only meant to target the menu, is way too general, so instead it affects all lists on the page.

Building on what John said about needing a way to distinctly select the elements that you want affecting by the CSS (be it the menu or some other lists/elements)...

...To only target the menu, try making the menu CSS more specific (see my note at the bottom of this post re: specificity in CSS). For example, the menu is contained inside #menuContainer, so prefix all the general selectors with that so that only the ul and li elements within #menuContainer get the menu styles.

Basic example;

From ul { /* styles here */ }

To #menuContainer ul { /* styles here */ }

Then you have your main page content sat inside a #content element (that the menu is outside of) so you can target the ul/li elements located inside #content with a #content parent selector, like this #content ul { /* styles here */ }

Note: Learn more about "specificity in CSS" https://www.google.co.uk/search?q=un...ificity+in+CSS

[styxlawyer]

In addition to what Beverley wrote, I do find this a little bizarre:

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu {
        display:block;
        margin:0 auto
    }

It might be difficult to navigate the site for a user who accidentally clicks on an invisible checkbox and then finds that the menu disappears!

[mlegg]

Thanks, that was what was in the code when I found it. I wasn't exactly sure what it did, and didn't bother to search it.

[Beverleyh]

In addition to what Beverley wrote, I do find this a little bizarre:

    /*Show menu when invisible checkbox is checked*/
    input[type=checkbox]:checked ~ #menu {
        display:block;
        margin:0 auto
    }

It might be difficult to navigate the site for a user who accidentally clicks on an invisible checkbox and then finds that the menu disappears!

That's the style for the menu - to open it when the checkbox is checked.

The actual checkbox is hidden with this, so it can't accidentally be triggered with a misplaced click/tap;

    /*Hide checkbox*/
    input[type=checkbox] {
        display:none
    }

The part that triggers the menu activation is the checkbox label - that's the part which is visible and can receive a click/tap, and its styled with this;

    /*Style 'show menu' label button and hide it by default*/
    .show-menu {
        font-family:Georgia;
        text-decoration:none;
        color:#fff;
        background:#5EA5B9;
        text-align:center;
        padding:16px 0;
        display:none;
        width:100%!important
    }

This technique is called "the checkbox hack" and is a way of simulating click activated interactions in CSS without the use of JavaScript.