[CSS][PHP]Jak z tego zrobić menu rozwijane Opcje

[darkowski]

Witam zainstalowałem sobie darmowy sklep GEKOSALE i chciałbym go troche zmodyfikować tzn. chciałbym żeby menu kategorii wyglądało inaczej czli, że jak najade myszką na jakiś produkt to wtedy rozwine mi się podkategoria czyli np.

Kategoria

BLUZY
(rozwija się)
- z kapturem
- bez kaptura itd.

Na forum gekosale wyczytałem, że za kategorie odpowiedzialny jest maincategoriesbox który wygląda tak:

[PHP] pobierz, plaintext 
<div class="category-list clear-fix">
{if count($maincategories) > 0}
<ul>
{section name=categoryId loop=$maincategories}
<li>
	<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">
		{if isset($maincategories[categoryId].photo) &&  $maincategories[categoryId].photo !=''}
			<img src="{$maincategories[categoryId].photo}" alt="{$maincategories[td].name}"/>
		{else}
			<img src="{$DESIGNPATH}_gallery/_100_100/1.png" alt="{$maincategories[td].name}"/>
		{/if}
	</a>
	<div class="category_name">
		<a href="{$URL}{if $maincategories[categoryId].url !=''}{$maincategories[categoryId].url}{else}{seo controller=categorylist}/{$maincategories[categoryId].seo}{/if}">{$maincategories[categoryId].name}</a>
	</div>
</li>
{/section}
</ul>
{/if}
</div>
 
 
 
 
[PHP] pobierz, plaintext 

Ale nie wiem co tu zmienić żeby wyświetlało tak jak ja chce

[darkowski]

Znalazłem w static.css

[PHP] pobierz, plaintext 
/*
* SUBCATEGORIES LIST: WIDE
*/
 
.layout-box-type-product-list .layout-box-content > ul {
	list-style: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li {
	padding: 15px 15px 15px 130px;
	border-bottom: solid 1px #dedede;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:last-child {
	padding: 15px 15px 15px 130px;
	border-bottom: solid 0px #dedede;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li:after {
	content: '.'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:hover,
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:focus,
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 a:active {
	text-decoration: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image {
	float: left;
	width: 100px;
	margin: 0 15px 0 -115px;
	min-height: 100px;
	line-height: 100px;
	vertical-align: middle;
	text-align: center;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .image img {
	vertical-align: middle;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li h4 .name{
	margin-right: 15px;
	margin-bottom: 10px;
	font-size: 13px;
	color: black;
	font-weight: bold;
	text-decoration: none;
}
 
.layout-box-type-product-list .layout-box-content > ul.subcategories-list > li .description {
	margin-top: 15px;
}
 
.layout-box-type-slide-show .layout-box-content {
	padding: 0px;
}
 
.nivoSlider {
	position:relative;
	width: auto !important;
}
.nivoSlider img {
	position:absolute;
	top:0px;
	left:0px;
}
 
.nivoSlider a.nivo-imageLink {
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	border:0;
	padding:0;
	margin:0;
	z-index:6;
	display:none;
}
[PHP] pobierz, plaintext 

oraz

[PHP] pobierz, plaintext 
 
/*
* CATEGORY MENU
*/
 
.layout-box-type-categorymenu .layout-box-content {
	padding: 0;
}
 
.layout-box-type-categorymenu .layout-box-content p {
	padding: 10px 10px 0;
}
 
.layout-box-type-categorymenu:hover {
	z-index: 100;
}
 
.layout-box-type-categorymenu ul {
	margin: 0px 0 0;
	list-style: none;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li {
	border-top: solid 1px #dedede;
	padding-right: 10px;
	position: relative;
}
 
.layout-box-type-categorymenu .layout-box-content a {
	text-decoration: none;
	color: #000;
}
 
.layout-box-type-categorymenu .layout-box-content a:hover,
.layout-box-type-categorymenu .layout-box-content a:focus,
.layout-box-type-categorymenu .layout-box-content a:active {
	font-weight: bold;
}
#breadcrumbs ul li,
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a,
.layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
	background: transparent url('../../_images_frontend/core/icons/bullets.png') right center no-repeat;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > a.hasChildren {
	display: block;
	position: relative;
	padding: 4px 10px;
	background-position: 100% -7px;
}
.layout-box-type-categorymenu .layout-box-content > ul > li.active > a {
	font-weight: bold;
}
.layout-box-type-categorymenu .layout-box-content li.current > a {
	font-weight: bold;
}
.layout-box-type-categorymenu .layout-box-content > ul > li > a {
	display: block;
	position: relative;
	padding: 4px 10px;
	background: none;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu {
	display: none;
	width: 210px;
	position: absolute;
	right: 3px;
	top: 4px;
	margin-right: -196px;
	background: transparent url('../../_images_frontend/core/backgrounds/shadow-flat.png');
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper {
	position: relative;
	left: -3px;
	top: -5px;
	padding: 2px 0 0;
	margin: 0 0 -2px;
	background: #faf0f0;
	border: solid 1px #dedede;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul {
	position: relative;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu:after,
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper:after {
	content: '.'; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li > .submenu > .submenu-wrapper > ul a {
	display: block;
	padding: 4px 10px 4px 25px;
	background-position: 10px -7px;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li.active,
.layout-box-type-categorymenu .layout-box-content > ul > li:hover {
	background: #faf0f0;
	z-index: 100;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li:hover > a {
	margin-right: 5px;
	background: #faf0f0;
	z-index: 200;
	font-weight: bold;
}
 
.layout-box-type-categorymenu .layout-box-content > ul > li:hover > .submenu {
	display: block;
}
 
[PHP] pobierz, plaintext 

Jak możesz to napisz co tu trzeba zmienić