Layout: Layout - CSS drop down menus

started by Beginner on Nov 17, 2004 — RSS Feed

Beginner Beginner
Posts: 4

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 Mpj
Posts: 76

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

Beginner Beginner
Posts: 4

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Exclusive Design 3d Home Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="title" content="XD3D Home page">
<meta name="keywords" content="Exclusive Design">
<meta name="author" content="Exclusive Design 3D LTD, email sue@xd3d.com">
<link href="css/layout.css" rel="stylesheet" type="text/css" />
<link href="css/text.css" rel="stylesheet" type="text/css" />

</head>
<body>
<div id="container">
 <div id="banner">
               <div id="topButton">
             <p><a href="www.xd3d.com">Home</a><a href="www.xd3d.com">News & Events</a><a href="www.xd3d.com">Designers</a><a href="www.xd3d.com">Members</a><a href="www.xd3d.com">Visitors</a><a href="www.xd3d.com">Shopping Basket</a><a href="www.xd3d.com"></a><br />
           <br/>
Search <input name="Search" type="text" class="search" id="searchF" maxlength="5" />
     </p>
     </div>

<div id="leftBorder">

     <div id="side_nav">
     <ul class="level1">
     <li><a href="/">Popular Products</a></li>
     <li><a href="/unique/">Unique</a>
     <li><a href="/unusual/">Unusual</a>
     <li><a href="/specialist/">Specialist</a>
     <li><a href="/fair trade/">Fair Trade</a>
</ul>
</li>
<ul class="level2">
     <li class="submenu"><a href="fair trade/africa/">Africa</a></li>
     <li class="submenu"><a href="fair trade/india/">India</a></li>
     <li class="submenu"><a href="fair trade/mexica/">Mexico</a></li>
</ul>
</li>
     <li><a href="/ furniture/"> Furniture</a></li><br>
</ul>
</li>
     <ul class="level2">
     <liclass="submenu"><a href="furniture/indoors/">Indoors</a></li>
     <li><a href="furniture/outdoors/">Outdoors</a></li>
     </ul>
     </li>
</div>

</body>
</html>

Beginner Beginner
Posts: 4

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 Baxter
Posts: 157

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 Beginner
Posts: 4

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 Ladynred
Posts: 5

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.

Maskodok Eko Maskodok Eko
Posts: 171

Jasa SEO Profesional

TOP SEO | Jasa SEO Profesional RajaPoker88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya IDRPoker.COM Agen Texas Poker dan Domino Online Indonesia Terpercaya POKERSTAR88.com Agen Texas Poker Dan Domino Online Indonesia Terpercaya D

You must login to reply