Hi forum I've been making this website, using a CSS dropdown menu with submenus. My problem is, the submenu becomes transparent (except for the text in the menu) when pointing the mouse at it. I'm really a beginner at this stuff, so I would really appreciate if one could help me out, since I've no idea where this has gone wrong. Below you'll see the css style sheet: * { margin: 0; padding: 0; } body { margin: auto; width: 900px; background-image: url(../images/background2.jpg); background-repeat: repeat-x; padding: 30px; font: 14px/normal Tahoma, Arial, Helvetica, sans-serif; } td { vertical-align: top; font-size:11px; font-family: Arial; } a { font-size: 11px; /*color:#8e1901;*/ } a:hover { /*color: #666666; */ } h1 { font-family: arial; font-size:24px; color:#2e485c; border-bottom: solid 1px #d9d9d9; font-weight: normal; font-size: 180%; text-indent: 5px; letter-spacing: -1px; } h2 { font-family: arial; font-size:18px; color:#2e485c; } h1,h2,h3 { margin-bottom: .5em; font-family: Arial, Helvetica, sans-serif; line-height: normal; } h3, h4, h5 { FONT-SIZE: 13px; color:#2e485c; FONT-FAMILY: Arial; font-weight:bold; /*padding-left: 95px; padding-bottom: 2px; margin-bottom: 10px; line-height: 10px; border-bottom: 1px solid; margin-left: 95px; margin-right: 530px;*/ } p { font-size:11px; font-family: Arial; margin-bottom: 1em; } .indhold { padding-left: 30px; padding-right: 30px; padding-top: 20px; padding-bottom: 20px; } .indhold h1, h2, h3, h4, h5, h6, { margin-right: 220px; } /* .indhold p{ margin-right: 220px; } */ .menu td{ width: 150px; padding-top: 25px; } /*****************/ #menuline { position: absolute; font-size: 11px; font-family: arial; padding: 0px 0px 0px 0px; /*display: block;*/ } #menuline a.menu { color: #ffffff; text-decoration: none; text-transform: uppercase; padding-left: 25px; line-height: 26px; } #menuline a.menu:hover { /**/ color: #000000; } .ikkese { display: none; } .Submenu { border:1px; solid: #B92B32; display: block; text-decoration: none; width:180px; text-align:left; padding: 0px 0px 0px 10px; color:#ffffff; background-color: url(/images/layout_forside/menu_back.jpg) 0px 0px; line-height: 20px; filter: alpha(opacity=70); } .Submenu a:link,.Submenu a:visited { filter: alpha(opacity=80); width:100%; display: block; /*margin-left:10px;*/ color: #FFFFFF; text-decoration: none; /*background-color: #B92B32;*/ */padding-left: 15px;*/ } .Submenu a:active { filter: alpha(opacity=100); display: block; color: #EEEEEE; text-decoration: none; background-color: #B92B32; } .Submenu a:hover { /*filter: alpha(opacity=100); display: block;*/ color: #000000; text-decoration: none; */background-color: #B92B32;*/ } /****************************************/ .forside { padding-top: 100px; padding-left: 25px; background-repeat: no-repeat; } .forside p { font-size:11px; font-family: Arial; padding-right: 400px; } .bottom { padding-top: 2px; font-size: 10px; color: #FFFFFF; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; } .bottom a{ color: #FFFFFF; font-size: 10px; text-decoration: none; } .bottom a:hover{ text-decoration: underline; } ul { list-style-image: url("../images/arrow.png"); background-position: 0 6px; font-size:11px; font-family: Arial; line-height:19px; padding-right: 0px; } ul.classic { list-style: disc; margin-bottom: 1em; padding-left: 2em; } .dropdown-upward { margin-top: 400px !important; } Thank you for your time!
I'm betting it's only going transparent in IE. What about all the other browsers out there? .Submenu a:link,.Submenu a:visited { filter: alpha(opacity=80); width:100%; display: block; color: #FFFFFF; text-decoration: none; } Code (markup): You say all visited (once-clicked) buttons, get an opacity of 80%. Once they have that as visited links, you can't "bring it back" with the later hover and active states. Opacity only goes one way: less opaque. Or, that's how is is in CSS opacity; It's possibly different with the IE-only opacity. Since you're making the entire submenu only 70% opaque: .Submenu { ... filter: alpha(opacity=70); } Code (markup): and then making it 80% of that on links, no wonder you can't see it anymore. Even if this weren't commented out: .Submenu a:hover { /*filter: alpha(opacity=100); ...*/ } Code (markup): It shouldn't work anyway (again, if IE's special version of opacity works like CSS opacity). 100% opacity on someone is 100% of their parent. Since the parent is 70% opaque, to the child that's as opaque as anyone can ever be, so 100% = 70% at best. They just don't know how to be any opaquer. is that even a word? Because CSS opacity is "inherited" by the children, you get two choices: either use such a light opacity on a light background with dark letters, so you can see a little bit through the main element while still being able to read the text (best you could maybe get away with would be 70%, no lower), OR you'd need two children, siblings: one child has the lesser opacity, and the other child sits right on top of the first, with full opacity. Siblings can't give each other opacity cooties. Otherwise it might be easier (though possibly slower for the browser) to swap background images who are semi-transparent pngs. Won't work in IE6 of course, but that browser doesn't deserve any amount of hard work for goofy stuff like opacity. Give 'em a solid menu and let them upgrade.
Thanks a lot for responding! It's transparent in IE, Firefox and Safari The website is www.westcome.com, should've posted that to begin with, that would've made it a bit clearer So you are saying there is really no simple way to get it to not be transparent at all by changing the css? I don't think it's because I've visited the link before, since I've tried it on different computers. But I'd like to see what you get from visiting the site. It really looks bad at the moment, as you can see, since the text behind the submenu blends with the submenu text, so I really would like to find a way to fix this
hi is this the background image path that is missing /images/layout_forside/menu_back.jpg i tried to save you page but was unable to save the background. it says not found. whats the exact image path. also attach the image so that i can check on local machine. i doubt that the image path is incorrect it should be .Submenu { border:1px; solid: #B92B32; display: block; text-decoration: none; width:180px; text-align:left; padding: 0px 0px 0px 10px; color:#ffffff; background-color: url(../images/layout_forside/menu_back.jpg) 0px 0px; line-height: 20px; filter: alpha(opacity=70); } you are missing two dots before ../ vineet
I haven't find those CSS on website (which you submit here) and on basis of live CSS, you should use ul.dropdown ul li.hover, ul.dropdown ul li:hover { background:#ff0000;} HTML: and then customize as per your need.
holy cow! What the hell, a bazillion different, competing stylesheets all targetting the same item?!?!?? You can see how it confused nehrav: you have css for something called .Submenu but there ain't no .Submenu on that page (maybe another page?). And vinpkl has the right idea: if you're expecting images to appear, their paths are seriously broken. I couldn't find a single image of ALL the images referenced in the CSS. You're not rewriting your URLs on your server are you? My best guess is this: ul.dropdown li.hover, ul.dropdown li:hover { background: url(images/grad2.png) 0 100% repeat-x; color: #000; } Code (markup): (on one of your many other CSS sheets, this line was incorrectly ul.dropdown li.hover, ul.dropdown li:hover { background-color: url(images/grad2.png); } Code (markup): where color paired with an image won't work.) While I see multiple instances were ul.dropdown li gets a background, apparently none of those are ever used. I see two or three different background colours even. So possibly by stating a whole new "background" property on the li:hover, the lack of a stated colour there is defaulting to "transparent" (no background colour) even though I would think it would default to the li's backgroud colour (again, maybe because none of the background statements are even getting through). All that opacity junk was a red herring. Not sure what it was supposed to do, but since it's IE-only, who cares. The "transparency" seen in the non-IE browsers is simply a lack of a background colour on the li's when they are hovered. So nehrav's suggestion, but on a different element, makes sense and you should follow that. You could sure save yourself a LOT of trouble by doing a few things: Get a decent charset. Your page was a sea of ? ? ? in Firefox. Whatever charset your server's spitting out, it ain't what the text content was saved in. If you have Firefox explicitly set to whatever charset the text was saved as, you may not see the ?'s but be aware that other people (esp those not on a Windows machine I'll wager) will see them. It looks like your server is serving the page as the awesome UTF-8. This is good. Possibly the content inside was saved as windows charset 1251? Lose the multiple stylesheets and just have one. One stylesheet. If this is some kind of template, one stylesheet for the menu at least. It's hard to follow who's being expressed when the same thing is repeated, multiple times, with completely different values. Lose multiple ways of naming that ul. Give it a single id or if you want, a single class, not an id and a bunch of classes. For a simple dropdown menu, nobody else needs any ids or classes at all. Refer to the elements themselves: ul#id li span { span styles; } As vinpkl said, check your paths. I see some images on the page, but I don't see any of the CSS images.
Hi again I know it's reaaal messy, but I only found this css script on the net to get a decent looking menu, since it's my first homepage I would never know where to begin making my own one. So this pack of css files contains a lot of scripts that's not needed for this specific menu since it also got scripts for other similar menus. Anyways I finally fixed it! I'm not too proud to admit that it was the images folder in my css folder that just needed renaming to "images". Now it all works as intended. Thanks a lot for your time, I can't believe how awesome it is I can just go to this forum and people will help me fix these kinda things. You made me realize how you actually just read and understand the code without having to translate it.. I really gotta get to that point myself, then I bet it's gonna get a lot of fun making homepages. Thanks a lot yous guys!
Lawlz, sometimes it's just that easy. My first hair-tearer in CSS was an HTML typo : ) However, since not all users or user agents can or will load images, it's still good to throw a background colour on the li:hover so that the underlying text doesn't bleed through for those people. Think "busy wifi-cafe with molassas for internet" where turning images off lets you actually surf. Biggest problem is, you'll have trouble understanding it when there's so much conflict. I mean, it's like "I gotta learn Chinese" and then choosing some mishmash Chinese rap making references to ancient Chinese texts as your learning material : ) I generally recommend the Sons of Suckerfish dropdown menus simply because their code is very clean and easy to get a handle on how dropdowns work. It can be done vertically as well as horizontally. It is missing an IE7 hack (which you'd only need IF you didn't use the IE6 Javascript they supply, but chose instead to use something else) but otherwise it's a nice crossbrowser menu built specifically for those who want a simple, well-coded CSS menu. Their dropdown code helped me get a handle on dropdowns and now I can pretty much write them out of my head.