CSS arv

Är följande metod den enklaste/bästa om man vill göra "undermenyer" med ett annat utseende än den första ul/li-listan? Det är framförallt #leftmenu ul ul och #leftmenu li li som jag är lite osäker på.

css:

#leftmenu {	
	padding: 0;
	margin: 0;
	background-color: #eee;
}

#leftmenu ul
{
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#leftmenu li a
{
	background-color: #eee;
	padding: 5px;
	display: block;		
	color: #333333;
	border-bottom: 1px solid #eee;
	text-decoration: none;
}

#leftmenu ul ul
{
	padding: 0;
	margin-left: 10px;
	list-style-type: none;
}

#leftmenu li li a
{
	background-color: #eee;
	padding: 5px;
	display: block;		
	color: #333333;
	border-bottom: 1px solid #eee;
	text-decoration: none;
}

#leftmenu li a:hover
{
	background-color: #ddd;
	color: #000000;
}	

html:

<div id="leftmenu">

<ul>
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>

<li><a href="#">Four</a>

<ul>

   <li><a href="#">Four.One</a></li>
   <li><a href="#">Four.Two</a></li>

</ul>

</li>

<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>

</ul>

</div>

edit: stavfel.

tog bort en del ☺

css:

#leftmenu 
{
	background-color: #eee;
	padding: 0;
	margin: 0;
	list-style-type: none;
}

#leftmenu li a
{
	padding: 5px;
	display: block;		
	color: #333333;
	border-bottom: 1px solid #eee;
	text-decoration: none;
}

#leftmenu ul
{
	margin-left: 10px;
}

#leftmenu li a:hover
{
	background-color: #ddd;
	color: #000000;
}	

html:

<ul id="leftmenu">
<li><a href="#">One</a></li>
<li><a href="#">Two</a></li>
<li><a href="#">Three</a></li>

<li><a href="#">Four</a>

<ul>

   <li><a href="#">Four.One</a></li>
   <li><a href="#">Four.Two</a></li>

</ul>

</li>

<li><a href="#">Five</a></li>
<li><a href="#">Six</a></li>

</ul>