Solution 1 :

Try to embed inline CSS to the firstList div.

Problem :

I am trying to nest a list within a list in HTML, with the initial list being inline and the second list being below each other.

I have tried placing these lists with seperate id’s but both lists follow the same CSS as the first see below.

      <div id= "deliveryListPage">
        <ul>
          <li>
            <h8>Hello</h8>
            <br><br>
            <div id="firstList">
              <ul>
                <li>1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
                <li>5</li>
                <li>6</li>
                <li>7</li>
                <li>8</li>
                <li>9</li>
                <li>10</li>
                <li>11</li>
                <li>12</li>
              </ul>
            </div>
          </li>
          <li>
            <h9><center>Can't see your postcode?</h9>
          </li>
      </ul>
    </div>

The div id “firstList” CSS styles are ignored and the deliveryListPage is the only one taken.

Comments

Comment posted by Quentin

“both lists follow the same CSS” — What CSS?

Comment posted by Quentin

<h8>Hello</h8>

Comment posted by Quentin

<h9><center>Can't see your postcode?</h9> </li>

Comment posted by Quentin

<br><br>