double ul and li

This is what I want to accomplish:

- 1st item
   - 1st subitem
-second item

When I did the code below, the 1st subitem is indented very far on the inside How do I fix it? Thx
<ul><li>first item </li>
        <ul></li>first subitem</li></ul>
        <li>second item </li>
</ul
LVL 1
leblancAccountingAsked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
First of all, your html is wrong.
1) Everything should be closed in the same order it is opened.
2) Nest your sub inside the li
<ul>
    <li>first item 
        <ul>
            <li>first subitem</li>
        </ul>
    </li>
   <li>second item </li>
</ul>

Open in new window

If you want to control the margin of the sub li, you can add css
li li{margin-left:-20px;}

Open in new window

All together
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    li li{margin-left:-20px;}
    
    </style>
</head>
<body>
<ul>
    <li>first item 
        <ul>
            <li>first subitem</li>
        </ul>
    </li>
   <li>second item </li>
</ul>
</body>
</html>

Open in new window

And working sample http://jsbin.com/regeq/1/
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.