{SOLVED}wanting sub nav to be look different from main navigation

[stuarty80]

Hi,

  I am relatively new to cmsms. I have created the main layout for a site - http://www.stuartbogle.com/cmsmadesimple/index.php, and my menu is working fine. The problem i have is that i would like to have my sub menu slightly different to my main menu. I have attached an image to show what i am trying to achieve.

At the min my main nav items are 260px with an image. For my sub nav, i would like to have 2 rounded corners on the right end and straight on the end nearest the main menu. IS this even possible with cmsms?

Not sure if this will help or not, but i have attached my menu_stylesheet below:

Code: Select all

/* The wrapper determines the width of the menu elements */
#menuwrapper { 
   width: 260px; 
}


/* Unless you know what you do, do not touch this */ 
#primary-nav, #primary-nav ul { 
   list-style: none; 
   margin: 0px; 
   padding: 0px; 
   width: 260px; 
   margin-left: 0px;
}

#primary-nav ul { 
   position: absolute; 
   top: 0px; 
   left: 100%; 
   display: none; 
}
#primary-nav li { 
   margin-bottom: -1px; 
   position: relative; 
}


/* Styling the basic apperance of the menu elements */
#primary-nav a { 
   display: block; 
   padding: 5px 60px; 
   margin: 1px 0px; 
   background:  url(images/nav_normal.gif) left bottom;
   background-repeat: no-repeat;
   color: #606a70;
   text-decoration: none; 
   backgound: transarent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 
}

#primary-nav a:hover {
display: block; 
   padding: 5px 60px; 
   margin: 1px 0px; 
   background:  url(images/nav_over.gif) left bottom;
   background-repeat: no-repeat;
   color: #fa661c;
   text-decoration: none; 
   backgound: transarent; 
   min-height:1em; /* Fixes IE7 whitespace bug*/ 

}


#primary-nav li, #primary-nav li.menuparent { 
   background-color: #fff; 
   min-height:1em; /* Fixes IE7 bug*/
}


/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */
#primary-nav li.menuactive { 
   background-image:  url(images/nav_over.gif);
background-repeat: no-repeat;
 
}

/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */
#primary-nav li.menuparent, 
#primary-nav li.menuparent:hover, 
#primary-nav li.menuparenth { 
   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-image:  url(images/nav_over.gif);
background-repeat: no-repeat;
 
}



/* The magic - set to work for up to a 3 level menu, but can be increased unlimited */
#primary-nav ul, 
#primary-nav li:hover ul, 
#primary-nav li:hover ul ul, 
#primary-nav li.menuparenth ul, 
#primary-nav li.menuparenth ul ul { 
   display: none; 
}
#primary-nav li:hover ul, 
#primary-nav ul li:hover ul, 
#primary-nav 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; 
}

If anyone has any clues about how to go about this i would be very greatful.

thanks

stu

[Nullig]

You could redo your nav_over.gif  and nav_normal.gif to give them rounded transparent corners.

On the main menu, if the background is white, you won't notice the rounded corner. However, on the flyouts that are over other content, the corners would be rounded.

Nullig

[stuarty80]

Thanks, that sounds like the best idea. The only thing is, what about the size of the sub nav. I only want the sub nav to be about 200px, whereas the main nav is 260px.

thanks

stu

[KO]

#primary-nav ul,
#primary-nav li:hover ul,
#primary-nav li:hover ul ul,
#primary-nav li.menuparenth ul,
#primary-nav li.menuparenth ul ul {
  display: none;
width:200px;
}