Nested HTML Lists

Question

I'm looking to put content under accordions that are built using "ul" with each accordion item as it's own "li".

My issue is that I want the content in one of the accordion items to include it's own "ul".

What is the proper way to approach this?

CODEPEN LINK: http://codepen.io/Steve-Jones/pen/pbVOKj

<ul class="accordion">
    <li>
        <a>FAQ: Vegetarian-Friendly Diet</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
    <li>
        <a>FAQ: Snacking at Work</a>
        <p>What are some convenient things that I can snack on while at work?</p>
        <p>Most major grocery chains and specialty grocers sell pre-cut veggies. These typically include a variety of peppers, cucumbers, broccoli florets, cauliflower, the microwaved heart of your office nemesis. Wait, the lawyers say we have to strike that last
            one. Most of these same stores also carry pre-packaged cherry tomatoes. All of those veggies are convenient to snack on throughout the day. And feel free to add the low-fat or fat/sugar free flavor enhancer of your choice and have at it. The only downside
            to this pre-cut veggie option is that pre-cut/packaged veggies are slightly more expensive than buying your veggies whole and cutting them yourself.</p>
        <p>Here are a few other, convenient, non-veggie ideas:</p>
        <ul>
            <li>Powdered peanut butter, like PB2, adds a ton of flavor to celery which is again easy to snack on</li>
            <li>Tuna straight out of the pouch is easy. You can mix it with non-fat greek yogurt, mustard, or avocado</li>
            <li>If you have a boat, and an extra 10 hours in your workday, go fishing for the real thing</li>
            <li>Individually packaged plain (0% fat) greek yogurt is easy to keep at your desk</li>
            <li>Almonds, walnuts, and pistachios (come the season) are easy to store in your desk; they can also be used as projectiles in case an office food fight breaks out</li>
            <li>Protein shake; or if you have access to a blender and ice, you can make a ManUP-approved smoothie (feel free to add in oats too for a carb serving)</li>
        </ul>
    </li>
    <li>
        <a>FAQ: Food Burnout</a>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit, ipsum, fuga, in, obcaecati magni ullam nobis voluptas fugiat tenetur voluptatum quas tempora maxime rerum neque deserunt suscipit provident cumque et mollitia ex aspernatur porro
            minus sapiente voluptatibus eos at perferendis repellat odit aliquid harum molestias ratione pariatur adipisci. Aliquid, iure.</p>
    </li>
</ul>
<!-- / accordion -->

CSS

.accordion {
    max-width: 560px;
    margin: 0 auto 100px;
    border-top: 1px solid #d9e5e8;
}

.accordion li {
    border-bottom: 1px solid #d9e5e8;
    position: relative;
}

.accordion li p {
    display: none;
    padding: 10px 25px 30px;
    color: #6b97a4;
}

.accordion a {
    width: 100%;
    display: block;
    cursor: pointer;
    font-weight: 600;
    line-height: 3;
    font-size: 14px;
    font-size: 0.875rem;
    text-indent: 15px;
    user-select: none;
}

.accordion a:after {
    width: 8px;
    height: 8px;
    border-right: 1px solid #4a6e78;
    border-bottom: 1px solid #4a6e78;
    position: absolute;
    right: 10px;
    content: " ";
    top: 17px;
    transform: rotate(-45deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

.accordion p {
    font-size: 13px;
    font-size: 0.8125rem;
    line-height: 2;
    padding: 10px;
}

a.active:after {
    transform: rotate(45deg);
    -webkit-transition: all 0.2s ease-in-out;
    -moz-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

Answer 1

Your current markup is valid, as long as the second list is placed inside the list item of the first one, then the html is correct.

To style it use the following selectors:

.accordion > li ul {
 /* some css styles */
}

or add a class to the inner list if you find it clearer:

.accordeon-inner-list > li{
 /* inner list styles */
}

Answer 2

Assuming you mean how to manage styling inner and outer lists, a common way to handle this is for your styles to look like this:

.accordion {
 /* styling */
}

.accordion > li {
 /* targets the children of the accordion ONLY */
}

.accordion > li ul {
 /* targets the inner list(s) ONLY */
}

.accordion > li ul > li {
 /* targets the inner list(s) children lis ONLY */
}

Answer 3

Give your ul a class, which you can target. Just like:

<ul class="unstyled-list">
<li>List item and stuff</li>
<li>List item and even more stuff</li>
</ul>

I have tried this in your fiddle, it works!

In order to style the list, use:

.unstyled-list {
    margin: 15px 0;
    background: red;
}
.unstyled-list li {
    list-style: bullet;
}