[Solved] Top Menu Error goes behind

[johnme]

Hi to all

any one Call help me ...

top menu goes behind to side categories

please take look attached images

[razaro]

In css file you should set z-index of menu to higher value then side categories

[johnme]

In css file you should set z-index of menu to higher value then side categories

Hi sir

pls Help me

here the my css

Blockcategories :-

/*
modified for prestashop
marghoob suleman - marghoobsuleman.com
*/
.ddsmoothmenu{
font: bold 12px Verdana;
background: #414141; /*background of menu bar (default state)*/
width: 100%;
height:auto;
display:inline-block;

}

.ddsmoothmenu ul{
z-index:100;
margin: 0;
padding: 0;
list-style-type: none;
}

/*Top level list items*/
.ddsmoothmenu ul li{
position: relative;
display: block;
width:100%;
float: left;
}

/*Top level menu link items style*/
.ddsmoothmenu ul li a{
display: block;
background: #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}

#smoothmenu1 li {
   padding: 0;
   list-style-position: outside;
   display:block;
}


* html .ddsmoothmenu ul li a{ /*IE6 hack to get sub menu links to behave correctly*/
display: block;
background: #E9E9E9; /*background of menu items (default state)*/
color: white;
padding: 8px 10px;
border-bottom: 1px dashed #c3c3c3;
border-right: 1px solid #c3c3c3;
border-left: 1px solid #c3c3c3;
color: #374853;
text-decoration: none;
}

.ddsmoothmenu ul li a:link, .ddsmoothmenu ul li a:visited{
color: #374853;
display:block;
}

.ddsmoothmenu ul li a:hover{
background: #B9D2E0; /*background of menu items during onmouseover (hover state)*/
text-decoration:none;
display:block;
}

.ddsmoothmenu ul li a.selected{ font-weight:bold;;background-color:#0093f0; color:#FFFFFF; }
/*1st sub level menu*/
.ddsmoothmenu ul li ul{
position: absolute;
left: 0;
display: none; /*collapse all sub menus to begin with*/
visibility: hidden;
}

/*Sub level menu list items (undo style from Top level List Items)*/
.ddsmoothmenu ul li ul li{
display: list-item;
float: none;
}

/*All subsequent sub menu levels vertical offset after 1st level sub menu */
.ddsmoothmenu ul li ul li ul{
top: 0;
}

/* Sub level menu links style */
.ddsmoothmenu ul li ul li a{
font: normal 13px Verdana;
width: 178px; /*width of sub menus*/
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom:1px dashed #c3c3c3;
display:block;
}


/* ######### CSS classes applied to down and right arrow images  ######### */

.downarrowclass{
position: absolute;
top: 7px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

/* ######### CSS for shadow added to sub menus  ######### */

.ddshadow{
position: absolute;
left: 0;
top: 0;
width: 0;
height: 0;
background: silver;
}

.toplevelshadow{ /*shadow opacity. Doesn't work in IE*/
opacity: 0.8;
}

/* end menu css */

Where can i edit this

[johnme]

In css file you should set z-index of menu to higher value then side categories

Here the Top Menu Css
please help me where to edit

/*** arrows **/
.sf-menu a.sf-with-ul {
   min-width:        1px; /* trigger IE7 hasLayout so spans position accurately */
}
.sf-sub-indicator {
   position:        absolute;
   display:        block;
   right:            6px;
   top:        25px; /* IE6 only */
   width:            10px;
   height:            10px;
   text-indent:     -999em;
   overflow:        hidden;
   background:        url('../img/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */
}
a > .sf-sub-indicator {  /* give all except IE6 the correct values */
   background-position: 0 -100px; /* use translucent arrow for modern browsers*/
}
/* apply hovers to modern browsers */
a:focus > .sf-sub-indicator,
a:hover > .sf-sub-indicator,
a:active > .sf-sub-indicator,
li:hover > a > .sf-sub-indicator,
li.sfHover > a > .sf-sub-indicator {
   background-position: -10px -100px; /* arrow hovers for modern browsers*/
}

/* point right for anchors in subs */
.sf-menu ul .sf-sub-indicator { background-position:  -10px 0; }
.sf-menu ul a > .sf-sub-indicator { background-position:  0 0; top:10px; }
/* apply hovers to modern browsers */
.sf-menu ul a:focus > .sf-sub-indicator,
.sf-menu ul a:hover > .sf-sub-indicator,
.sf-menu ul a:active > .sf-sub-indicator,
.sf-menu ul li:hover > a > .sf-sub-indicator,
.sf-menu ul li.sfHover > a > .sf-sub-indicator {
   background-position: -10px 0; /* arrow hovers for modern browsers*/
}

/* ------- Search ------- */
li.sf-search {
 float: right!important;
 padding:6px 10px 2px 3px !important;
 margin:0 !important;
}
li.sf-search input {
   background: url("../img/search_loop.png") no-repeat scroll left center transparent;
   border:2px solid #ddd;
   color:#555555;
   text-align: center;
   color:#FFFFFF;
   font-size:12px;
   padding:3px 3px 6px;
   margin:0;
   width:133px;
}

form#searchbox{

}
li.sf-search input:focus, li.sf-search input:hover {
   background-color:#F6F6F6;
   color:#555;
}
li.sf-search input#search_btn {
   background:none repeat scroll 0 0 #750000;
   color:#FFFFFF;
   font-family:rockwell,georgia;
   font-size:11px;
   padding:2px;
   text-transform:uppercase;
   width:38px;
}
li.sf-search input#search_btn:hover {
   background-position:center bottom;
}

/*-- CSS3 Dropdown Menu from http://www.webdesignerwall.com/ -- */
.sf-contener {
   float:left;
   margin:0 0 8px;
   width:100%;
}
.sf-menu{
   line-height:100%;
   margin:0;
   padding:0px 0 0;
}
.sf-menu li {
   margin:-10px 2px 0 0;
   padding: 0;
   float: left;
   position: relative;
   list-style: none;

}

/* main level link */
.sf-menu a {
   display:block;
   font-size:12px;
   font-weight:bold;
   text-decoration:none;
   text-transform:capitalize;
   margin:0;
   text-align:center;
   color:#FFFFFF;
   width:82px;
   padding:24px 10px 13px;

   }
.sf-menu a:hover {
   color: #fff;
   background: url('../img/hover.gif') no-repeat;

}

/* main level link hover */
.sf-menu  li.current a{
   background:url("../img/hover.gif") repeat-x scroll left top transparent;
   color:#fff;

   margin:0;
}


.sf-menu  li:hover > a {

   }

/* sub levels link hover */
.sf-menu ul li:hover a, .sf-menu li:hover li a {
   border: none;
   color: #000;


}
.sf-menu ul a:hover {
   background: #fff none repeat scroll 0 0 !important;
   color: #000 !important;

}
.sf-menu ul a {
   color:#444 !important;
   line-height:0;
   height:0;
   padding:15px;
   text-align:left;
   width:87%;
}

/* dropdown */
.sf-menu li:hover > ul {
   display: block; 

}

/* level 2 list */
.sf-menu ul {
   display: none;
   margin: 0;
   padding: 0;
   width:220px;
   position: absolute;
   top: 46px;
   left: 0;
   background: #ddd none repeat scroll 0 0;
   border-top:1px solid #999;
   z-index:1;
}
.sf-menu ul li {
   float: none;
   margin: 0;
   padding: 0;
   border-left:1px solid #999999;
   border-right:1px solid #999999;
   border-bottom:1px solid #999999;
   border-top:none;

}
.sf-menu li ul li a{
   background: none!important;
}

/* level 3+ list */
.sf-menu ul ul {
   left: 218px;
   top: 0px;
   border-top:1px solid #999999;
    z-index: 1;
}



/* rounded corners of first and last link */
.sf-menu ul li:first-child > a {
background: none;

}
.sf-menu ul li:last-child > a {
background: none;

}

/* clearfix */
.sf-menu:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}
.sf-menu { display: inline-block; } 
html[xmlns] .sf-menu { 
   background:url('../img/menu.png') no-repeat;
   height:48px;
   display:block;
   padding:0;
}

* html .sf-menu { height: 1%; }

[razaro]

OK because categories have zindex 100 you can put menu to 200 .Here is code

/* level 2 list */
.sf-menu ul {
display: none;
margin: 0;
padding: 0;
width:220px;
position: absolute;
top: 46px;
left: 0;
background: #ddd none repeat scroll
0 0;
border-top:1px solid #999;
z-index:200;
}

[johnme]

Thanks Boss Really thanks a lot

great help


Works Great

OK because categories have zindex 100 you can put menu to 200 .Here is code

/* level 2 list */
.sf-menu ul {
display: none;
margin: 0;
padding: 0;
width:220px;
position: absolute;
top: 46px;
left: 0;
background: #ddd none repeat scroll
0 0;
border-top:1px solid #999;
z-index:200;
}