CSS Solid Block menu question

[eman]

Hello everyone,

I am trying to create the hover effect for my block menu but it does not work correctly. I used the css code from the solid block menu tutorial. Maybe I missed something or left some out.

http://www.dynamicdrive.com/style/csslibrary/item/solid-block-menu/


Please reference this URL to see what I mean. I want to change the color from blue to black when you place your mouse over it. Also how do you create a drop down list from this solid block menu. Is there a tutorial in Dynamic drive or another source that I could reference. Thank you.

http://www.jenkinscreativedesigns.com/

[jsybol]

Hi,

I am also very new to CSS, but have had the chance to use this same menu and have had great success with it and love it.

To answer your first question. I suggest checking your CSS code under the .solidblockmenu a:hover and look at the background and try changing that to the black and see if that helps. If it doesn't please post your code and someone will be able to help you better.

As for making it a drop down, someone has posted a wonderful website that explains how to create a dropdown menu from this exact tutorial. I found it in the comments on this tutorial. Here is the link. http://www.calmdesign.co.uk/test/blockmenu.html

Good luck.

[boogyman]

Also how do you create a drop down list from this solid block menu. Is there a tutorial in Dynamic drive or another source that I could reference. Thank you.

The CSS pseudo selector :hover is not supported in IE, which is I am going to assume the browser you are using. you would need to apply some a javascript hack to accomplish this. see http://www.alistapart.com/articles/hybrid

[eman]

Thanks for the info.

I am still having a tough time getting the hover effect (change menu block from blue to black) to work. Here is my css code. Pls let me know what I am missing or is incorrect. Also does the urls and gifs help any. It does not seem to effect the color changes at least what I am trying to accomplish.

Thanks again


#container {position: relative; width: 746px; height: 540px; border: solid 1px; margin: 0 auto; background-color: #FFFFFF}
#header {
height: 175px;
padding: -0px;
position: relative;
margin: 0px -4px auto;
background-color: #ffffff;
}

.blockmenu{
margin: 3px;
padding: 0px;
float: left;
font: bold 13px Arial;
width: 99.5%;
border: -3px solid #ffffff;
border-width: 1px 0;
background: #3366cd url(http://jenkinscreativedesigns/images/jcdbluemenuredo.gif) center center repeat-x;
}

.blockmenu li{
display: inline;
}

.blockmenu li a{
float: left;
color: white;
padding: 12px 20px; /* key - 20px controls the space between the links and center links in container*/
text-decoration: none;
border-right: 3px solid white; /*controls size of border around blocks*/
}

.blockmenu li a:visited{
color: white;
}

.blockmenu li a:hover,.blockmenu li .current{
color: white; /*color of text*/
background: #3366cd url(http://jenkinscreativedesigns/images/JCDBlackmenu.gif) center center repeat-x;
}

/* 3366cc url changed blocks to blue*/
</style>

<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 200em;
}
</style>

[jsybol]

eman,

I can't say this will work or not, but it helped me. Try moving your block of code .blockmenu{ to the end of the rest of your block menu code.

I hope that made sense. In the tutorial, the first block of code that is set up which is the solidblockmenu, I had to move it to the bottom after my solidblock li a:hover, .solidblockmenu li .current for it to work correctly.

Try that and see if it works. I also use IE6 and had a few minor problems and switching that to the bottom helped.

[boogyman]

.blockmenu li a:hover,.blockmenu li .current{
color: white; /*color of text*/
background: #3366cd url(http://jenkinscreativedesigns/images/JCDBlackmenu.gif) center center repeat-x;
}

your background isn't showing up because it is following an incorrect format.


selector{
background: #color url('url') repeat attachment position;
}

so your backgroud would need to be declared like background: #3366cd url('/images/JCDBlackmenu.gif') repeat-x center;

//edit

that will change the color of the selected anchor, however like i said before anchor tags are the only psuedo selector that IE supports, so you would need to use some javascript to create the hover in IE. scroll up to find the link I gave you,,,, that site was designed and is maintained by one of the best in the industry. that is a very good tutorial on how to get around the bug

[eman]

Mr Boogyman,

I used some of the A-List code and still can't resolve it. Should I just use the javascript. Please check out my code and see what is missing or incorrect. Thanks


#container {position: relative; width: 746px; height: 540px; border: solid 1px; margin: 0 auto; background-color: #FFFFFF}
#header {
height: 175px;
padding: -0px;
position: relative;
margin: 0px -4px auto;
background-color: #ffffff;
}

.blockmenu{
margin: 3px;
padding: 0px;
float: left;
font: bold 13px Arial;
width: 99.5%;
border: -3px solid #ffffff; /*does nothing*/
border-width: 1px 0;
background: #3366cd url(http://jenkinscreativedesigns/images/jcdbluemenuredo.gif) center center repeat-x;
}

.blockmenu li{
display: inline;
}

.blockmenu li a{
float: left;
color: white;
padding: 12px 20px; /* key - 20px controls the space between the links and center links in container*/
text-decoration: none;
border-right: 3px solid white; /*controls size of border around blocks*/
}

.blockmenu li a:visited{
color: white;
}

.blockmenu li a:hover,.blockmenu li .current{
background: gray url(http://trademarkpropertiescw/images/graybar.gif') repeat-x center;

startList = function() {
if (document.all && document.getElementById) {
blockmenuRoot = document.getElementById("blockmenu");
for (i=0; i<blockmenuRoot.childNodes.length; i++) {
node = blockmenuRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace
(" over", "");
}
}
}
}
}
window.onload=startList;

#blockmenu li.off:hover ul, #blockmenu li.over ul {
display: block;
z-index: 6000;
}

#blockmenu li.off a:hover,
#blockmenu li:hover a,
#blockmenu li.over a {
background: #29497b;
color: #f90;
}


<style type="text/css">
p.iepara{ /*Conditional CSS- For IE (inc IE7), create 1em spacing between menu and paragraph that follows*/
padding-top: 200em;
}
</style>

[boogyman]

you need to use css AND javascript to fix the bug in IE