Beginner said:

11/17/04, 322 08 2004 2004:%i:1100696932 08:08:52

Hi I'm a beginner so pls be patient - i'm having trouble with CSS drop down menu's when i embed the css file into the page i'm working on the behavour code works but when i link to the css, even if i use a seperate css file for the behavour code all i get is a list of my drop down menu's but no hover action... can anyone suggest what i've done wrong please?

Mpj said:

11/17/04, 322 12 2004 2004:%i:1100715149 13:12:29

Can you post the code you're using or give a URL to a web page where I can see this code?

Beginner said:

11/18/04, 323 00 2004 2004:%i:1100775600 06:00:00

the css code which links to the site is - layout;

body {
margin:0;
padding:0;
background-color:#6666FF;
behaviour: url(csshover.htc); /* WinIE behaviour call */
}

div#container {
background-color: #BFDDEE;
float: right;
height: auto;
width: 800px;
background-image: url(file:///C|/Documents%20and%20Settings/Suzie/Desktop/LOGOS/standard_logo_web_banner_merged.jpg);
background-repeat: no-repeat;
}

div#leftBorder {
background-color: #B5B9DE;
float: left;
height: 400px;
width: auto;
padding-left: 5px;
margin-top: 20px;
margin-left: 10px;
background-repeat: no-repeat;
border-top-color: #B5B1B8;
border-right-color: #B5B1B8;
border-top-style: solid;
border-right-style: solid;
border-bottom-color: #B5B1B8;
border-bottom-style: solid;
border-left-color: #B5B1B8;
border-left-style: solid;
background-image: url(file:///C|/Documents%20and%20Settings/Suzie/Desktop/webxd3d/images/leftbar1.jpg);
top: auto;

}
div#nav_side {float:left; width:7em; margin: -1px 0 0 -1px;
}
div#nav_side ul ul {margin: 0; padding: 0; width: auto;
position: absolute;
top: 0; left: 7em; visability: hidden;
}
div#nav_side ul.level1 li.submenu: hover ul.level2,
{visability: visable;
}
div#banner {
float: left;
height: 150px;
width: 800px;
background-image: url(file:///C|/Documents%20and%20Settings/Suzie/Desktop/webxd3d/images/standard_logo_web_banner_merged.jpg);
background-repeat: no-repeat;
}
div#footer {
height: auto;
width: 800px;
margin-left: 150px;
margin-top: 5px;
margin-bottom: 5px;
text-decoration: none;
}
div#topButton {
float: left;
width: 800px;
padding-top: 170px;
padding-bottom: 7px;
margin-left: 20px;
margin-right: -40px;
}
div#mainContent {
background-color: #EBF4FA;
float: left;
height: 400px;
width: 650px;
margin-top: 20px;
margin-left: 10px;
padding-left: 15px;
padding-top: 15px;
border-top-color: #77B8DB;
border-right-color: #77B8DB;
border-top-style: dashed;
border-top-width: 2px;
border-right-style: dashed;
border-right-width: 2px;
border-bottom-color: #77B8DB;
border-bottom-style: dashed;
border-bottom-width: 2px;
border-left-color: #77B8DB;
border-left-style: dashed;
border-left-width: 2px;
}

and - text

/* CSS Document */
div#nav li {position: relative; list-style: none; margin: 0;
border-bottom: 1px solid #CCC;}
div#nav li:hover {background: #EBB;}
div#nav li.submenu {background: url(submenu.gif) 95% 50% no-repeat;}
div#nav li.submenu:hover {background-color: #EDD;}
div#nav li a {display: block; padding: 0.25em 0 0.25em 0.5em;
text-decoration: none; width: 6.5em;}

a:link {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
font-variant: normal;
color: #FFFFFF;
text-decoration: none;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #70A5E0;
padding-right: 10px;
border-top-color: #C6DBF2;
border-right-color: #3F86D6;
border-bottom-color: #1E518A;
border-left-color: #ECF3FB;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
font-variant: normal;
color: #FFFFFF;
text-decoration: none;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #70A5E0;
padding-right: 10px;
border-top-color: #C6DBF2;
border-right-color: #3F86D6;
border-bottom-color: #1E518A;
border-left-color: #ECF3FB;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
}
a:hover, a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bolder;
font-variant: normal;
color: #000000;
text-decoration: none;
padding-left: 10px;
padding-top: 5px;
padding-bottom: 5px;
background-color: #C0D8F1;
padding-right: 10px;
border-top-color: #1e518a;
border-bottom-color: #C6DBF2;
border-left-color: #3F86D6;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-width: 2px;
border-right-width: 2px;
border-bottom-width: 2px;
border-left-width: 2px;
border-right-color: #ecf3fb;
}
p {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 14px;
color: #0000FF;
}

Hope this helps - ignoring the linking www ref as these are just to show me that it is working, I haven't got a URL as it is not on the web yet.

thanks - hope you can help - i'll try to get a test area to put it up on the web if this helps - thanks again for taking the time to help me with this.

Baxter said:

11/18/04, 323 48 2004 2004:%i:1100789299 09:48:19

Your css is pretty hairy, but in a nutshell, IE only understands hover events on links. You've got hover on LI. The standard says that's OK, but MS doesn't support it.
Also, you know your images are pointing to your HD, right?

Beginner said:

11/23/04, 328 37 2004 2004:%i:1101202667 04:37:47

Thanks for the reply.

No didn't know the images are pointing to the HD - i though i'd set it up to point at the images folder within the root site.

I can get the items to work if i embedd the css in the html but i can't get them to work if i use the link or import feature (do you know which is prefered i've been looking to see what is best practise @import or link?). sorry sidetracked!

I'm using Eric Meyer on css as my book guide - do you know of a better / had to be simple though guide? or maybe online tutorials?

Thanks for your help again

Ladynred said:

12/01/04, 336 22 2004 2004:%i:1101918166 11:22:46

On thing you must remember when using pseudo-classes for links that you MUST define them in order or you're likely to get unpredictable results. Just think of "LoVe/HAte" - Link, Visited, Hover Active in that order.

As already noted IE does not work well with :hover unless its on a link, but since your list menu IS links, they should work.

Eric's book is great .. you should also look at his CSS discussion list http://www.css-discuss.org and check out the Wiki page. TONS of stuff there for working with list menus.

Layout - CSS drop down menus | WPDFD.com Forums

Beginner said:

Mpj said:

Beginner said:

Beginner said:

Baxter said:

Beginner said:

Ladynred said: