I am making a list with a heading and subheadings. My main list, Home1, is followed by a subheading. How can I exactly position the subheading content without affecting another list?
<div id='wrapper'> <ul id='testnav'> <li> <a href='#'>Home</a> <ul id='subnav'> <div style=' float : left; width :70%;' > <li><a href='#'>Sub Heading</a></li> <li><a href='#'>Sub Heading</a></li> <li><a href='#'>Sub Heading</a></li> </div> <div STYLE='float : left; width :30%; height:900px;'> Sub Heading Content </div> </ul> </li> <li><a href='#'>Home2</a></li> <li><a href='#'>Home3</a></li> <li><a href='#'>Home4</a></li> <li><a href='#'>Home5</a></li> </ul> </div> #testnav { list-style: none; padding: 0; marigin: 10px 10px 10px 0; width: 900px; } #subnav { list-style: none; padding: 0; marigin: 10px 10px 10px 0; width: 300px; }
I’m having a hard time understanding the question, but looking at your markup I see that you have a DIV as a direct descendant of a UL. Only LI elements can be children of UL.