Fórum OpenCart Brasil

[filipiabc]

Boa tarde, estou com um problema no meu menu da loja, ele atualmente esta assim:
http://imageshack.us/a/img560/267/32553507.png


estou tentando a um tempo fazer assim:
http://imageshack.us/a/img838/6268/32592827.png

não consigo pois quando coloco bg da <li> em vermelho o <ul> também fica, e quero q os <ul> ja fiquem espandidos como na imagem.. alguem pode me ajudar?

category.tpl:

Código: Selecionar todos

<br />
<script type="text/javascript">
	$(document).ready(function(){
	   $(".act-cat").toggle( 
				function() { 
					 $(this).next('.level-2-cat').slideToggle("slow"),{
						duration: 'slow',
						easing: 'easeOutBounce'
					};
				}, 
				function() { 
					 $(this).next('.level-2-cat').slideToggle("slow"),{
						duration: 'slow',
						easing: 'easeOutBounce'
					};
				} 
			);
		$('.box-category li').last().addClass('last');
		
	});
	
</script>

<div class="box category">
  <div class="box-heading"><?php echo $heading_title; ?></div>
  <div class="box-content">
  
    <div class="box-category">
      <ul>
        <?php foreach ($categories as $category) { ?>
        <?php if ($category['category_id'] == $category_id) { ?>
        <li class="active">
        <?php } else { ?>
        <li>
        <?php } ?>
          <?php if ($category['category_id'] == $category_id) { ?>
          <a href="<?php echo $category['href']; ?>" class="active"><?php echo $category['name']; ?></a>
          <?php } else { ?>
          <a href="<?php echo $category['href']; ?>"><?php echo $category['name']; ?></a>
          <?php } ?>
          <?php if ($category['children']) { ?><span  class="act-cat"></span>
          <ul class="level-2-cat">
            <?php foreach ($category['children'] as $child) { ?>
            <?php if ($child['category_id'] == $child_id) { ?>
            <li class="active">
            <?php } else { ?>
            <li>
            <?php } ?>
              <?php if ($child['category_id'] == $child_id) { ?>
              <a href="<?php echo $child['href']; ?>" class="active"><?php echo $child['name']; ?></a>
              <?php } else { ?>
              <a href="<?php echo $child['href']; ?>"><?php echo $child['name']; ?></a>
              <?php } ?>
            </li>
            <?php } ?>
          </ul>
          <?php } ?>
        </li>
        <?php } ?>
      </ul>
    </div>
  </div>
</div>

estilo do box-category:

Código: Selecionar todos

.box-category > ul > li > a:hover{ color:#000;}
.box-category > ul > li > a {
	text-decoration: none; 
	display:block;
	padding:0 0 0 16px;
	color: #345971;
	font-family: 'LeagueGothic'; font-size: 21px;
	font-weight: normal;
	text-transform: uppercase;
	line-height:35px;
	background:url(../image/marker-1.png) 0px 14px no-repeat;
}
.box-category > ul > li{
	background:url(../image/line-5.png) 0 top repeat-x;
	position:relative;
	padding-left:11px;
}
.box-category > ul > li strong { display:none;}
.box-category > ul > li:first-child{ padding-top:1px;}
.box-category > ul > li.last{ border:none;}
.box-category > ul > li ul { padding-bottom:0px; padding-left:0px; display:none; margin-top:0px; padding-top:0px; margin-left:-11px;}
.box-category > ul > li.active ul {
	display:block;
	font-weight: normal;
}
.box-category > ul > li  span{background:url(../image/nolines_minus.png) 0px 0px no-repeat; width:6px; height:6px; float:right; margin-right:0px; margin-top:6px; }
.box-category > ul > li  span:hover{ cursor:pointer;}
.box-category > ul > li a.active {
	color:#666666;
	font-weight: normal;
	text-transform: uppercase;
	font-style: normal;
	font-variant: normal;
	text-decoration: none;
}
.box-category > ul > li a.active + ul {
	display: block;
}
.box-category > ul > li ul > li {
	padding:0px 0px 0px 45px;
		background:url(../image/line-5.png) repeat-x;
}
.box-category > ul > li ul > li > a:hover{ color:#345971;}
.box-category > ul > li ul > li > a {
	font-family: LeagueGothic;
	text-decoration: none;
	font-size:19px!important;
	display: block;
	color:#545e68;
	margin-bottom:0px;
	line-height:35px;
	text-transform: uppercase;
}
.box-category > ul > li ul > li > a.active {
	font-weight:normal; color:#666;
}
.box-category > ul > li:first-child { background:none;}
.act-cat{ position:absolute; top:15px; right:6px;}


.box-category {
	padding:0px 0 2px 0;	
}
.box.category .box-content {
	background:url(../image/category-content.jpg) repeat-x #f2f2f2;
	padding-bottom:15px;
}

Desde ja obrigado!!!

[unknown1140]

Vc não pode postar o link para a loja? Fica muito mais fácil de ajudar...

[valdeir2000]

.box-category > ul {
background:red;
}

[filipiabc]

Esta ai, grato desde ja!
wjmsistemas.com/tmpbohrer/E-commerce

[filipiabc]

.box-category > ul {
background:red;
}

Fiz isso mas a <li> tambem ficou com fundo vermelho

[unknown1140]

Como eu disse, fica muito mais fácil com um link para a loja, mas vc pode tentar assim:

Código: Selecionar todos

.box-category > ul > li {
background: red;
}
.box-category > ul > li > ul li {
background: gray;
}

Se vc postar um link vai ser muito mais fácil...

[filipiabc]

Como eu disse, fica muito mais fácil com um link para a loja, mas vc pode tentar assim:

Código: Selecionar todos

.box-category > ul > li {
background: red;
}
.box-category > ul > li > ul li {
background: gray;
}

Se vc postar um link vai ser muito mais fácil...

Obrigado funcionou corretamente , agora estou com uma duvida...
ali no site tem um botão do lado da categoria com um sinal de ''+'' para expandir a subcategoria, como faço para ela ficar expandida sem o botão

[unknown1140]

Isso vai depender de como o accordion é feito... Realmente fica complicado ajudar sem um link. Nesse caso já vira adivinhação...

[filipiabc]

Isso vai depender de como o accordion é feito... Realmente fica complicado ajudar sem um link. Nesse caso já vira adivinhação...

o link esta aqui http://www.wjmsistemas.com/tmpbohrer/E-commerce

[unknown1140]

Substitua:

Código: Selecionar todos

.box-category > ul > li ul {
display: none;
}

por

Código: Selecionar todos

.box-category > ul > li ul {
display: block;
}