different menus for each item

Hi,

I need to create different menus for each section, article

example 1: url : http://mafo.cl/v2/nuestra-compania.html


should look like:


and other
example 2:


etc... and more menus

css as it should build, where to place them and tell where each menu has to be with each design

I think that this is only possible by publishing mod_menu module (or custom HTML module) on every single article page.

I have already activated mod_menu but I want to know how to make the css to work in these menus

http://mafo.cl/v2/nosotros.html

Hi,

place this code in menu "override.css" and css class I placed "navinos" but nothing happens

url : http://www.mafo.cl/v2/nosotros.html

Code: Select all

#navinos { 
   list-style:none;
   margin:0;
   padding:0;
}
#navinos li {
   margin:2px;
   padding:0;
   float:left;
}
#navinos li a {
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
}

#navinos li a:hover {
   color:#99CC00;
   background-color:#003366;
}

You have added a class but use suffix as ID. In CSS by dot you mark class and by '#' the ID's. Your code should look like :

Code: Select all

.navinos { 
   list-style:none;
   margin:0;
   padding:0;
}
.navinos li {
   margin:2px;
   padding:0;
   float:left;
}
.navinos li a {
   display:block;
   width:100px;
   padding:4px 0;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#000000;
}

.navinos li a:hover {
   color:#99CC00;
   background-color:#003366;
}

Hi

Works very well

but not work a:active

url: http://www.mafo.cl/v2/nuestro-equipo.html
http://www.mafo.cl/v2/nuestra-compania.html

Code: Select all

.navinos { 
   list-style:none;
   margin:0;
   padding:0;
}
.navinos li {
   margin:2px;
   padding:0;
   float:left;
}
.navinos li a {
   display:block;
   width: auto;
   padding:5px 15px;
   text-decoration:none;
   text-align:center;
   font-size:11px;
   color:#FFFFFF;
   background-color:#6CC72A;
}

.navinos li a:hover {
   color:#99CC00;
   background-color:#5FAD25;
}

.navinos a:active {
   color:#FFFF00;
   background-color:#5FAD25;
}

Active menu item you can style in this way :

Code: Select all

.navinos li.active a { /* your CSS rules goes here */ }