Databases
StackOverflow2013
Postsdbo
POHow can I have a list of lists, with the top-level li's being inline, and the lower-level lists being normal lists?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow can I have a list of lists, with the top-level li's being inline, and the lower-level lists being normal lists?
    text
    copied!<p>Hey so I have a list, with some of the items containing other lists. The first level of lists needs to be inline, but any list a level down should be normal list-item. It works better if I show you. This is what I have:<img src="https://i.stack.imgur.com/gsoRc.jpg" alt="alt text"></p> <p>However, I want Home Profile Groups Events and Frequencies to all be in one straight line, with any child lists below them. Here is the CSS:</p> <pre><code>#box1, #box2, #box3 { background-color: #FC9; padding:10px; text-align:center; } #box1 li, #box2 li, #box3 li { display:inline; font-size:24px; list-style:none; } #box1 li ul, #box2 li ul, #box3 li ul { display:list-item; list-style:none; } #box1 li ul li { display:list-item; font-size:18px; list-style:none; border:none; } #box1 li ul li ul { display:list-item; list-style:none; } #box1 li ul li ul li { font-size:12px; list-style:none; border:none; } #box2 { background-color:#6F9; } #box3 { background-color:#C9F; } </code></pre> <p>and here is the HTML:</p> <pre><code>&lt;div id="box1"&gt; &lt;ul&gt; &lt;li&gt;Home&lt;/li&gt; &lt;li&gt;Profile &lt;ul&gt; &lt;li&gt;Edit Profile&lt;/li&gt; &lt;li&gt;Inbox &lt;ul&gt; &lt;li&gt;New Message&lt;/li&gt; &lt;li&gt;Sent&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Photos&lt;/li&gt; &lt;li&gt;Buddies&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Groups &lt;ul&gt; &lt;li&gt;Create Group&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Events &lt;ul&gt; &lt;li&gt;Plan Event&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;Frequencies&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="box2"&gt; &lt;ul&gt; &lt;li&gt;Sitemap&lt;/li&gt; &lt;li&gt;Help&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; &lt;div id="box3"&gt; &lt;ul&gt; &lt;li&gt;Private Policy&lt;/li&gt; &lt;li&gt;Code of Conduct&lt;/li&gt; &lt;li&gt;Terms of Use&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>Thanks for any help you can give.</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload