[Solved] Menu is behind the text

[Pépou]

Hello,

I downloaded a theme and I want to add a horizontal menu. I almost succeeded but when I roll over the menu, the boxes which appear stay behind the texts of the main page.

Try the menu hear, it'll be clearer : http://sd-14692.dedibox.fr/anat/.

Here is the template I use :

{sitename} - {title}
{metadata}
{stylesheet}

{cms_selflink dir="start" rellink=1}
{cms_selflink dir="prev" rellink=1}
{cms_selflink dir="next" rellink=1}
{literal}

=b){nw=b+"px";}if(w



#pagewrapper {width:expression(P7_MinMaxW(720,950));}
#container {height: 1%;}


{/literal}










terrafirma1.0
by nodethirtythree






   {menu template='TerraFirma'}




{breadcrumbs starttext='You are here' root='Home' delimiter='»'} {content}









Navigation
{menu template='minimal_menu.tpl' start_level='1' collapse='1'}



News

{cms_module module="news"}







This site is powered by CMS Made Simple | Design by NodeThirtyThree | Modified for CMSMS by Liebeskarten

This is my css menu :

/* Horizontal menu for the CMS CSS Menu Module */
/* by Alexander Endresen */

#menu_vert {
   margin-left: 1px;
   margin-right: 1px;
   font-size: 9pt
}

/* The wrapper clears the floating elements of the menu */

/* Fix for Opera 8 */
.clearb { clear: both; }
#menuwrapper {
   /* Fix for Opera 8 */
   /*   overflow: hidden;  */
   background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
   border-bottom: 0px solid #C0C0C0;
   width: 100%;
}

/* Set the width of the menu elements at second level. Leaving first level flexible. */
#primary-nav li li {
   width: 200px;
}


/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
   list-style: none;
   margin: 98px 0px 20px 0px;
   padding: 0px 20px 0px 5px;
}
#primary-nav ul {
   position: absolute;
   top: 42px;
   display: none;
}
#primary-nav ul ul {
   margin-top: 1px;
   margin-left: -1px;
   left: 100%;
   top: 0px;
}

#primary-nav li {
   margin-left: -1px;
   float: left;
}
#primary-nav li li {
   margin-left: 0px;
   margin-top: -1px;
   float: none;
   position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
   display: block;
   margin: 0px;
   padding: 5px 10px;
   text-decoration: none;
   color: #FFFFFF;
}
#primary-nav li a {
   border-right: 1px solid #C0C0C0;
   border-left: 1px solid #C0C0C0;
}
#primary-nav li li a {
   border: 1px solid #C0C0C0;
}
#primary-nav li, #primary-nav li.menuparent {
   background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive {
   background: #46461F url(uploads/TerraFirma/a16.gif) repeat-x;
}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav ul li.menuparent,
#primary-nav ul li.menuparent:hover,
#primary-nav ul li.menuparenth {
/* arrow for menuparents */
   background-image: url(images/cms/arrow.gif);
   background-position: center right;
   background-repeat: no-repeat;
}


/* Styling the apperance of menu items on hover */

#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
   background-color: #E7AB0B;
}


/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */

/*
just add
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul ul ul,
for fourth level
*/
#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li:hover ul ul ul,
#primary-nav li:hover ul ul ul ul,   
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
   display: none;
}
#primary-nav li.menuparenth ul ul ul {
   display: none;
}
#primary-nav li.menuparenth ul ul ul ul {
   display: none;
}

/* add
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul li.menuparenth ul,
for fourth level
*/
#primary-nav li:hover ul,
#primary-nav ul li:hover ul,
#primary-nav ul ul li:hover ul,
#primary-nav ul ul ul li:hover ul,
#primary-nav ul ul ul ul li:hover ul,
#primary-nav li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul {
   display: block;
}
#primary-nav ul ul ul li.menuparenth ul {
   display: block;
}
#primary-nav ul ul ul ul li.menuparenth ul {
   display: block;
}

/* IE Hacks */
#primary-nav li li {
   float: left;
   clear: both;
}
#primary-nav li li a {
   height: 1%;
}

This is the copy of the menu.tpl (which is cmsmenu.tpl) :

{* CSS classes used in this template:
#menuwrapper - The id for the that the menu is wrapped in. Sets the width, background etc. for the menu.
#primary-nav - The id for the
.menuparent - The class for each that has children.
.menuactive - The class for each that is active or is a parent (on any level) of a child that is active. *}
{if $count > 0}


{foreach from=$nodelist item=node}
{if $node->depth > $node->prevdepth}

{repeat string="" times=$node->depth-$node->prevdepth}
{elseif $node->depth prevdepth}

{repeat string="" times=$node->prevdepth-$node->depth}

{elseif $node->index > 0}
{/if}
{if $node->parent == true or ($node->current == true and $node->haschildren == true)}
current == true}
haschildren == true}
type == 'sectionheader'}
        {$node->menutext}
{elseif $node->type == 'separator'}
       
{else}
type != 'sectionheader' and $node->type != 'separator'}
href="{$node->url}" {if $node->accesskey != ''}accesskey="{$node->accesskey}" {/if}{if $node->tabindex != ''}tabindex="{$node->tabindex}" {/if}{if $node->titleattribute != ''}title="{$node->titleattribute}"{/if}{if $node->target ne ""} target="{$node->target}"{/if}>{$node->hierarchy}: {$node->menutext}
{elseif $node->type == 'sectionheader'}
>{$node->hierarchy}: {$node->menutext}
{/if}

{/foreach}

{repeat string="" times=$node->depth-1}



{/if}

What can I change so that the menu can be in front of the text ??
Thank you in advance !

[Nullig]

#primary-nav li li {
  width: 200px;
  z-index: 4;
}


Nullig

[Dr.CSS]

Did it come with these calls...?

/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
  list-style: none;
  margin: 98px 0px 20px 0px;
  padding: 0px 20px 0px 5px;
}
#primary-nav ul {
  position: absolute;
  top: 42px;
  display: none;
}

[Pépou]

Thanks a lot ! It works !

[Pépou]

And do you know how can I remove the numbers before the title in the menu ??
Thank you !

[Jean le Chauve]

Va dans la gestion de menu et supprime ce qu'il y a entre les tags ..</dfn}

[Pépou]

Merci !! 

Dernière petite chose, les menus qui apparaissent on roll over sont décallés de quelques pixels.. Comment faire pour combler l'espace ??

(j'espère avoir été clair.. !)

En tout cas merci pour votre aide !

[Jean le Chauve]

#primary-nav, #primary-nav ul {

padding:0 20px 0 0;
}

[Pépou]

Super merci !!

[Pépou]

One more thing, the "accueil" box doesn't become orange on mouth roll over.. How come ??
( http://www.nice-anatomie.fr )