PDA

View Full Version : how to adjust the last drop down menu position??


fattat
07-30-2009, 03:29 AM
i doing a drop down menu
the drop down menu for the last menu "contact us" is too long and exceed the background menu,
1) how to align the last drop down menu to become the picture 2??
2) another question is when i insert "contact us" for the last menu, the dropdown is diappear, but if insert "contact" the drop down menu can show properly...how to solve it??

picture1
http://img154.imageshack.us/img154/3469/hover.jpg (http://img154.imageshack.us/i/hover.jpg/)

picture2
http://img35.imageshack.us/img35/5982/correcte.jpg (http://img35.imageshack.us/i/correcte.jpg/)


html code

<!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>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title> Stu Nicholls | CSSplay | Professional variable width menu #5</title>
<link rel="icon" href="../favicon.ico" type="image/ico" />
<link rel="stylesheet" href="menu.css" type="text/css" />
<!--[if lte IE 7]>
<link rel="stylesheet" media="all" type="text/css" href="ie.css" />
<![endif]-->

</head>

<body>

<ul id="nav">
<li><a href="#nogo">HOME</a></li>
<li><a class="down" href="#nogo">ABOUT US</a>
<ul>
<li><a href="#nogo">Who we are Who we are</a></li>
<li><a href="#nogo">What we do</a></li>
<li class="last"><a href="#nogo">Where to find us</a></li>
</ul>
</li>
<li><a class="down" href="#nogo">PRODUCTS</a>
<ul>
<li><a class="fly" href="#nogo">Tripods</a>
<ul>
<li><a href="#nogo">Monopods</a></li>
<li><a href="#nogo">Tripods</a></li>
<li><a href="#nogo">Adjutable head Adjutable head</a></li>
<li><a href="#nogo">Fixed</a></li>
<li><a href="#nogo">Flash mount</a></li>
<li class="last"><a href="#nogo">Floating head</a></li>
</ul>
</li>
<li><a class="fly" href="#nogo">Films</a>
<ul>
<li><a href="#nogo">35mm</a></li>
<li><a href="#nogo">Color Print</a></li>
<li><a href="#nogo">Black and White</a></li>
<li><a href="#nogo">Roll</a></li>
<li class="last"><a href="#nogo">Color Slide</a></li>
</ul>
</li>
<li><a class="fly" href="#nogo">Cameras</a>
<ul>
<li><a class="fly" href="#nogo">Compact</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
<li><a href="#nogo">Minolta</a></li>
<li class="last"><a href="#nogo">Pentax</a></li>
</ul>
</li>
<li><a class="fly" href="#nogo">Digital</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a class="fly" href="#nogo">Nikon</a>
<ul>
<li><a class="fly" href="#nogo">Lenses</a>
<ul>
<li><a href="#nogo">Standard</a></li>
<li><a href="#nogo">Telephoto</a></li>
<li><a href="#nogo">Wide Angle</a></li>
<li><a href="#nogo">Fish Eye</a></li>
<li><a href="#nogo">Mirror</a></li>
<li class="last"><a href="#nogo">Macro</a></li>
</ul>
</li>
<li><a href="#nogo">Speedlight</a></li>
<li><a class="fly" href="#nogo">Coolpix</a>
<ul>
<li><a href="#nogo">Coolpix S10</a></li>
<li><a href="#nogo">Coolpix L2</a></li>
<li><a href="#nogo">Coolpix S500</a></li>
<li><a href="#nogo">Coolpix P5000</a></li>
<li><a href="#nogo">Coolpix 4600</a></li>
<li class="last"><a href="#nogo">Coolpix S6 Silver</a></li>
</ul>
</li>
<li><a href="#nogo">D200</a></li>
<li class="last"><a href="#nogo">D80</a></li>
</ul>
</li>
<li><a href="#nogo">Minolta</a></li>
<li class="last"><a href="#nogo">Pentax</a></li>
</ul>
</li>
<li class="last"><a class="fly" href="#nogo">SLR</a>
<ul>
<li><a href="#nogo">Canon</a></li>
<li><a href="#nogo">Nikon</a></li>
<li><a href="#nogo">Minolta</a></li>
<li><a href="#nogo">Pentax</a></li>
<li class="last"><a href="#nogo">Panasonic</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#nogo">Flash</a></li>
<li class="last"><a href="#nogo">Video</a></li>
</ul>
</li>
<li><a class="down" href="#nogo">FAQs</a>
<ul>
<li><a href="#nogo">Cameras</a></li>
<li><a href="#nogo">Film types</a></li>
<li class="last"><a href="#nogo">Digital Photography</a></li>
</ul>
</li>
<li><a class="down" href="#nogo">PRIVACY</a>
<ul>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="last"><a href="#nogo">Privacy Statement</a></li>
</ul>
</li>
<li><a class="topLink" href="#nogo">CONTACT US</a></li>
<li><a class="down" href="#nogo">PRIVACY</a>
<ul>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="last"><a href="#nogo">Privacy Statement</a></li>
</ul>
</li>
<li><a class="down" href="#nogo">CONTACT</a>
<ul>
<li><a href="#nogo">Privacy Policy</a></li>
<li class="last"><a href="#nogo">Get A Free Cheap Ticket</a></li>
</ul>
</li>
</ul>


