Style top level menu items only on CSS Dropdown Horiz

[monghidi]

Hi everyone,

I've gotten well into a CMSMS site that's going well (not public yet). I'm using the CSS Menu Horizontal and have it working well with one cosmetic issue.

Question: I want to apply a certain touch to TOP LEVEL menu items ONLY, not the ones that drop down. So far, I haven't been able to separate the top from dropdown menu items in my css. The CSS confuses me a bit, I confess, what with nested lists and lines like:

#primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh ( ....

Specifically, I'm trying to put a 2px bottom border on hover, but only on top level items.

Can anyone who's figured this out give me a tip?

Thanks!

--Monghidi

[Dr.CSS]

Got Link
once you start down that road you may have to just keep going,, 
no just kidding,, well the list has a top level of (depending on your menu)
#primary nav, then, primary nav a and so on this is from a diff. one so just think the 'imap' as 'primary nav',,

/* Unless you know what you do, do not touch this */

#imap{
        list-style: none;
margin: 0px;
padding: 0px; }

#imap ul {
list-style: none;
margin: 0px;
padding: 0px;
}
#imap ul {
position: absolute;
top: auto;
;
}
#imap ul ul {
margin-top: 1px;
margin-left: -1px;
left: 100%;
top: 0px;
}

#imap li {
margin-left: -1px;
float: left;
}
#imap li li {
margin-left: 0px;
margin-top: 1px;
loat: none;
position: relative;
}
#imap li li li {
margin-left: 0px;
margin-top: -1px;

}
#imap li li a{
margin-left: 0px;
margin-top: -1px;
float: none;
position: relative;
}

/* Styling the basic apperance of the menu elements */
#imap a {
display: block;
padding: 0px 0px;
text-decoration: none;
}
#imap li a {text-indent:-9000px;  this is top level
}
#imap li li a {text-indent:0px;  this is next level
        background-color: #A31200;
        padding: 4px 10px;
        border-left:7px solid #F01C00;color:#fff;
      }
#imap li li :hover{background-color: #DE1A00;}


if you break it out like that you can color or style individual elements, if you change a top level element the 'child' elements will pick up the same style so you need,,

#imap li a {  this is top level, add a style
}
#imap li a:hover{
          border-bottom:2px solid #F01C00;  whatever color you want border
          background-color: #DE1A00; whatever color or none up to you
          }

#imap li li a {  this is next level style this or it looks like the top level
        background-color: #A31200;
        padding: 4px 10px;
        border-left:7px solid #F01C00;color:#fff;
      }
#imap li li :hover{background-color: #DE1A00;}

HTH
      mark

[monghidi]

maksbud,

Thank you@! I studied what you have and it is very helpful in understanding some of the breakdown. I appreciate it. Your example doesn't quite apply to my situation, it seems, because I am using a dropdown CSS menu that's automatically generated as pages with parents are added. It came as a default menu option in CMSMS, a stylesheet called 'Default CSS Menu Horizontal' (with attendant template and layout).

It's stylesheet contains components that weren't addressed in your example, such as:

Code: Select all

/* Styling the basic apperance of the active page elements (shows what page in the menu is being displayed) */

#primary-nav li.menuactive { 
	background-color: #C7C7C7; 
	}


/* Styling the basic apperance of the menuparents - here styled the same on hover (fixes IE bug) */

#primary-nav ul li.menuparent, #primary-nav ul li.menuparent:hover, #primary-nav ul li.menuparenth { 
	background-image: url(modules/MenuManager/images/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-color: #E7AB0B; 
	}


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

The child elements are inheriting ALL of the parent elements, or so I believe. I've been through it pretty carefully but can't seem to stop a style that applies to a parent from ALSO applying to the child.

It's really just cosmetics but you know how clients can be. 

My test site is here: http://www.chapuk.org/cmsr/

Thanks again -- any further advice would be helpful.

--monghidi

[Dr.CSS]

what i showed you was a copy of 'Default CSS Menu Horizontal' that i made for an Imap menu,, so i could style all the 'kids' and keep the 'parents' out of it,, all those,,

#primary-nav li.menuactive {
background-color: #C7C7C7;
}
#primary-nav li:hover, #primary-nav li.menuh, #primary-nav li.menuparenth, #primary-nav li.menuactiveh {
background-color: #E7AB0B;
}

weren't doing a thing for me so i picked out the 'kids' the other way,, then there's always this one where every 'kid' has a diff. style applied both for off :hover and on :hover, for which the style sheet was so long i made one CSS just for links,, see what i mean 


    mark

[mikemcvey]

I found this interesting... and helpful!!

For those how search and find this the styles for the children of the #primary-nav use the following...

#primary-nav li li a {  this is next level style this or it looks like the top level
        background-color: #A31200;
        padding: 4px 10px;
        border-left:7px solid #F01C00;color:#fff;
      } 
#primary-nav li li :hover{background-color: #DE1A00;}


Thanks : monghidi 

[Dr.CSS]

O sorry i should have said to change all the #imap to #primary-nav ,,

    mark