Question

Is it possible to attach html tag to others using Javascript?

<li> to other <li> ?

For instance, I’m creating dropdown menu.
I have div separate from the <ul> tag

<ul>
  <li>menu1</li>
  <li>menu2</li>
</ul>

<div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
</div>

When I click, say, a link, then I want sub menu to show up under menu1 so result would be like:

<ul>
  <li>menu1</li>
  <div id="submenu1">
     <li>sub1</li>
     <li>sub2</li>
  </div>
</ul>

The reason why I choose <div> to be separated from beginning instead of nested in <li> tag is that if I set the <div> “hide”, it hides but it occupies the space and created big space between menu1 and any content below, so my page looks weird like:

mypage
----------------------------
| menu1
|
|                  <------ big open space div is hiding
|             
|
| hello content start here

EDIT

Thanks for the tip guys, I’ve solved the problem with removing div and have nested <ul> per suggestion. The elements are still being shifted when submenu shows up but used CSS position:absolute and specifying z-index helped.

Answer 1

If you use display: none in your CSS then the hidden element doesn’t need any space:

HTML:

<ul>
  <li>menu1
    <ul id="submenu1">
       <li>sub1</li>
       <li>sub2</li>
    </ul>
  </li>
  <li class="active">menu2
    <ul id="submenu1">
      <li>sub1</li>
      <li>sub2</li>
    </ul>
</ul>

CSS:

li ul {
  display: none;
}

li.active {
  display: block;
}