CSS Menu

[tony.book]

Hi all. I am new to CMS Made Simple, and REALLY new to CSS based menus. However, I have a site up and running at http://www.faith.edu.ph/index.php. If you browse my site, you will see two menu bars. The first is my JS menu from a previous version of our site. The lower menu is the CSS menu that comes with CMSMS. However, as you will see, two things are happening. 1) the CSS menu does NOT function under IE. 2) The CSS menu is Auto Expanding all sub menus (click on About FA - Boarding and you will see what I mean; each dorm should have 3 sub pages but you will see that they all run into each other. Is there anyone out there show can help me with this? I would like the submenus to ONLY appear when the parent is hovered over. If so, please reply here or email directly to webmaster@faith.edu.ph. Thanks, Tony

[Dr.CSS]

You may need to remove the . in front of src="./uploads/scripts/CSSMenu.js">

Actually I checked and it says there is no such script there, but there is one here...

/modules/MenuManager/CSSMenu.js  , so I would say you need to change it to this path...

Then use this set of calls in your menu CSS to get it to work in both/all 3 browsers...

/* 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,
#primary-nav li.menuparenth 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 li.menuparenth ul,
#primary-nav ul li.menuparenth ul,
#primary-nav ul ul li.menuparenth ul,
#primary-nav ul ul ul li.menuparenth ul {
  display: block;
}

[osn]

Hi!
I have a simular problem. I'm running CMSMS 1.0.2 and I have added the theme "flowered" which seemed like a good start for me to build my own design from.

My problem is that the dropdown-menus dosn't seem to work in IE (mabie in the new IE 7, but I was hoping the older browsers also could be able to see the menu) and it seems to work perfect in FF.

Do you have any ideas of what might cause the problem and what I should change?

Here is my testing-cms site if you want to see the problems: www.dartfrog.tk/cms


My old menus was in .js and looks like this: www.dartfrog.tk and I want the new ones to look and work about the same way when I'm done.


CMS made simple seems great!

Dennis Nilsson, Sweden
www.dartfrog.tk

[Dr.CSS]

You need to put the IE call in the head...

   
   
   

[osn]

Thank you Mark! Works perfect now!

Dennis Nilsson, Sweden
www.dartfrog.tk/cms

[tony.book]

Mark, thank you for the tip about the /module/MenuManager/CSSMenu.js location to change. That worked great. I then followed your information regarding adding the levels and it is now working as desired. Thank you so much.

Another question: How do I get the PARENT menus to stay centered, but LEFT ALIGN all child menus underneath?

Tony

[Dr.CSS]

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