How to have a drop-down menu stay fixed in place?

H

Hasi

New Member
Hi guys,

long time reader, first time poster.
I've created a template for my photography related website, included some flash, found a free drop-down html/css that can be altered and put it all together by using Dreamweaver 8.
All looks good, but one thing - if the browser window (Mozilla, Chrome or Internet Explorer) is in full mode the drop-down menu looks great, but once you adjust the window size, it messes up.
Anyone can lead me to a solution of this problem?

A plain sample can be found here:

http://mbitions.com/resize/

Thanks for any input :)

Here's the HTML and CSS code

HTML:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>gallery vertical images</title>
<style type="text/css">
<!--
body {
margin-top: 0px;
margin-bottom: 0px;
}
-->
</style></head>
<body bgcolor="#1b1c1f">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<meta name="keywords" content="">
<meta name="description" content="">
<link rel="stylesheet" type="text/css" href="css/default.css">

<!-- dd menu -->
<script type="text/javascript">
<!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;
// -->
</script>
</p>
<ul id="sddm">
<li><a href="http://www.mbitions.com/nature.html" target="_self" onMouseOver="mopen('m1')" onMouseOut="mclosetime()"><IMG SRC="nature.gif" width="66" height="28" border="0"></a>
<div id="m1" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#"><a href="http://www.mbitions.com/naturebw.html" target="_self"><IMG SRC="blackandwhite.jpg" width="83" height="29" border="0"></a> </li>
<li>
<a href="http://www.mbitions.com/urbanscapes.html" target="_self" onMouseOver="mopen('m2')" onMouseOut="mclosetime()"><img src="urbanscapes.gif" width="97" height="30" border="0"></a>
<div id="m2" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="http://www.mbitions.com/urbanscapesbw.html" target="_self"> <IMG SRC="blackandwhite.jpg" width="94" height="25" border="0">
<style type="text/css">
<!--
body {
background-image: url();
background-repeat: no-repeat;
background-color: #1b1c1f;
}
-->
</style>
</a></div>
</li>
<li><a href="http://www.mbitions.com/stageevents.html" target="_self" onMouseOver="mopen('m3')" onMouseOut="mclosetime()"><img src="stage.gif" width="106" height="39" border="0"></a>
<div id="m3" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">TESCHT</a> </li>
<li>
<a href="http://www.mbitions.com/people.html" target="_self" onMouseOver="mopen('m4')" onMouseOut="mclosetime()"><img src="people.gif" width="64" height="25" border="0"></a>
<div id="m4" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">TESCHT</a> </li>
<li><a href="http://www.mbitions.com/stilllife.html" target="_self" onMouseOver="mopen('m5')" onMouseOut="mclosetime()"><IMG SRC="still.gif" width="61" height="31" border="0"></a>
<div id="m5" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">E-mail</a>
<a href="#">Submit Request Form</a>
<a href="#">Call Center</a> </div>
</li>
<li><a href="http://www.mbitions.com/about.html" target="_self" onMouseOver="mopen('m6')" onMouseOut="mclosetime()"><IMG SRC="about.gif" width="64" height="34" border="0"></a>
<div id="m6" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">HTML DropDown</a>
<a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">DropDown Menu</a>
<a href="#">CSS DropDown</a> </div>
</li>
<li><a href="http://www.mbitions.com/contactlinks.html" target="_self" onMouseOver="mopen('m7')" onMouseOut="mclosetime()"><IMG SRC="contact.gif" width="110" height="43" border="0"></a>
<div id="m7" onMouseOver="mcancelclosetime()" onMouseOut="mclosetime()">
<a href="#">HTML DropDown</a>
<a href="#">DHTML DropDown menu</a>
<a href="#">JavaScript DropDown</a>
<a href="#">DropDown Menu</a>
<a href="#">CSS DropDown</a> </div>
</li>
</ul>
<br>
<br>
<br>
<div style="clear:both">
<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="994" height="610" align="absmiddle">
<param name="allowScriptAccess" value="sameDomain" />
<param name="movie" value="gallery vertical images.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#1b1c1f" />
<embed src="gallery vertical images.swf" quality="high" bgcolor="#1b1c1f" width="994" height="610" align="absmiddle" allowscriptaccess="sameDomain" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" />
</object>
</div>
<p></p>
<p>&nbsp;</p>
</body>
</html>


CSS

#sddm
{ margin: 0;
padding: 0;
z-index: 30}

#sddm li
{ margin: 0;
padding: 0;
list-style: none;
float: left;
font: bold 11px arial}

#sddm li a
{ display: block;
margin: 0 0px 0 0;
padding: 1px 0px;
width: 85x`x``px;
background:
color: ;
text-align: center;
text-decoration: none}

#sddm li a:hover
{ background:}

#sddm div
{ position: absolute;
visibility: hidden;
margin: 0;
padding: 0;
background:;
border: 0px solid}

#sddm div a
{ position: relative;
display: block;
margin: 0;
padding: 0px px;
width: auto;
white-space: nowrap;
text-align: left;
text-decoration: none;
background:;
color:;
font: 11px arial}

#sddm div a:hover
{ background: ;
color:}
 
Last edited:
Edge

Edge

Member
Without digging into it (because that's a lot of JS and CSS to work through!) when I get a free snippet from somewhere and it doesn't work as expected on my site, one of the ways I debug is to step by step change the page I've implemented it on until it replicates the sample page on which the snippet works with no bug. Each step I check to see whether bug is still there. At some point in this process the bug disappears and I thereby isolate the issue.
 
PixelPusher

PixelPusher

Super Moderator
Staff member
Phreaddee said:
Put it all in a wrapper with a set width...
Click to expand...

Yeah you could do this or just use the parent container. Try adding
Code: 
ul#sddm {
min-width:670px;
}

The reason the menu items are wrapping underneath one another is due to the css float property applied to the list items.
 
You must log in or register to reply here.
Top