</body>
</html>



css code

@charset "UTF-8";
/* CSS Document */
/* ================================================== ==============
This copyright notice must be kept untouched in the stylesheet at
all times.
The original version of this stylesheet and the associated (x)html
is available at http://www.cssplay.co.uk/menus/pro_variable4.html
Copyright (c) 2005-2007 Stu Nicholls. All rights reserved.
This stylesheet and the associated (x)html may be modified in any
way to fit your requirements.
================================================== ================= */
#nav {padding:0 0 0 30px; margin:0; list-style:none; font: 11px arial, sans-serif; position:relative; z-index:200; background:url(play.gif) no-repeat; height:36px; width:670px;}

#nav ul {padding:0; margin:0; list-style:none; float:left; background:#e5ba00; border-top:1px solid #fe7; border-color:#fe7 #b80 #b80 #fe7;}
#nav li {float:left;}
#nav li li {float:none; border-left:1px solid #fe7; border-right:1px solid #b80;}
#nav li li.last {border-bottom:1px solid #b80;}
/* a hack for IE6 */
* html #nav li li {float:left;}
#nav li a {display:block; float:left; color:#fff; height:36px; padding:0 25px 0 5px; line-height:36px; text-decoration:none; white-space:nowrap; font-weight:bold;}
#nav li a.down {background:url(down.gif) no-repeat right center;}
#nav li li a {display:block; height:20px; line-height:20px; float:none; padding:0 25px 0 5px; font-weight:normal; letter-spacing:1px;}
#nav li li a.fly {background:url(fly.gif) no-repeat right center;}
#nav li:hover {position:relative; z-index:300;}
#nav li.cssplay_hover {position:relative; z-index:300;}
#nav li.cssplay_hover a {color:#000;}
#nav li li a {color:#000;}
#nav li li.cssplay_hover a {color:#fff; background-color:#d5aa00;}
#nav li:hover ul {left:0; top:33px; z-index:500;}
#nav li.cssplay_hover ul {left:0; top:33px; z-index:500;}
#nav ul {position:absolute; left:-9999px; top:-9999px;}
* html #nav ul {width:2px;}
/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:-5px; margin-left:100%; top:-1px; z-index:500;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto; }
/* show path followed */
#nav li:hover > a {color:#000;}
#nav li li:hover > a {color:#fff; background-color:#d5aa00;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
#nav li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover a
{color:#fff; background-color:#d5aa00;}
#nav li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li a
{color:#000; background-color:#e5ba00;}
/* show next level */
#nav li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul
{left:100%; margin-left:-5px; top:-1px;}
/* keep further levels hidden */
#nav li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul,
#nav li.cssplay_hover li.cssplay_hover li.cssplay_hover li.cssplay_hover ul ul
{position:absolute; left:-9999px; top:-9999px;}

fattat
07-30-2009, 07:21 AM
anyone help??

edbr
07-30-2009, 07:45 AM
did you first try to make the containing div wider?

DWcourse
07-30-2009, 01:27 PM
1. Create a special style and apply it to the last drop down set only.
2. You probably need to take out some of the padding. I'm assuming that adding "us" so the last item is forcing the menu to take up more width than you have allowed it.