Как сделать такое меню или оглавление содержания категории? - Вопросы по CSS

text-align: center;

display: block;

margin: 0 auto;

table.moduletable-pict img{
float: left;
display: block;
valign: top;
padding: 5px;
}

.mainlevel-pict{
position: relative;
valign: bottom;
color: #c3b9af;
font-style: italic;
font-weight: bold;
font-size: 14px;
top: 120px;
padding-left: 25px;
padding-right: 20px;
}

table.moduletable-pict {
width: 100%;
}
table.moduletable-pict img {
float: left;
display: block;
padding: 5px;
}
h3,table.moduletable-pict th {
text-align: center; 
font-style: italic;
font-weight: bold;
padding-bottom: 5px;
}

.mainlevel-pict{
position: relative;
color: #c3b9af;
font-style: italic;
font-weight: bold;
font-size: 14px;
top: 120px;
}
.mainlevel-pict li{
width: 95px;
height: 125px;
text-align: center;
}
a.mainlevel-pict, a.mainlevel-pict:link, a.mainlevel-pict:visited{
text-decoration: none; 
} 
a.mainlevel-pict:hover{
text-decoration: underline; 
}

<table cellpadding="0" cellspacing="0" class="moduletable-pict">
			<tr>
			<th valign="top">
				Все коллекции Admonter:			</th>
		</tr>
			<tr>
			<td>

				<ul id="mainlevel-pict"><li><a href="/index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=68" class="mainlevel-pict" >Antico</a> <img src="/images/stories/antico_logo.jpg" border="0" alt="Antico"/></li>

<ul id="mainlevel-pict"><li><a href="/index.php?option=com_content&amp;view=article&amp;id=50&amp;Itemid=68" class="mainlevel-pict" >Antico</a> <img src="/images/stories/antico_logo.jpg" border="0" alt="Antico"/></li>

<ul>
<li><a><img />text</a></li>
...
<li><a><img />text</a></li>
</ul>

table.moduletable-pict {
width: 100%;
}
table.moduletable-pict li{
display: inline;

.mainlevel-pict li{
float:left;
position:relative;
margin-right:15px;  
}
.mainlevel-pict img {
display:block;
height:90px;
width:90px;
left: 0px;
top: 0px;
position: absolute;
z-index: 1;
}
a.mainlevel-pict li{
display: block;
width: 110px;
height:20px; 
padding-top:110px; 
text-align: center;
z-index: 2; 
position:absolute;
top:0; 
left:0; 
background:url (hackie.png);
}
a.mainlevel-pict li:hover {
text-decoration:none
}

	// replace & with amp; for XHTML compliance
	// remove slashes from excaped characters
	$mitem->name = stripslashes (htmlspecialchars ($mitem->name));

	switch ($mitem->browserNav)
	{
		// cases are slightly different
		case 1 :
			// open in a new window
			$txt = '<a href="' . $mitem->url . '" target="_blank" class="' . $menuclass . '" ' . $id . '>' . $mitem->name . '</a>';
			break;

			$image = '<img src="'.JURI::base (true).'/images/stories/' . $menu_image . '" border="0" alt="' . $mitem->name . '"/>';
			if ($params->get ('menu_images_align')) {
				$txt = $txt . ' ' . $image;
			} else {
				$txt = $image . ' ' . $txt;
			}
		}
	}

	// replace & with amp; for XHTML compliance
	// remove slashes from excaped characters
	$mitem->name = stripslashes (htmlspecialchars ($mitem->name));
	
	if ($params->get ('menu_images'))
	{
		$menu_params = new stdClass ();
		$menu_params = new JParameter ($mitem->params);

		$menu_image = $menu_params->def ('menu_image', -1);
		if (($menu_image <> '-1') && $menu_image) {
			$image = '<img src="'.JURI::base (true).'/images/stories/' . $menu_image . '" border="0" alt="' . $mitem->name . '"/>';
		}
	}
	
	switch ($mitem->browserNav)
	{
		// cases are slightly different
		case 1 :
			// open in a new window
			$txt = '<a href="' . $mitem->url . '" target="_blank" class="' . $menuclass . '" ' . $id . '>' . $mitem->name . '</a>';
			break;

		case 2 :
			// open in a popup window
			$txt = "<a href=\"#\" onclick=\"javascript: window.open ('" . $mitem->url . "', '', 'toolbar=no,location=no,status=no,menubar=no,scrollbars=yes,resizable=yes,width=780,height=550'); return false\" class=\"$menuclass\" " . $id . ">" . $mitem->name . "</a>\n";
			break;

		case 3 :
			// don't link it
			$txt = '<span class="' . $menuclass . '" ' . $id . '>' . $mitem->name . '</span>';
			break;

		default : // formerly case 2
			// open in parent window
			if ($params->get ('menu_images_align')) {
				$txt = '<a href="' . $mitem->url . '" class="' . $menuclass . '" ' . $id . '>' . $mitem->name . $image . '</a>';
			} else {
				$txt = '<a href="' . $mitem->url . '" class="' . $menuclass . '" ' . $id . '>'. $image . $mitem->name . '</a>';
			}
			break;
	}

#mainlevel_img{width:100%;overflow:hidden;list-style:none;margin:0;padding:0;}
#mainlevel_img li{float:left;text-align:center;}
#mainlevel_img img{display:block;margin:0 auto;}
#mainlevel_img a{display:block;}