Help dito sa PHP and CSS template

[TheTruth07]

nag didisappear yung last na nasa shop yung Serenity : Syrup & Sauces template kasi to kaya ineedit ko na lang


Html

<div id="menu">
<ul class="menu-container">
<li><a href="index.php?route=common/home">Home</a></li>
<li class="parent"><a href="#">Shop</a>
<div>
<ul>
<li class="child parent">
<a style="cursor: pointer;" >Coffee</a>
<div>
<ul>
<li class="child parent">
<a href="http://mycoffeelab.com/index.php?route=product/category&path=89_154">Artisans</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=89_148">Bluenotes</a>
</li>
</ul>
</div>
</li>
<li class="child parent">
<a style="cursor: pointer;" >Coffee Equipments</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_123">Hario</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_151_153">Ceado</a>
</li>
</ul>
</div>
</li>
<li class="child parent">
<a style="cursor: pointer;" >Coffee Machines</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_156">Jura</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_157">Proaster</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_158">Wega</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_159">WMF</a>
</li>
</ul>
</div>
</li>
<li class="child parent">
<a style="cursor: pointer;">Serenity : Syrup & Sauces</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_144_145">Syrup</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_144_146">Sauces</a>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>







Here is the CSS




/*Header menu*/

#menu{
width: 100%;
margin: 0;
height: 52px;
position: relative;
background: /*#251505*/ rgba(247,247,247,0.5) url("../image/sk-a0.png") repeat-x;
font-family: "Oswald", sans-serif;
letter-spacing: 0.125em;
}

#menu a{
font-family: Oswald, sans-serif;
font-size: 14px;
}

#menu .menu-container{
margin: 0 auto;
max-width: 960px;
}

#menu .menu-container:before{
content: "";
display: block;
position: absolute;
z-index: 5;
left: 0;
bottom: 0;
width: 100%;
height: 5px;
/*background: transparent url("../image/sk-a2.png") repeat-x;*/
}

#menu .menu-container li{
float: left;
position: relative;
margin: 0;
}

#menu .menu-container li.parent div ul{
margin: 0;
}

#menu .menu-container li.parent div ul li{
float: none;
}

#menu a{
color: #fff;
font-size: 14px;
display: inline-block;
line-height: 52px;
padding: 0 10px;
text-decoration: none;
text-transform: uppercase;
}

#menu li:hover > a{
color: #fff;
background-color: #5ceeed;
background-color: rgba(92,238,237,0.95);
}

#menu ul ul :hover > a.child {
color: #fff;
background: #26E8E8;
background: rgba(38, 232, 232, 0.95);
background-image: url("../image/menu-drop-down.png");
display: none;
position: relative;
}

#menu li.parent > a{
background-image: url("../image/menu-drop-down.png");
background-position: 95% 50%;
background-repeat: no-repeat;
padding-right: 17px;
}

#menu ul ul{
-webkit-transition: opacity .4s;
-moz-transition: opacity 0.4s;
-o-transition-property: opacity;
-o-transition-duration: 0.4s;
transition: opacity 0.4s;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
height: 0;
overflow: hidden;
position: absolute;
top: 45px;
left: 0;
float: left;
min-width: 100px;
z-index: 669;
background-color: rgba(38, 232, 232, 0.95);
display: inline;
}

#menu ul ul a{
font-size: 0.9em;
line-height: 26px;
white-space: nowrap;
padding: 5px 20px;
min-width: 140px;
height: auto;
background: #26E8E8;
background: rgba(38, 232, 232, 0.95);;
border-top: 1px #62eeef solid;
}

#menu ul ul li.child:first-child::before,
#menu ul ul li.child:last-child::after {
content: "";
display: block;
min-width: 100px;
height: 0px;
}

#menu ul ul li.child:first-child::before {
border-top: 3px solid white;
margin: 10px 20px 0 20px;
}

#menu ul ul li.child:last-child::after {
border-bottom: 3px solid white;
margin: 0 20px 10px 20px;
clear: both;
}

#menu ul ul ul{
-webkit-transition: opacity .4s;
-moz-transition: opacity 0.4s;
-o-transition-property: opacity;
-o-transition-duration: 0.4s;
transition: opacity 0.4s;
margin: 0;
opacity: 0;
filter: alpha(opacity=0);
height: 0;
overflow: hidden;
position: relative;
top: 0px;
left: 0;
float: right;
min-width: 100px;
z-index: 669;
background-color: transparent;
display: block;
}

#menu ul ul div {
/*position: relative;
top: -50px;
left: 100%;*/
background: transparent;
}

#menu ul ul li.child > a {
/*background-image: url("../image/menu-drop-down.png");*/
background-position: 95% 50%;
background-repeat: no-repeat;
padding-right: 17px;
clear: both;
}

