Trouble with menu CSS

Hi there,

This is my first post here.

I'm having difficulty modifying some code for a template I'd purchased. It's a template designed specifically for a Joomla site, but for the next few weeks it's going to basically be a single-page, html/css/js set of pages (long story short, the original Joomla installation is several years old and will require a lot of upgrading to the added modules in addition to the core site itself, so it was decided to just get SOMEthing nice looking up in the meantime.

Here's the test page: http://www.YourBusyBee.com/fb/

Ok, so I'm working in Dreamweaver CS5 for this stuff. In Live View, my parent menu items are not showing up correctly - the text appears white on the hover. But after I uploaded to my testing page, that first level menu appears correctly. However, the sub-level is still showing up wrong in BOTH Dreamweaver Live View AND in FF (I haven't checked IE yet) - upon hover of the "About" menu item, the sub menu items *should* show up below in the color black. The hover styling shows up correctly though - a red background with white text.

I have gone over and over the CSS for this portion of the page, and just can't for the LIFE of me figure out what's wrong with it.

As a lesser issue, I would prefer for the white boxes behind the sub-menu items to appear at 50% transparency. I *think* this would need to be done in the js, but I'm not familiar enough with that to know how to solve it.

Can anyone assist me with this? I suspect it's a pretty quick fix.

Thanks in advance.

All the best,
~Laura

you never specified a background-color:

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-96.png

* try adding:

#header .main_menu ul.menu ul li a {
display: block;
background: none;
padding: 0 0 0 20px;
font-weight: normal;
line-height: 26px;
text-align: left;
font-size: 16px;
width: 156px;
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #fff; <------------------ white
background-color: #000;
or
color: #000
}


* for a transparency: http://css-tricks.com/2151-rgba-browser-support/


background: rgb(180, 180, 180); /* fallback */
background: rgba(180, 180, 180, .5);

/* fallback ie - converted rgb to hex */
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#b4b4b4,endColorstr=#b4b4b4);


rgba is not cross browser supported, but if you wanted a background transparency that is, you would use opacity, however this is a lot more complicated

* for dreamweaver, try posting in the dreamweaver forum along with some pictures of the problem. I don't use dreamweaver, I use notepad

ahhhhhhh! THANK you! I must've been looking at the code for too long and just totally missed it. Thank you Thank you Thank you!

Only thing is, the transparency code did not work. I'm still suspicious that it's something within the js on the index page. I shall keep trying though.

One additional question: I tried to create a 2nd version of the Readon class in order to create a smaller button in the "Featured Author" box, but it had come out very very odd. Is there anything I should be doing differently with that code? I believe it's still in the layout.css file, called Readon2, I just haven't used it on the index page now.

* PROBLEM 1: transparency code not working

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-97.png


rgba(255, 255...


^ no space

--------------

* PROBLEM 2: Button malfunction

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-98.png

you want it pushed down?

--------------

Only thing is, the transparency code did not work. *I'm still suspicious that it's something within the js on the index page.
I did not check but im 99% its not in the js

Q: did you want the text or the background 50% transparent?.

Many thanks, Sammy! I don't think it's really a Dreamweaver issue. But since the CSS changes haven't done anything to the background transparency, I'm still thinking it's a javascript issue. I'm assuming there's a forum category for that here too though, so I shall just head on over there for that issue.

THANKS AGAIN! You rock!

~Laura

it's not a js issue... js is for effects, css is for style (background color is a style)

1. add the transparency background code to replace the background: #fff on line 123 in layout.css

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-99.png



2. remove background-color: #fff at the bottom of line 201 in layout.css

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-100.png


END RESULT:
http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-101.png

the drop down needs to be slightly lower:

http://i1114.photobucket.com/albums/k535/auroralight1/Untitled-102.png
change top: 26; to top: 28;

---------------

if you want to decrease the transparency amount, just change the .5 at the end of background: rgba(180, 180, 180, .5); to .8 or so

Ah, ok. For some reason I wasn't able to get the transparency to work the way I was imagining it that way, so I replaced it with some opacity code. I will, however, keep playing with it since you mentioned difficulties with this way of doing it.

In the meantime, regarding the button issue:

I really just want the button itself it be smaller in height, and the font proportionately smaller as well. Basically, the white box behind this section should have the same amount of space to the top of the picture as from the bottom of the picture, and right now there's too much space below. If that means it needs to be set more to the right as well, so be it. But I would prefer for it to be left aligned under the text, next to the image.

go ahead and post the full html script for the page and the css files, if it exceeds the codingforums character limit (is there even one?), put it on mediafire. I find step by step instructions to be strenuous, I can just fix the mistakes myself with the script