Is it possible to set a new of <ul> under <url>?

[worldpeace]

I am trying to have two sets of <ul>s going like this under one div. Is this possible?

<div id="menu">
<ul>
<li><span>><a href="#">Home</a></span></li>
<li><span>><a href="#">About Us</a></span></li>
<ul>
<li><span><a href="#">[Address]</a></span></li>
<li><span><a href="#">[Email]</a></span></li>
<li><span><a href="#">[Phone]</a></span></li>
<li><span><a href="#">[Live Chat]</a></span></li>
</ul>
<li><span>><a href="#">Products</a></span></li>
<li><span>><a href="#">Reviews</a></span></li>
</ul>


If so, how can I set the css to modify the second <ul> set? I want it to be different color, font size.

[invision2]

You're best bet is to make two classes.

So first class could be

.ul1 {
font-size:16px;
background:#000
}

and then use <ul class="ul1"> or something more descriptive.

Do you mean nested unordered lists?

[worldpeace]

it worked. thank you

[felgall]

Your HTML is invalid. The only tag allowed directly inside a <ul> is a <li>. The nested <ul> needs to be inside of a <li> tag in order for the HTML to be valid.

You don't need classes to distinguish the CSS for them either as they can be referenced using

ul {...}
ul ul {...}

to reference the outer and inner ULs respectively.

[AutisticCuckoo]

As Stephen said, you need to fix your invalid markup first:

<div id="menu">
  <ul>
    <li><span><a href="#">Home</a></span></li>
    <li><span><a href="#">About Us</a></span>
      <ul>
        <li><span><a href="#">[Address]</a></span></li>
        <li><span><a href="#">[email]</a></span></li>
        <li><span><a href="#">[Phone]</a></span></li>
        <li><span><a href="#">[Live Chat]</a></span></li>
      </ul></li>
    <li><span><a href="#">Products</a></span></li>
    <li><span><a href="#">Reviews</a></span></li>
  </ul>
</div>