Menu Customize Help (PLEASE)

[marchimself]

Hello...

I need a little help with the menu on : http://www.ukcarplakes.co.uk/cmsmadesim ... page=venue as you can see my menu's all messed up. 

I need them to look like this http://www.ukcarplakes.co.uk/menus.html - but when you click one of the links it reveals the sub navigation.

Thanks marc.

[Dr.CSS]

You need to look thru the default install and find the CSS for the menus and copy one then attach it to the template, you have no style sheets attached to it now...

This system is made to separate the content from the styling to make it cleaner than the old style of having your style in the html...

Start with this one,a copy so you can go back to the original if trouble starts, Navigation: CSSMenu - Horizontal...

[tsw]

I already pasted some CSS for you, please read and understand.

we do answer questions but we cant do all work for you (well we could but it costs some real money ;)

[marchimself]

Hello....

Below is the source code to my CSS Menu, but are thier any guides/tutorials to assist me in editing it to look like www.ukcarplakes.co.uk/menus.html I've tried editing myself without guides and screwed it up "god help me I'm a noob.  lol" 

Thanks.

Code: Select all

/********************
MENU
*********************/

/* hack for Internet Explorer */
* html div#menu_horiz {
   /* hide ie/mac \*/
   height: 1%;
   /* end hide */
}

/* 
background-color for the entire menu row, 
covering 100% of the width and text center-aligned 
*/
div#menu_horiz {
   background-color: #ECECEC;  /* background color for the entire menu row */
   width: 100%;
   margin: 0;
}

/* 
the menu ul box has top and left border, 
right border is provided by the li elements 
*/
div#menu_horiz ul {
   margin: 0;
   padding: 0;
   border-bottom: 1px solid #C0C0C0;
   border-left:  1px solid #C0C0C0;
   height:2.2em;
}


/* menu list items */
div#menu_horiz li {
   float: left; /* makes the list horizontal */
   list-style: none; /* hides the list bullet */ 
   margin: 0 ;
   border-right: 1px solid #C0C0C0;
}


/* the links, that is each list item */
div#menu_horiz a {
   padding: .6em 1em .6em 1.4em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #18507C;
   background: url(images/cms/arrow-right.gif) no-repeat 0.5em center; ;
   display: block; /* IE has problems with this, fixed above */
}


/* hover state for links */
div#menu_horiz li a:hover {
   background-color: #C3D4DF;
}
div#menu_horiz a.activeparent:hover {
   background-color: #C3D4DF;
   color: #18507C;
}

/* active parent, that is the first-level parent of a child page that is the current page */
div#menu_horiz li.activeparent a {
   background: #385C72 url(images/cms/arrow-down.gif) no-repeat 0.4em center; 
   color: #fff;
}

div#menu_horiz h3 {
   padding: .6em 1em .6em 1.4em; /* padding inside the list item box */
   margin: 0; /* margin outside each list item box */
   text-decoration: none; /* no underline for links */
   color: #fff;
   background: #385C72 url(images/cms/arrow-right-active.gif) no-repeat 0.4em center; ;
   display: block; /* IE has problems with this, fixed above */
   font-size: 1em;                           /* instead of the normal font size for <h3> */
}

[tsw]

http://alistapart.com/articles/taminglists/

one of the best starting tutorials.

or if you want the easy way out (without learning much) send me a pm with admin user and pass and Ill take a look at it for a small fee

[Dr.CSS]

Getting close, now where the menu tag for this is, #4F4F4F" id="submenu"> add "collapse="1" " if you go to Extensions » Modules then click the word Help on the right side across from Menu Manager you will see the diff. parameters the menus take and what they mean/do...