CODEWITHSUNDEEP
html-lists
AAA
AAA

Reputation: 3168

How to align a <ul> with an existing menu?

I am having trouble aligning a <ul><li> with an existing navigation. The more option floats on top of the second option. How to make them all aligned?

Code: 

<div id="nav">
<a href="#" id="option">name</a>
<ul id="test"> 

<li><a href="#" id="options1">Post</a> 
  <ul> 

    <li><a id="thestuff" href="#">Post Article</a></li> 
    <li><a id="thestuff" href="#">Post Book</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li> 
    <li><a id="thestuff" href="#">Post Other</a></li>
    <li><a id="thestuff" href="#">Post Other</a></li> 
  </ul>
   </li> 
  </ul>
  <a href="#" id="option">Article</a>
  <a href="#" id="option">Books</a>
  <a href="#" id="option">Other</a>
  <a href="#" id="option">Other</a>
  <a href="#" id="option">Other</a>
  <a href="#" id="option">Other</a>
  <a href="#" id="option">Other</a>
  </div>

CSS:

 #nav {
 margin-left: 230px;
 margin-top:-19px;
 }

 #option {
 margin-left:20px;
 }

I am not using anything for thestuff tag.

Upvotes: 0

Views: 49

Answers (1)

Naftali
Naftali

Reputation: 146302

Use a class for elements that you have more than one of.

By definition an id has to be unique

Upvotes: 2

Related Questions