...

View Full Version : Problem with CSS drop down



shane1090
03-14-2005, 02:38 PM
Hi forum.

I have a problem with a drop down menu that i created. The page it is on is centered, and my drop down menu is made up of images, and a roll over state, which then displays the drop down menu.

However my problem is that when my window is enlarged, the drop down boxes appear in the right place, but none of the links will work, they just dissapear before i can click them.

When the window is made smaller, to fit the page (i.e. just the actual content on screen) the links will stay there. It seems that the drop downs <li> tags seem to think that the page is aligned left, so the links will be dissapear. Sorry, not really explaining it well. Here is the code to it though.

The below is wrapped around my table on my page to make it center.


#main{
text-align:left;
position: relative;
width:758px;
margin:auto;
}

This next piece of code is for my images in the menu.


<tr>
<td><img src="images/ptype0.jpg" alt="about0" name="menu6_img" width="140" height="20" border="0" usemap="#menu6_imgMap" /></td>
</tr>
<tr>
<td><img src="images/room0.jpg" alt="about0" name="menu7_img" width="140" height="21" border="0" usemap="#menu7_imgMap" /></td>
</tr>
<tr>
<td><img src="images/new0.jpg" alt="about0" name="menu8_img" width="140" height="21" border="0" usemap="#menu8_imgMap" /></td>
</tr>
<tr>
<td><img src="images/count0.jpg" alt="about0" name="menu9_img" width="140" height="21" border="0" usemap="#menu9_imgMap" /></td>
</tr>


This piece of code is for the actually itself.



<div id="menu6" class="menu" style="position:absolute; top: 148px; left: 113px; width: 130px; height: 125px;">
<ul>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=1"?>"><span>&gt;</span> Unusual</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=2"?>"><span>&gt;</span> Derelict</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=3"?>"><span>&gt;</span> Bungalow</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=4"?>"><span>&gt;</span> Flat</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=5"?>"><span>&gt;</span> Terrace</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=6"?>"><span>&gt;</span> Semi-Detached</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=7"?>"><span>&gt;</span> Holiday Home</a></li>
<li><a href="<?php echo "makeover_s.php?type=4&page=1&pt=8"?>"><span>&gt;</span> Detached</a></li>
</ul>
</div>

<div id="menu7" class="menu" style="position: absolute; top: 169px; left: 113px; width: 110px; height: 125px;">
<ul>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=1"?>"><span>&gt;</span> Bedroom</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=2"?>"><span>&gt;</span> Bathroom</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=3"?>"><span>&gt;</span> Kitchen</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=4"?>"><span>&gt;</span> Living Room</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=5"?>"><span>&gt;</span> Loft</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=6"?>"><span>&gt;</span> Conservatory</a></li>
<li><a href="<?php echo "makeover_s.php?type=5&page=1&rt=7"?>"><span>&gt;</span> Other</a></li>
</ul>
</div>
<div id="menu8" class="menu" style="position: absolute; top: 189px; left: 113px; width: 110px; height: 35px;">
<ul>
<li><a href="#"><span>&gt;</span> Today</a></li>
<li><a href="#"><span>&gt;</span> This Week</a></li>
</ul>
</div>
<div id="menu9" class="menu" style="position: absolute; top: 211px; left: 113px; width: 130px;height: 125px;">
<ul>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=1"?>"><span>&gt;</span> United Kingdom</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=2"?>"><span>&gt;</span> France</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=3"?>"><span>&gt;</span> Italy</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=4"?>"><span>&gt;</span> Spain</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=5"?>"><span>&gt;</span> USA</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=6"?>"><span>&gt;</span> Australia</a></li>
<li><a href="<?php echo "makeover_s.php?type=7&page=1&country=7"?>"><span>&gt;</span> New Zealand</a></li>
</ul>
</div>

<map name="menu6_imgMap">
<area shape="rect" coords="1,1,110,20" href="#" onmouseover="down('menu6')" onmouseout="keep('menu6')">
</map>
<map name="menu7_imgMap">
<area shape="rect" coords="1,1,110,22" href="#" onmouseover="down('menu7')" onmouseout="keep('menu7')">
</map>
<map name="menu8_imgMap">
<area shape="rect" coords="1,1,110,21" href="#" onmouseover="down('menu8')" onmouseout="keep('menu8')">
</map>
<map name="menu9_imgMap">
<area shape="rect" coords="1,1,110,20" href="#" onmouseover="down('menu9')" onmouseout="keep('menu9')">
</map>

And now the last part, which is the CSS behind the menu.


div.menu {
visibility: hidden;
width: 110px;
border: 1px solid #D94200;
}

div.menu ul {
list-style-type: none;
margin: 0;
padding: 0;
}

div.menu ul li {
display: inline;

}

div.menu ul li a {
display: block;
margin: 0;
padding: 2px 4px;
border: 1px solid #D94200;
background: #DF6421;

color: #fff;
text-decoration: none;
}

div.menu ul li a span {
color: #F3C6A0;
}

div.menu ul li a:hover {
background: #F69014;
}

div.menu ul li a:hover span{
color: #fff;
}

ronaldb66
03-14-2005, 02:55 PM
Er... it would be really helpful to see this in action; got in online somewhere?

With absolute positioning, it's always a bit tricky to judge by the markup and style alone, especially since you make heavy use of images.

From the top, I find it peculiar that you don't use background images on the lists themselves and seem to instead position them over images defined somewhere else in the markup; this might have something to do with it.

NancyJ
03-14-2005, 03:27 PM
This article (http://www.alistapart.com/articles/horizdropdowns/) appears to be doing a similar thing to you and notes this mystery bug that I think may help you


Mystery IE6 Bug: During the development of this article, I uncovered a strange bug that I believe is only apparent in IE6. A background must be declared on the li a, else when a sub-menu stretches further (vertically) than the main menu itself, the links start to disappear before you have time to click them. Strange! Try it to see for yourself.

brothercake
03-14-2005, 07:48 PM
Yeah I've seen that too - events just "fall through" and are handled by whatever's underneath. A background color usually sorts it out, though it has to be a solid rendered color - transparency or a transparent image doesn't sort it.

shane1090
03-15-2005, 08:40 AM
thanks for your posts. I haven't tryed any of the solutions yet, as i re-did the menu myself due to a strict timescale for the site its for. I'll post back when i have tryed them to let you know if they have worked.

Thanks



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum