unorder list css3 simple menu

[Isset1988]

Hello my friends,

 

I want to create a vertical menu with some categories and some subcategories.

 

My script produses a little strange the unordered list structure. (there is no way to change this)

<ul>	
	<li>
		<a href="#">
			Category 1
		</a>
	</li>	
	<li>
		<a href="#">
			Category 2
		</a>
	</li>
	        <ul>
		  <li>
			<a href="#">
				SubCategory 2.1
			</a>
		  </li>
		</ul>
		<ul>
		  <li>
			<a href="#">
				SubCategory 2.2
			</a>
		</li>
	       </ul>
	<li>
		<a href="#">
			Category 3
		</a>
	</li>
</ul>

Can someone help me to create a simple css 3 menu.

 

Thank you !

Edited May 31, 2013 by Isset1988

[requinix]

Hard to do considering how the HTML is invalid. What it tries to do is reasonable but it is still wrong and should be fixed. Note that's "fixed", not simply "changed".

[Isset1988]

Thank you for your answer requinix.

The proper/valid html is:
 

<ul>

<li>
    <a href='#'> Category </a>
    <ul>
        <li><a href='#'> Sub Category </a></li>
    </ul>
</li>

</ul>

Is there any solution without have the subcategory nside the category?

Edited May 31, 2013 by Isset1988

[requinix]

If the browser corrects your HTML then you can treat it as if it were valid. Use something to inspect the HTML structure of the page (like Chrome's Inspector thing) to make sure the

was moved into the
• . Assuming it does so then you can write your CSS as if the markup was valid.