CSS Drop down menu glitch/error?
Hi guys, really need help with this drop down menu issue I have for my personal blog archives.
The drop down menu consists of a Top Level: (Archives)
And a Second Level: 2008
And sub levels under that : Jan, Feb, Mar etc.
Therefore, it should be: Archives (Hover over and you will see 2008), and then when 2008 appears, (Hover over 2008 and the different months appear).
However, what's happening now is whenever I hover over Archives, EVERYTHING shows at once. I've been trying to fiddle around with it and I still dont get it.
The code below is:
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>· Immaculate Recherche. ·</title>
<meta name="Author" content="Stu Nicholls" />
<meta name="Keywords" content="cssplay, css, play, Cascading, Style, Sheets, opacity, layouts, navigation, menus, experiments,demonstrations, photo, photograph, gallery, slide, slideshow, picture, drop, down, pull, up, fly, out, free" />
<meta name="Description" content="CSS - Cutting edge Cascading Style Sheets. Experiments in CSS" />
<meta name="verify-v1" content="n3Dpx4NklZjg5p/Tq7h1q+Oj6Ml83crtkO/PwepVQ6Y=" />
<meta http-equiv="imagetoolbar" content="no" />
<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_play4.css" />
<style type="text/css">
@import url(http://www.google.com/cse/api/branding.css);
#search {width:360px; top:10px; float:right; text-align:right;}
</style>
<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/final_drop.html
Copyright (c) 2005-2008 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
=================================================================== */
.menu {width:745px; height:32px; position:absolute; left: 232px; z-index:100;border-right:1px solid #000; font-family:arial, sans-serif;}
/* hack to correct IE5.5 faulty box model */
* html .menu {width:746px; w\idth:745px;}
/* remove all the bullets, borders and padding from the default list styling */
.menu ul {padding:0;margin:0;list-style-type:none;}
.menu ul ul {width:149px;}
/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
.menu li {float:left;width:149px;position:relative;}
/* style the links for the top level */
.menu a, .menu a:visited {display:block;font-size:12px;text-decoration:none; color: #FF9999; text-align:center; width:146px; height:30px; border:1px solid #000; border-width:1px 0 1px 1px; background:#333333; padding-left:1px; line-height:29px; font-weight:bold;}
/* a hack so that IE5.5 faulty box model is corrected */
* html .menu a, * html .menu a:visited {width:149px; w\idth:138px;}
/* style the second level background */
.menu ul ul a.drop, .menu ul ul a.drop:visited {background:#333333 url(http://www.cssplay.co.uk/menus/bread...grey-arrow.gif) no-repeat 130px center;}
/* style the second level hover */
.menu ul ul a.drop:hover{background:#FF9999 url(http://www.cssplay.co.uk/menus/bread...blue-arrow.gif) no-repeat 130px center;}
.menu ul ul :hover > a.drop {background:#FF9999 url(http://www.cssplay.co.uk/menus/bread...blue-arrow.gif) no-repeat 130px center;}
/* style the third level background */
.menu ul ul ul a, .menu ul ul ul a:visited {background:#333333;}
/* style the third level hover */
.menu ul ul ul a:hover {background:#b2ab9b;}
/* hide the sub levels and give them a positon absolute so that they take up no room */
.menu ul ul {visibility:hidden;position:absolute;height:0;top:31px;left:0; width:149px;border-top:1px solid #000;}
/* another hack for IE5.5 */
* html .menu ul ul {top:30px;t\op:31px;}
/* position the third level flyout menu */
.menu ul ul ul{left:149px; top:-1px; width:149px;}
/* position the third level flyout menu for a left flyout */
.menu ul ul ul.left {left:-149px;}
/* style the table so that it takes no ppart in the layout - required for IE to work */
.menu table {position:absolute; top:0; left:0; border-collapse:collapse;;}
/* style the second level links */
.menu ul ul a, .menu ul ul a:visited {background:#d4d8bd; color:#A3A3A3; height:auto; line-height:1em; padding:5px 10px; width:128px;border-width:0 1px 1px 1px;}
/* yet another hack for IE5.5 */
* html .menu ul ul a, * html .menu ul ul a:visited {width:150px;w\idth:128px;}
/* style the top level hover */
.menu a:hover, .menu ul ul a:hover{color:#000; background:#FF9999;}
.menu :hover > a, .menu ul ul :hover > a {color:#000; background:#FF9999;}
/* make the second level visible when hover on first level list OR link */
.menu ul li:hover ul,
.menu ul a:hover ul{visibility:visible;}
/* keep the third level hidden when you hover on first level list OR link */
.menu ul :hover ul ul{visibility:hidden;}
/* make the third level visible when you hover over second level list OR link */
.menu ul :hover ul :hover ul{visibility:hidden;}
</style>
<div class="menu">
<ul>
<li><a href="../">Archives<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a class="drop" href="../">2008<!--[if IE 7]><!--></a><!--<![endif]-->
<!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="../2008_01_01_blacksaccharine_archive.html">January</a></li>
<li><a href="../2008_02_01_blacksaccharine_archive.html">February</a></li>
<li><a href="../2008_03_01_blacksaccharine_archive.html">March</a></li>
<li><a href="../2008_04_01_blacksaccharine_archive.html">April</a></li>
<li><a href="../2008_05_01_blacksaccharine_archive.html">May</a></li>
<li><a href="../2008_06_01_blacksaccharine_archive.html">June</a></li>
<li><a href="../2008_07_01_blacksaccharine_archive.html">July</a></li>
<li><a href="../2008_08_01_blacksaccharine_archive.html">August</a></li>
<li><a href="../2008_09_01_blacksaccharine_archive.html">September</a></li>
<li><a href="../2008_10_01_blacksaccharine_archive.html">October</a></li>
<li><a href="../2008_11_01_blacksaccharine_archive.html">November</a></li>
<li><a href="../2008_12_01_blacksaccharine_archive.html">December</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>
Thank you.
CSS Codes
Reply With Quote
Originally Posted by bluewalrus
Bookmarks