PDA

View Full Version : Annoying menu CSS


Sat0ri
12-18-2009, 11:03 PM
Trying to change the color behavior on our main nav bar on the Office Blue skin, but one little item is giving me FITS!

The idea is simply to have all links (main or sub) in the navbar appear in white, with a mouseover (hover) turning them to yellow.

Got all of it done, except for the submenus (dropdown) in which the items are turning yellow automatically when the menu opens... I'd like the

In the attached screencap, with the menu open, I'd like "POLICIES" to appear in yellow (as it's been activated by the mouse) and the sub-items (Secure, Shipping, Privacy) to appear in white until you mouseover on any one of them (turning yellow individually)... Right now, it seems that it's all white or all yellow with the changes I've been able to make in blue.css (Blue Office theme).

Could someone point me in the right direction on how to make this happen?

I've gone through every #Menu part of the CSS file in my efforts, to no avail.

Here's my CSS at the moment:

/* top menu: view cart, wish lists, order status, my account */

#TopMenu li a, #TopMenu li div {
border-left: 1px solid #208db5;
color: #fff;
}

/* top menu: sign in, create an account */

#TopMenu li div a {
border-left: 0;
color: #fff;
}

/* top menu: ALL for MOUSEOVER */

#TopMenu li a:hover {
color: #ff0;
text-decoration: none;
}

/* NAV BAR */

#Menu li a {
background: url('../../default/images/blue/PagesMenuBgA-01.jpg') 0 8px no-repeat;
color: #fff;
}

/* ????? */

#Menu li ul li a {
background: #000000;
color: #fff;
}

/* ????? */

#Menu li ul li a:hover {
background-color: #000000;
text-decoration: none;
}

/* NAV BAR MOUSEOVER */

#Menu li:hover a, #Menu li.over a{
text-decoration: none;
color: #ff0;
}

Any help would be greatly appreciated, I'm at my wits end. :confused:

Sat0ri
12-18-2009, 11:07 PM
Also, as long as I'm here...

Is there an easy way to have the dropdown use a semi-transparent background instead of the pure black?

Much like how Lightbox obscures the site behind with a semi-transparency when it loads a photo.

I can certainly change the color (black to white for example), but I'm not sure how to apply a semi-transparent background effectively in this instance.

Thanks in advance for any assistance. :)

Sat0ri
12-20-2009, 01:40 AM
*bump*

Anxious, and Interspire is SOOOOOOOOO slow to respond to trouble tickets.

Sat0ri
12-21-2009, 01:48 AM
Perhaps I'm working in the wrong part the the CSS?

Here, from styles...

#Menu { /* <-- FIRST LINE */
clear: both;
/* margin: 0 0 4px ; */
margin: 5px 0 5px 4px ;
padding: 0;
/* height: 26px; */
height: 15px;
}

#Menu ul {
margin: 0;
padding: 0;
}

#Menu li {
float: left;
position: relative;
list-style: none;
margin: 0;
padding: 0;
}

#Menu li.First a {
background-image: none;
border-left: none;
}

#Menu li a {
display: block;
float: left;
font-size: 0.9em;
font-weight: bold;
text-align: center;
text-decoration: none;
/* padding: 4px 10px 4px 10px; */
padding: 4px 10px 4px 10px;
/* height: 26px; */
height: 26px;
letter-spacing: 0.1em;
border-left: 1px solid #208db5;
}

#Menu li a:hover {
text-decoration: underline;
}

#Menu li ul { /* <-- SUBMENU BODY */
width: auto;
position: absolute;
clear: left;
top: 30px;
left: 0;
display: none;
text-align: left;
font-size: 0.9em;
background: transparent;
z-index: 1;
}

#Menu li ul li {
clear: both;
color: white;
text-align: left;
background: transparent;
}

#Menu li ul li a {
/* padding: 3px 10px 3px 10px; */
padding: 4px 10px 4px 10px;
font-size: 1em;
text-align: left;
margin: 0;
width: 175px;
height: auto;
}

#Menu li ul li a:hover {
text-decoration: none;
}

#Menu li:hover a, #Menu li.over a{
text-decoration: underline;
}

#Menu li ul li a, #Menu li.over li a {
text-decoration: none !important;
}

#Menu li:hover ul, #Menu li.over ul {
display: block;
}


Please, I'm dying here and it's been almost 3 days since I placed my trouble ticket with Interspire. :(

Sat0ri
12-21-2009, 01:50 AM
If I've unknowingly committed a faux pas of some kind, please let me know, happy to adjust.