[SOLVED] CSS menus not displaying correctly

For discussion and questions related to CMS Specific templates and stylesheets (CSS), and themes. or layout issues. This is not a place for generic "I don't know CSS issues"
Post Reply
tommycahir
Forum Members
Forum Members
Posts: 17
Joined: Tue Mar 03, 2009 11:29 am

[SOLVED] CSS menus not displaying correctly

Post by tommycahir »

Hi Guys

I am a relative newbie to CMSMS and I a,m having an issue with the menu on a site not nesting sub items correctly.

The issue can be seen by hovering on the products menu @ http://tburke.ie/ocmech/

I am using the simple navigation menu template.

Can anybody help with this I suspect it is an issue in the CSS but am not sure?

Your help as always is greatly appreciated.

CSS code for Menu

Code: Select all

/********************/
/*  NAVIGATION BAR  */
/********************/

/* MAIN MENU */
.navbar ul {list-style-type:none;}
.navbar ul li {float:left; z-index:auto !important /*Non-IE6*/; z-index:1000 /*IE6*/; background-color:rgb(255,255,255);}
.navbar ul li a {float:none !important /*Non-IE6*/; float:left /*IE-6*/; display:block; height:3.1em; line-height:3.1em; padding:0 16px 0 16px; text-decoration:none; font-weight:bold; color:rgb(100,100,100); border-right:solid 0px rgb(221,0,0);}
.navbar ul li ul {display:none; border:none;}

/* SUBMENU (Non-IE6 hovering) */
.navbar ul li:hover {position:relative;} /*Sylvain IE hack*/
.navbar ul li:hover a {background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/
.navbar ul li:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.0em; margin-top:0.1em; left:0; padding:0px 16px 0px 16px; border-top:solid 1px rgb(215,215,215);}
.navbar ul li:hover ul li a {white-space:normal; display:block; width:10.0em; height:auto; line-height:1.3em; margin-left:-17px; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.navbar ul li:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/

/* SUBMENU (IE6 hovering) */
.navbar table {position:absolute; z-index:1000; top:0px; left:-1px; border-collapse:collapse;}
.navbar ul li a:hover {position:relative /*Sylvain IE hack*/; z-index:1000 /*Sylvain IE hack*/; background-color:rgb(235,235,235); text-decoration:none;} /*Color main cells hovering mode*/
.navbar ul li a:hover ul {display:block; width:10.0em; position:absolute; z-index:1000; top:3.1em; t\op:3.0em; left:0px; marg\in-top:0.1em; border-top:solid 1px rgb(215,215,215); }
.navbar ul li a:hover ul li a {white-space:normal; display:block; w\idth:10.0em; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-right:solid 1px rgb(215,215,215); border-left:solid 1px rgb(215,215,215); border-bottom: solid 1px rgb(215,215,215); background-color:rgb(235,235,235); font-weight:normal; color:rgb(100,100,100);} /*Color subcells normal mode*/
.navbar ul li a:hover ul li a:hover {background-color:rgb(225,225,225); text-decoration:none;} /*Color subcells hovering mode*/
Last edited by tommycahir on Tue Apr 05, 2011 7:35 pm, edited 1 time in total.
mike-r

Re: CSS menus not displaying correctly

Post by mike-r »

Cannot see anything what mysterious.

What problem exactly, which Browsers you have tested?
tommycahir
Forum Members
Forum Members
Posts: 17
Joined: Tue Mar 03, 2009 11:29 am

Re: CSS menus not displaying correctly

Post by tommycahir »

Hi
I actually got this resolved by removing the below CSS code and adding the CSS Horizontal menu from the default install.

Thanks for the help and time to look at the issue.
Post Reply

Return to “Layout and Design (CSS & HTML)”