PDA

View Full Version : css horizontal drop down menu

dajohnson1s
06-15-2008, 08:18 AM
Hello,

I had originally wanted to do this to help out a friend, thinking this would not be a big deal. I had followed this (http://sperling.com/examples/menuh/) tutorial, it works great for firefox, but internet explorer 7 it messes up big time.

I have read in some detail about the :hover issue. I assume that is what the hover.htc file is going to correct. I feel like I had followed the tutorial pretty well, but if I could just get a clarification on how to make this actually happen would be great.

This is what I am doing:
<html>
<head>
<link rel="stylesheet" href="menuh.css" type="text/css" />

<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->


</head>
<body>
<div id="menuh-container">
<div id="menuh">
<ul>
<li><a href="#" class="top_parent">Home</a>

</li>
</ul>

<ul>
<li><a href="#" >About</a>
</ul>
<ul>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Poster</a></li>
<li><a href="#">Brochure</a></li>
<li><a href="#">Photo</a></li>
<li><a href="#">logo</a></li>
<li><a href="#">ect</a></li>
</ul>
</ul>
<ul>
<li><a href="#">Contact</a>
</ul>

... repeat and alter the list as needed

</div> <!-- end the menuh-container div -->
</div> <!-- end the menuh div -->

</body>
</html>

css


#menuh-container
{
position: absolute;
top: 1em;
left: 1em;
}

#menuh
{
'font-size: small;
'font-family: arial, helvetica, sans-serif;
font-family: Adobe Garamond Pro;
width:100%;
float:left;
margin:2em;
margin-top: 1em;
}

#menuh a
{
text-align: center;
display:block;
border: 1px solid #555;
'border: 0px;
white-space:nowrap;
margin:0;
padding: 0.3em;
}

#menuh a:link, #menuh a:visited, #menuh a:active /* menu at rest */
{
color: black;
background-color: royalblue;
text-decoration:none;
}

#menuh a:hover /* menu at mouse-over */
{
color: color;
background-color: cornflowerblue;
text-decoration:none;
}

#menuh a.top_parent, #menuh a.top_parent:hover /* attaches down-arrow to all top-parents */
{
background-image: url(navdown_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh a.parent, #menuh a.parent:hover /* attaches side-arrow to all parents */
{
background-image: url(nav_white.gif);
background-position: right center;
background-repeat: no-repeat;
}

#menuh ul
{
list-style:none;
margin:0;
padding:0;
float:left;
width:9em; /* width of all menu boxes */
}

#menuh li
{
position:relative;
min-height: 1px; /* Sophie Dennis contribution for IE7 */
vertical-align: bottom; /* Sophie Dennis contribution for IE7 */
}

#menuh ul ul
{
position:absolute;
z-index:500;
top:auto;
display:none;
padding: 1em;
margin:-1em 0 0 -1em;
}

#menuh ul ul ul
{
top:0;
left:100%;
}

div#menuh li:hover
{
cursor:pointer;
z-index:100;
}

div#menuh li:hover ul ul,
div#menuh li li:hover ul ul,
div#menuh li li li:hover ul ul,
div#menuh li li li li:hover ul ul
{display:none;}

div#menuh li:hover ul,
div#menuh li li:hover ul,
div#menuh li li li:hover ul,
div#menuh li li li li:hover ul
{display:block;}

This is directly from the site. What I am unfamilar with is the "div#menuh li..." is this a 'hack' of some sort?

thanks
Daniel
[/LIST]
Millenia
06-15-2008, 09:49 AM
What I am unfamilar with is the "div#menuh li..." is this a 'hack' of some sort?

It's not a hack
#menuh li
It's just telling you how to style a <li> tag in your HTML.
So if you use the following in your HTML
<li>Whatever</li>
It will be told how to make it look from the style sheet
effpeetee
06-15-2008, 11:03 AM
This site may help you with further examples. (http://www.cssplay.co.uk/menus/)

Frank
dajohnson1s
06-15-2008, 04:13 PM
frank, thanks for the site. it says on there that I can use them for personal sites, but how to i access them?

Is there a download link or something that I am missing?

thanks
effpeetee
06-15-2008, 04:54 PM
Usually I download the site into my editor or into notepad (View source). Then start by removing obviously surplus code and go on from there.:D

Maybe someone knows of a different/better way. If so please give it.

Frank

This is the code for one of the pages with meta lines removed. If you have any difficulty, let me know what page you are interested in and I will try to help. Remove the red "Base" line of code when finished, it is there to enable the pick of the graphics etc frim the cssplay site.



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>

<base href="http://www.cssplay.co.uk/menus/drop_definition3.html">

<link rel="meta" href="http://www.cssplay.co.uk/labels.rdf" type="application/rdf+xml" title="ICRA labels" />
<meta http-equiv="pics-Label" content='(pics-1.1 "http://www.icra.org/pics/vocabularyv03/" l gen true for "http://cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0) gen true for "http://www.cssplay.co.uk" r (n 0 s 0 v 0 l 0 oa 0 ob 0 oc 0 od 0 oe 0 of 0 og 0 oh 0 c 0))' />
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.cssplay.co.uk/feed.xml" />
<link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" media="all" type="text/css" href="../css/css_play.css" />
<link rel="stylesheet" media="all" type="text/css" href="../css/menus.css" />

<style type="text/css">
/* ================================================================
This copyright notice must be untouched at all times.

The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/drop_definition3.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the assocaited (x)html may be modified in any
way to fit your requirements.
=================================================================== */
#menu {list-style-type:none; margin:40px auto 100px auto; padding:0; width:608px;}
#menu li {float:left; padding:0; margin:0 1px 0 0; position:relative; width:150px; height:3em; z-index:100;}
#menu li dl {position:absolute; top:0; left:0; padding-bottom:0;}
#menu li a, #menu li a:visited {text-decoration:none;}
#menu li dd {display:none;}
#menu li a:hover {border:0;}
#menu li:hover dd, #menu li a:hover dd {display:block;}
#menu li:hover dl, #menu li a:hover dl {padding-bottom:10px;}
#menu table {border-collapse:collapse; padding:0; margin:-1px; font-size:1em;}
#menu dl {width: 150px; margin: 0; padding: 0; background: transparent;}
#menu dt {margin:0; padding: 0;}

#menu dd {margin:0; padding:0; color: #fff; font-size: 1em; text-align:left;}

#menu dt a, #menu dt a:visited {display:block; font-size: 0.9em; color: #038; text-align:center; border:1px solid #08c; border-width:0 1px 1px 1px; background:#d4d4d4; padding:0.25em 0 0.75em 0;}

#menu li:hover dt a, #menu a:hover dt a {color:#006; background:#ddd; border:1px solid #08c; border-width:0 1px 1px 1px;}

#menu dd a, #menu dd a:visited {background:#08c; color:#fff; padding:0.5em 0; text-decoration:none; display:block; text-align:center; border-left:1px solid #08c; border-right:1px solid #08c;}

#menu dd a:hover {background: #ddd; color:#000; border-left:1px solid #08c; border-right:1px solid #08c;}

#menu b {display:block; overflow:hidden; height:1px;}

#menu b.p1 {background:#08c; margin:0 5px;}
#menu b.p2 {background:#d4d4d4; border:2px solid #08c; border-width:0 2px; margin:0 3px;}
#menu b.p3 {background:#d4d4d4; margin:0 2px; border:1px solid #08c; border-width:0 1px;}
#menu b.p4 {height:2px; background:#d4d4d4; margin:0 1px; border:1px solid #08c; border-width:0 1px;}
#menu b.p5 {background:#08c; margin:0 5px;}
#menu b.p6 {background:#08c; margin:0 3px;}
#menu b.p7 {background:#08c; margin:0 2px;}
#menu b.p8 {height:2px; background:#08c; margin:0 1px;}

#menu li:hover b.p2, #menu a:hover b.p2 {background:#fff;}
#menu li:hover b.p3, #menu a:hover b.p3 {background:#f0f0f0;}
#menu li:hover b.p4, #menu a:hover b.p4 {background:#e8e8e8;}


</style>


</head>

<body id="www-cssplay-co-uk">
<div id="wrapper">
<a href="#content" class="hiddenfromview" accesskey="X" title="skip to content">skip to content</a>
<div id="header">
<div id="logo">

<h1><a accesskey="1" href="../index" title="Home Page">CSS</a></h1>
<h2><a accesskey="1" href="../index" title="Home Page"><i>p</i>lay</a></h2>
<h3>Experiments with Cascading Style Sheets</h3>

</div> <!-- end of logo -->
<div id="toplink">
<ul>
<li><a class="highlite" accesskey="H" href="../service" title="Help and Services">HELP &amp; ASSISTANCE</a></li>
<li><a accesskey="Q" href="../faqs" title="Frequently Asked Questions">FAQs</a></li>
<li><a accesskey="N" href="../w3c/contact" title="Contact us">CONTACT ME</a></li><li><a accesskey="V" href="../w3c/privacy" title="Privacy Policy">PRIVACY POLICY</a></li> <li><a accesskey="S" href="../sitemap" title="Site map">SITE MAP</a></li>
<li><a accesskey="K" href="../accesskeys" title="Accesskeys">ACCESSKEYS</a></li>
<li><a accesskey="P" href="../support" title="Support">SUPPORT</a></li>
<li><a accesskey="R" href="http://www.cssplay.co.uk/feed.xml" title="RSS2.0 feed"><img src="../images/rss.png" alt="rss feed" title="RSS2.0 feed" /></a></li>

</ul>
</div>
<div id="midlink">
<ul id="main_menu">
<li><a accesskey="A" href="../menu/">Demos</a></li><li><a class="chosen" accesskey="M" href="../menus/">Menus</a></li><li><a accesskey="Y" href="../layouts/">Layouts</a></li><li><a accesskey="B" href="../boxes/">Boxes</a></li><li><a accesskey="Z" href="../mozilla/">Mozilla</a></li><li><a accesskey="E" href="../ie/">Explorer</a></li><li><a accesskey="O" href="../opacity/">Opacity</a></li> <li class="java"><a accesskey="J" href="http://www.stunicholls.com" title="Over to http://www.stunicholls.com">Javascript</a></li>
</ul>
</div>
<div id="botlink">
<ul id="sub_menu">

<li><a accesskey="H" href="../index">HOME</a></li>
<li><a href="index.html" accesskey="F" title="First - Section List">LIST</a></li><li><a href="drop_definition2.html" accesskey="P" title="Previous">PREVIOUS</a></li><li><a href="drop_definition4.html" accesskey="N" title="Next">NEXT</a></li><li><a href="vertical_slide.html" accesskey="L" title="Last">LAST</a></li> <li><a href="http://www.cssplay.co.uk/comments/comments.php?comment_id=Drop%20down%20definition%20list%20three" accesskey="C" title="Comments for this page">COMMENTS</a></li>
<li>TUTORIAL</li> </ul>
</div> <!-- end of botlink -->
<div id="search">
<form id="seek" method="get" action="http://www.google.co.uk/custom">
<p><label id="formlab" title="Search" for="searchtext">&nbsp;</label><br />
<a href="http://www.google.com/">
<img src="http://www.google.com/logos/Logo_25wht.gif" alt="Google" title="Google" width="75" height="32" /></a>

<input type="hidden" name="domains" value="www.cssplay.co.uk" />
<input tabindex="27" id="searchtext" alt="Search Text" type="text" name="q" size="25" maxlength="255" value=" enter search text" />
<input tabindex="28" type="submit" name="sa" value="Find" />
<br />
<input type="radio" tabindex="29" alt="sitesearch" name="sitesearch" id="sitesearch" value="www.cssplay.co.uk" checked="checked" />
<label for="sitesearch">CSSplay</label>
<input type="radio" tabindex="30" alt="websearch" name="sitesearch" id="websearch" value="" />
<label for="websearch">The Web</label>
<input type="hidden" name="client" value="pub-6651950180071236" />
<input type="hidden" name="forid" value="1" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="oe" value="UTF-8" />
<input type="hidden" name="safe" value="active" />
<input type="hidden" name="cof" value="GALT:#008000;GL:1;DIV:#336699;VLC:663399;AH:center;BGC:FFFFFF;LBGC:336699;ALC:0000FF;LC:0000FF;T:000 000;GFNT:0000FF;GIMP:0000FF;LH:100;LW:100;L:http://www.cssplay.co.uk/google_play.gif;S:http://www.cssplay.co.uk;LP:1;FORID:1;" />
<input type="hidden" name="hl" value="en" />
</p>
</form>
</div> <!-- end of search -->

</div> <!-- end of header -->
<div id="showcase">

<div id="info">

<h2>A Definition List drop-down menu three</h2>
<h3>5th November 2006</h3>

<ul id="menu">
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><a href="../menu/index.html">DEMOS</a></dt>
<dd><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars</a></dd>
<dd><a href="../menu/embed.html" title="Wrapping text around images">wrapping text</a></dd>
<dd><a href="../menu/form.html" title="Styling forms">styled form</a></dd>
<dd><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></dd>
<dd><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></dd>
<dd><a href="../menu/old_master.html" title="Image Map for detailed information">image map</a></dd>
<dd><a href="../menu/bodies.html" title="fun with background images">fun with backgrounds</a></dd>
<dd><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></dd>
<dd><a href="../menu/em_images.html" title="em size images compared">em sized images</a><b class="p8"></b><b class="p7"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><a href="index.html">MENUS</a></dt>
<dd><a href="spies.html" title="a coded list of spies">spies menu</a></dd>
<dd><a href="vertical.html" title="a horizontal vertical menu">vertical menu</a></dd>
<dd><a href="expand.html" title="an enlarging unordered list">enlarging list</a></dd>
<dd><a href="enlarge.html" title="an unordered list with link images">link images</a></dd>
<dd><a href="cross.html" title="non-rectangular links">non-rectangular links</a></dd>
<dd><a href="jigsaw.html" title="jigsaw links">jigsaw links</a></dd>
<dd><a href="circles.html" title="circular links">circular links</a><b class="p8"></b><b class="p7"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><a href="../layouts/index.html">LAYOUTS</a></dt>
<dd><a href="../layouts/bodyfix.html" title="Cross browser fixed layout">Fixed 1</a></dd>
<dd><a href="../layouts/body2.html" title="Cross browser fixed layout">Fixed 2</a></dd>
<dd><a href="../layouts/body4.html" title="Cross browser fixed layout">Fixed 3</a></dd>
<dd><a href="../layouts/body5.html" title="Cross browser fixed layout">Fixed 4</a></dd>
<dd><a href="../layouts/minimum.html" title="A simple minimum width layout">minimum width for Internet Explorer</a><b class="p8"></b><b class="p7"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<!--[if lte IE 6]><a href="#nogo"><table><tr><td><![endif]-->
<dl>
<dt><b class="p1"></b><b class="p2"></b><b class="p3"></b><b class="p4"></b><a href="../mozilla/index.html">MOZILLA</a></dt>
<dd><a href="../mozilla/dropdown.html" title="A drop down menu">drop down menu</a></dd>
<dd><a href="../mozilla/cascade.html" title="A cascading menu">cascading menu</a></dd>
<dd><a href="../mozilla/content.html" title="Using content:">content:</a></dd>
<dd><a href="../mozilla/moxbox.html" title=":hover applied to a div">mozzie box</a></dd>
<dd><a href="../mozilla/rainbow.html" title="I can build a rainbow">rainbow box</a></dd>
<dd><a href="../mozilla/snooker.html" title="Snooker cue">snooker cue made using border art</a></dd>
<dd><a href="../mozilla/target.html" title="Target Practise">target practise</a><b class="p8"></b><b class="p7"></b><b class="p6"></b><b class="p5"></b></dd>
</dl>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>
</ul>

<br class="clear" />

<div id="adsie">
<script type="text/javascript">
google_ad_client = "pub-6651950180071236";
google_ad_width = 728;
google_ad_height = 90;
google_ad_format = "728x90_as";
google_ad_type = "text_image";
//2007-01-26: Top banner
google_ad_channel ="1786077217";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "008000";
google_color_url = "008000";
google_color_text = "000000";
</script>
<script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"></script>
</div>

</div> <!-- end of info -->
<div id="info_right">
</div>
<br class="clear" />
</div> <!-- end of showcase -->
<div id="content">

<div id="left_column">
<h3>Information</h3>

<p>One final version of a drop down definition list that combines the drop down styling with the snazzy borders styling to give a menu with rounded corners without the need for images.</p>
<p>Again it works in IE6, IE7, Opera 8.5, Opera 9, Firefox 2 etc. IE5.x will see the top level links only.</p>

<h3>Copyright</h3><p>Because of all the time and effort spent in producing this demonstration I would ask that you respect my copyright.</p><p>1. If you are using this on a personal web site then please add a link back to <b class="css">CSS</b><span class="play">play</span> and retain any copyright comment in the stylesheet.<br />A donation to the '<a href="../support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund would be appreciated.</p><p>2. If you are using this on a commercial web site, or as a paying job for a client, then please email me asking for permission - stu{at}cssplay.co.uk and in this case a donation to the '<a href="../support.html">Support <b class="css">CSS</b><span class="play">play</span></a>' fund is required.</p><p>3. If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.</p>
<div id="smalladsie">
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "008000";
google_color_url = "008000";
google_color_text = "000000";
//--></script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
<br /><br />
<script type="text/javascript"><!--
google_ad_client = "pub-6651950180071236";
google_ad_width = 468;
google_ad_height = 15;
google_ad_format = "468x15_0ads_al_s";
google_ad_channel = "";
google_color_border = "FFFFFF";
google_color_bg = "FFFFFF";
google_color_link = "009900";
google_color_text = "FF9900";
google_color_url = "996633";
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<br />
</div>


<div id="right_column">

<h3>Recommended Sites</h3>
<ul class="cssplay">
<li><a href="http://www.all-phuket.com/">Complete travelguide to Phuket</a></li><li><a href=" http://www.dustworld.net/">UK Game Server Hosting</a></li><li><a href="http://www.completemyspace.com/">Free layouts and more - Myspace</a></li><li><a href="http://thehotfix.net/">The Hotfix forum for windows</a></li><li class="spacer"><a href="http://www.ahosting.biz/">web hosting, dedicated servers</a><br /><span class="text">web reseller, managed servers</span></li><li class="spacer"><a href="http://www.hostcolor.com/?refid=0ad4f9e13e81798fea">Host Color</a><br /><span class="text">Web Hosting for 30 Websites</span></li><li class="spacer"><a href="http://www.downloadtube.com/">Software Downloads, Dhtml Scripts</a> <span class="text">Dynamic Html, Software Downloads</span></li><li class="spacer"><a href="http://www.adido-solutions.com/">Web design in Dorset</a><br /><span class="text">Bournmouth based web design agency</span></li><li class="spacer"><a href="http://shopfitter.com/">pay as you go e-commerce</a><br /><span class="text">Build your own SEO friendly webshop</span></li></ul>
<h3>CSS play pages</h3>
<ul class="cssplay">
<li><a href="../ads_page">Advertise at <b class="css">CSS</b><span class="play">play</span></a></li>
<li><a href="../favicon_ads">Favicon Ads at <b class="css">CSS</b><span class="play">play</span></a></li>
<li><a href="../banner_ads">Half Banner Ads at <b class="css">CSS</b><span class="play">play</span></a></li>
</ul>

<br /><br /></div> <!-- end of right column -->
</div> <!-- end of content -->

<div id="far_right">

<h3>CSS play recommend</h3>
<a href="http://www.likno.com?gad=CLCe9sQEEgh3UZXJ6NIxHhj3qbz_AyCcmOY9"><img src="../ads/220x100-awm.jpg" alt="DHTML menu &amp; Javascript menu creator - Powerful web menu solutions" title="DHTML menu &amp; Javascript menu creator - Powerful web menu solutions" width="220" height="100" /></a><a href="http://www.medialab.com/sitegrinder?gad=CLamwvMGEgg8zVGyI1GRuxji78r-AyDa94US"><img src="../ads/sitegrinder.gif" alt="Sitegrinder" title="Sitegrinder - Photoshop plug-in converts designs to fully valid CSS websites" width="220" height="100" /></a><a href="http://www.flashloaded.com/"><img src="../ads/flashloaded.jpg" alt="Flash Loaded" title="Flash Loaded" width="220" height="100" /></a><a href="http://www.dynamicdrive.com/style/"><img src="../ads/dynamicdrive.gif" alt="Free, practical CSS menus, layouts, and examples" title="Free, practical CSS menus, layouts, and examples" width="220" height="100" /></a><a href="http://www.kickapps.com/?utm_source=cssplay&amp;utm_medium=banner&amp;utm_content=220x100"><img src="../ads/kickapps.gif" alt="Social Media Applications On Demand" title="Social Media Applications On Demand" width="220" height="100" /></a><a href="http://www.psd2html.com/order-now.html" title="PSD to HTML: You Design - We XHTML"><img src="../ads/220x100_1_r.gif" alt="PSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS." title="PSD to HTML, PSD to XHTML Service by PSD2HTML.com. You Design - We XHTML / CSS." width="220" height="100" /></a><br />

<br />
</div>


<div id="foot">
<p>&copy; 2005/6/7/8 Stu Nicholls - All rights reserved</p>
<ul>
<li><a href="http://www.icra.org/sitelabel/">ICRA checked site</a></li>
<li><a href="http://validator.w3.org/check/referer" title="Valid XHTML 1.0 Strict!">xhtml 1.0 Strict</a></li>
<li><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://www.cssplay.co.uk/menus/drop_definition3.html" title="Valid CSS!">css 1/2/3</a></li>
</ul>
</div>
</div> <!-- end of wrapper -->

<script src="http://www.google-analytics.com/urchin.js" type="text/javascript">
</script>
<script type="text/javascript">
_uacct = "UA-451410-1";
urchinTracker();
</script>
</body>
</html>
effpeetee
06-15-2008, 05:03 PM
Further to my previous post, have you seen this. - Frank

CSSplay The Web

Frequently Asked Questions at CSSplay
1. Where can I find the page comments?
Every page has its own comments. The links is situated at the top of the page under the main menu. You will find a row of navigations to move back and forward through the demonstrations, the one labelled COMMENTS is the page comments link.
2. Are there any copyright issues with these demonstrations?
Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.
3. Where can I find standards compliant doctypes?
A list of the recommended DTDs can be found at the following link: Recommended DTDs to use in your Web document.
4. I have problems with menus dropping down over flash animations.
If you are having problems with your menu dropping down over a flash object then an answer can be found here FAQ: Navigation (flyout) menus are covered up by other things on the page
5. I am using quirks mode for my layout but my drop-down menu doesn't work in IE7.
Switch on quirks mode by using <?xml version="1.0" encoding="UTF-8"?> which will leave quirks mode on in IE5.x and IE6 but use standards compliant mode for IE7.
6. I have tried using <?xml version="1.0" encoding="UTF-8"?> as suggested in FAQ.5 but I now get a php parse error.
If you are using php to generate your page then it sees <?xml version="1.0" encoding="UTF-8"?> as php and generates a parse error.
Use <?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?> instead.
7. Do you have tutorials for any of your demonstrations?
If there is a tutorial for a particular demonstration then the 'TUTORIAL' link under the main menu at the top of the page will be selectable.
8. But where's the code, zip file, how do I download the example?
I have had many emails asking where the code/style, zip file can be downloaded for the various demonstrations.
Well there is no download facility. The (x)html is always placed in the #info div, so examine the source code, find the <div id="info">.....</div> and in between is the 'code'.
In most case the style is embeded in the page <head>...</head>. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" /> so just add this path to the address in your browser to see the css file.
9. The menus work fine in IE7 but refuse to drop down or fly out in IE6
You are probably running a standalone version of IE6 on the same PC as IE7. If this is the case then IE6 will think that it is IE7 as far as the conditional comments are concerned. Because of this IE6 gets the IE7 specific code instead of the IE6 specific code and will not be able to show the sub levels. You will need to test this on a PC that is not running IE7.