#menu ul ul ul a{
font-size: 0.9em;
line-height: 26px;
white-space: nowrap;
padding: 5px 40px;
min-width: 140px;
height: auto;
background: transparent;
background: transparent;
border-top: 1px #62eeef solid;
}

#menu ul ul ul a:hover{
background-image: none;
}
/*#menu ul ul ul li:first-child::before,
#menu ul ul ul li:last-child::after {
content: "";
display: block;
min-width: 100px;
height: 0px;
}

#menu ul ul ul li:first-child::before {
border-top: 3px solid white;
margin: 10px 20px 0 20px;
}

#menu ul ul uls li:last-child::after {
border-bottom: 3px solid white;
margin: 0 20px 10px 20px;
clear: both;
}*/

#menu .li-points-pr:hover .li-points,
#menu li:hover > div > ul{
height: auto;
overflow: visible;
opacity: 1;
filter: alpha(opacity=100);
}

#menu .menu-points{
text-indent: -666em;
font-size: 0.001em;
overflow: hidden;
width: 29px;
background: transparent url("../image/bg-menu-hellip.png") no-repeat 50% 50%;
}

#menu .li-points-pr ul{
right: 0;
left: auto;
}

#menu .li-points-pr ul ul{
top: 0;
right: 100%;
}

/*end Header menu*/

 

[mishelann1305]

what do you mean,nag di disappear? its working

 

[breneil]

wag kang mag hard coding boss. gumamit ka nang framework mas madali pa...

try use boostrap studio framework may crack dito yan.. madali lang gamitin...

or else kung with CMS .. use wordpress, joomla, or other cms content...

 

[TheTruth07]

what do you mean,nag di disappear? its working

baka na kadepende rin sa resolution. pero ginagawa ko rin kasi sya now. nag didisappear kapag yung last menu na yung hinohover ko.

template kasi to e kaya medyo hirap ako eedit po sya.

- - - Updated - - -

wag kang mag hard coding boss. gumamit ka nang framework mas madali pa...

try use boostrap studio framework may crack dito yan.. madali lang gamitin...

or else kung with CMS .. use wordpress, joomla, or other cms content...

boss naka frontend and backend system ako na bili lang sa net, opencart sya so manually ko sya ineedit, but ang problem is kung gagamit ako ng vqmod bibili pa ko ng module and aside from that sometimes yung version ng opencart hindi pasok sa mga modules kaya, minamanual edit ko sya.

 

[jerson1115]

bro.. sa nakita ko.. paglabas ng sub-menu ng "Serenity : Syrup & Sauces" na out of over na sya..
kaya lumabas man yung sub-menu nawala din agad yung menu kasi out of hover na..

Try mo dagdagan ng submenu yung "Serenity : Syrup & Sauces" mga tatlo hnd yan mawawala, kasi for sure naka hover pa din sya eh..
saka ayaw mo ie-jquery nlng yan? mas madali pa yun.. pero cool ha.. pure css hehe..

 

[Gelo10]

<div id="menu" style="overflow-y:scroll;">
<ul class="menu-container">

<li><a href="index.php?route=common/home">Home</a></li>
<li class="parent"><a href="#">Shop</a>
<div>
<ul>
<li class="child parent">
<a style="cursor: pointer;" >Coffee</a>
<div>
<ul>
<li class="child parent">
<a href="http://mycoffeelab.com/index.php?route=product/category&path=89_154">Artisans</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=89_148">Bluenotes</a>
</li>
</ul>
</div>
</li>
<li class="child parent">
<a style="cursor: pointer;" >Coffee Equipments</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_123">Hario</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_151_153">Ceado</a>
</li>
</ul>
</div>
</li>
<li class="child parent">
<a style="cursor: pointer;" >Coffee Machines</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_156">Jura</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_157">Proaster</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_158">Wega</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=155_159">WMF</a>
</li>
</ul>
</div>
</li>

<li class="child parent">
<a style="cursor: pointer;">Serenity : Syrup & Sauces</a>
<div>
<ul>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_144_145">Syrup</a>
</li>
<li>
<a href="http://mycoffeelab.com/index.php?route=product/category&path=_144_146">Sauces</a>
</li>
</ul>
</div>
</li>

</ul>
</div>

ayan na ts ayos na.

 

[bentesn1per]

wag kang mag hard coding boss. gumamit ka nang framework mas madali pa...

try use boostrap studio framework may crack dito yan.. madali lang gamitin...

or else kung with CMS .. use wordpress, joomla, or other cms content...

marami benifit pag nag hard code ka compare sa pagamit ng mga tool like bootstrap.io etc. . unang unang benifit is matotoo ka kung pano nagwowork ang isang programm hindi ung drag and drop lng . .malaki ang tulong ng mga framework specially kung alam mo na ang basic at maghard code kasi pano kung meron kang ayaw at gustong palitan dun sa framework? edi nga nga nlng.