Сомнения относительно неупорядоченного списка

Question

Я хочу отобразить каскадный неупорядоченный список, как показано ниже:

   Home    Fixtures        Results    Leaderboard  
           Upcoming Week              Goals
           Month                      Assists

Может кто-нибудь мне помочь?

Answer 1

Вы можете сделать это так,

<ul class="main-ul">
    <li>Home</li>
    <li>
        <ul class="inner-ul">
            <li>Fixtures</li>
            <li>Upcoming Week</li>
            <li>Month</li>
        </ul>
    </li>
    <li>Results</li>
    <li>
        <ul class="inner-ul">
            <li>Leaderboard</li>
            <li>Goals</li>
            <li>Assists</li>
        </ul>
    </li>
</ul>

и CSS, как показано ниже,

ul.main-ul {
    float: left;
    width: 100%;
    text-align: left;
}
ul.main-ul>li {
    list-style: none;
    float: left;
    margin: 0 20px;
}
ul.inner-ul>li {
    list-style: none;
}