UL tag does not show same css as OL

Question

I have this javascript accordion (.heading) and I'm trying to apply it to an unordered list (the first "ul" tag). What's weird is that the formatting (mostly focused on the hover color) works on an ordered list, just not on the "ul" tag.

HTML

<h3><a></a></h3>
  <div>
    <ul>
    <li class="heading"></li>
    <ul class="content">
            <li></li>
            <li></li>
            <li></li>

        </ul>   
    <li></li>   
    </ul>
  </div> 

CSS

.heading {
margin: 1px;
color: black;
padding: 3px 10px;
cursor: pointer;
position: relative;
font-weight: bold;
}

.heading:hover{
margin: 1px;
color: black;
padding: 3px 10px;
cursor: pointer;
position: relative;
font-weight: bold;
background:#cccccc
}

.content {
padding: 5px 10px;
}
p { padding: 5px 0; }

Thank you for any help.

EDIT:

This is the javascript script I have inputted in the

 <script type="text/javascript">
jQuery(document).ready(function() {
 jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
    jQuery(this).next(".content").slideToggle(500);
  });
});
</script>

Answer 1

You have nested your lists incorrectly. A nested list needs to be inside a li element, not as a direct child of the first ul .

Answer 2

Your marking the HTML is wrong, even if it is "functional" for you.

Read: http://en.wikipedia.org/wiki/Semantic_HTML

Study from this link:

http://dev.w3.org/html5/markup/ul.html

This link says this:

Permitted contents

zero or more li elements

In other words, other elements is not allowed directly inside <UL> or <OL> unless the <LI> .

You must add the <UL class="content"> (or <OL class="content"> ) inside another <LI> .

To better understand you, what you should do is something like this:

<style>
li.heading {
    margin: 1px;
    color: black;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
}

li.heading:hover{
    margin: 1px;
    color: black;
    padding: 3px 10px;
    cursor: pointer;
    position: relative;
    font-weight: bold;
    background:#cccccc;
}

li.content ul {
    padding: 5px 10px;
}
</style>

<ul>
<li class="heading"></li>
<li class="content">
    <ul>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</li>
<li></li>
</ul>

<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        jQuery(this).next(".content").slideToggle(500);
    });
});
</script>