CMS Made Simple Forums

Posted: **Wed Feb 21, 2007 11:11 pm**

Greetings all.

I'm just getting started with CMSMS and experimenting with simple vs. CSS menu templates. I think I have a pretty clear understanding of things, but modifying the 'hover' behavior is giving me trouble. I'd like my menu text to go bold on hover, but it appears that the style sheet makes the sub-menu items (of the item being hovered over) all bold as well. The odd thing is that when I experiment with modifying the background color for the same purpose instead, it works as expected: only acting on the menu items being hovered over.

I'm using a slightly modified version of 'CSSMenu-Vertical' template, with both the 'bold' and 'background' set to work on hover, so that you can see the difference in behavior.

This is the main nugget, but the whole sheet is below.

/* Styling the appearnce of menu items on hover */
#primary-nav li:hover,
#primary-nav li.menuh,
#primary-nav li.menuparenth,
#primary-nav li.menuactiveh {
font-weight: bold;
background-color: #34dd56;
}

Any help would greatly appreciated. ~S

see what I mean at by logging in (for some reason it asks you to log in twice) at
http://www.fallingtheater.net/chow/
un=chow pw=chowne

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

/* Unless you know what you do, do not touch this */
#primary-nav, #primary-nav ul {
list-style: none;
margin: 0px;
padding: 0px;
width: 100%;
margin-left: -1px; /* relative left location of entire list in sidebar*/
}

/* controls for layout of non-parent items */
#primary-nav ul {
position: absolute;
top: 0;
left: 100%; /* relative left location of fly-outs, but paint order makes this unworkable*/
display: none;
width: 120px; /* skinny up the fly-outs with absolute widths -
progressive nature using % makes this dangerous */
}

#primary-nav li {
margin-bottom: -1px;
position: relative;
}

/* Styling the basic apperance of the menu elements */
#primary-nav a {
border: 1px solid #006699;
display: block; /* creates container for text and color */
margin: 0px;
padding: 5px 10px;
color: #006699; /* text color */
font-size: 110%;

text-decoration: none;
background: transparent;
min-height:1em; /* Fixes IE7 whitespace bug*/
}

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

/* Styling the basic apperance of the active page elements */
#primary-nav li.menuactive {
background-color: #ececec; /* background chain of menu items for page displayed - awkward*/
}

/* 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 {
font-weight: bold;
background-color: #34dd56;
}
#primary-nav li.menuh {

}
#primary-nav li.menuparenth {

}
#primary-nav li.menuactiveh {

}

/* 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;
}

/* IE Hack, will cause the css to not validate */

#primary-nav li, #primary-nav li.menuparenth { _float: left; _height: 1%; }
#primary-nav li a { _height: 1%; }

/* section header */
#primary-nav li.sectionheader {
border-left: 1px solid #006699;
border-top: 1px solid #006699;
font-size: 130%;
font-weight: bold;
padding: 1.5em 0 0.8em 0.5em;
background-color: #fff;
margin: 0;
width: 100%;
}

/* separator */
#primary-nav li hr.separator {
display:block;
height: 0.5em;
color: #abb0b6;
background-color: #abb0b6;
width: 100%;
border:0;
margin:0;
padding:0;
border-top: 1px solid #006699;
border-right: 1px solid #006699;
}

Posted: **Thu Feb 22, 2007 7:20 pm**

Try changing this section to add font-weight: normal; -

Code: Select all

#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;
font-weight: normal; 
}

Posted: **Mon Feb 26, 2007 10:39 pm**

Wow. Yup, that did the trick. Thanks very much for that. I gather that the bold-ness was being automatically inherited down the text of the menu items, but the color block was not, because of the presence of the 'display' property. ?

I've decided that I prefered that the text not change length (due to widening on 'bold'), but rather just change color to black. I hacked around and figured out how to do it.

It's still somewhat mysterious, but I'm slowly getting it.

Thanks Again!

~S

Posted: **Tue Feb 27, 2007 2:52 am**

Glad to have helped out.

CMSMS is pretty powerful, for a "simple" system and takes some tinkering.

Nullig

CMS Made Simple Forums

CSSMenu hover issue [solved]

CSSMenu hover issue [solved]

Re: CSSMenu hover issue

Re: CSSMenu hover issue [solved]

Re: CSSMenu hover issue [solved]