HTML List Problem

Question

Dear all,

I am making a list with heading and subheading, my main list Home1, followed by subheading. How can I exactly position the subheading content without affecting another list? Any idea?

<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;
}

Answer 1

You spelled margin wrong. Start there.

Answer 2

Also, ul > div is not valid HTML.

Answer 3

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.

<ul id="subnav">
  <div style=" float : left; width :70%;" > <!-- THIS DIV CANNOT BE HERE -->
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
    <li><a href="#">Sub Heading</a></li>
  </div> <!-- THIS DIV CANNOT BE HERE -->
  <div STYLE="float : left; width :30%; height:900px;"> <!-- THIS DIV CANNOT BE HERE -->
    Sub Heading Content
  </div> <!-- THIS DIV CANNOT BE HERE -->
</ul>

Answer 4

The first step to solving your problem is making sure your markup is correct as Andy Ford suggested. Secondly, making sure your spelling of the CSS in the code is correct may help.

From what I can decipher from your question, you're trying to make sure that #subnav is absolutely positioned relative to #testnav.

<ul id="testnav">
    <li>
        <a href="#">Home</a>
        <ul id="subnav">
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>
            <li><a href="#">Sub Heading</a></li>                             
        </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>
#testnav, #subnav { list-style:none; padding:0; }
#subnav { 
    position: absolute;
    width: 300px;
}

Not sure if that's what you want, but generally the first step to figuring out what's going wrong with css is to remove every extraneous addition you can.