Simple Drop Down Menu Issue

HTML & CSS
1

Hello Everyone,

I’m trying to integrate a simple drop down menu to the navigation of my site ben lee taylor | home, and I’m having some positioning issues. If you look at the site, you can probably already see where I’m having trouble. I’d like the navigation menu, which is an inline unordered list to have a few drop downs that drop vertically from the menu. Right now, I only have one coded into the navigation link for “articles & papers,” and as you can see, it is looking a bit messy. How can I position the drop downs to fall directly below the main navigation link? Below is the HTML of the javascript for the menu and the menu itself, as well as the CSS code that goes along with it. Thanks for taking the time to help out such a beginner!

<script>
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>

<div id="nav">
			<ul id="sddm">
				<li><a href="home.html" title="ben lee taylor">home</a></li>
				<li><a href="papers-articles.html" title="papers & articles"
        		onmouseover="mopen('menuone')" 
        		onmouseout="mclosetime()">papers & articles</a>
        			<div id="menuone"
            		onmouseover="mcancelclosetime()" 
            		onmouseout="mclosetime()">
        				<a href="vertiginous-spaces-nicole-brossard.html">vertiginous spaces</a>
        				<a href="vampiric-typewriter.html">vampiric typewriter</a>
       				</div>
    			</li>
				<li><a href="blog" title="blog">blog</a></li>
				<li><a href="about.html" title="about me">about</a></li>
			</ul>
		<div style="clear:both"></div>
		</div>
		</div>


html, body 
	{
	font-size: 12px;
	text-align: justify;
	font-family: "Lucida Console", Monaco, monospace;
	background-color: #EEE5DE;
	margin: 0;
	padding: 0;
	}

h1 {font-weight: 100;}
h2 {font-style: oblique; font-size: 100%; font-weight: 100;}
h3 {font-style: italic;}

ul.toc
	{
	list-style-type: none;
	text-align: center;
	padding: 0px;
	}
	
ul.papers
	{
	padding: 0px;
	list-style-type: none;
	text-align: center;
	}

hr {width: 100%;}

.textborder
	{
	font-family: "Garamond","Times New Roman", Times, serif;
	border-style: solid;
	border-width: thin;
	}

	
div#rightbar
	{
	text-align: right;
	float: right;
	}
	
div#rightbar ul
	{
	list-style-type: none;
	margin: 0px;
	}
	
div#rightbar ul li
	{
	display: vertical;
	}
	
div#nav 
	{
    text-align: center;
    padding-top: 10px;
    height: 30px;
	}

div#nav ul 
	{
    margin: 0;
    padding: 0;
	}

div#nav ul li 
	{
    display: inline;
    list-style-type: none;
	}

div#menuone
	{
	font-size: 10px;
	text-align: left;
	display: inline;
	}

#sddm
	{	
	margin: 0;
	padding: 0;
	}
	
#sddm ul li
	{
	display: inline;
	list-style-type: none;
	}

#sddm li a
	{	
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 60px;
	text-align: center;
	text-decoration: none;
	}

#sddm li a:hover { background: #EEE5DE; }

#sddm div
	{
	visibility: hidden;
	margin: 0;
	padding: 0;
	}

#sddm div a
	{
	float: bottom;
	margin: 0;
	padding: 5px 10px;
	width: auto;
	white-space: nowrap;
	text-align: left;
	text-decoration: none;
	}

#sddm div a:hover
	{	
	background: #49A3FF;
	color: #FFF;
	}

div#bottomnav
	{
    	text-align: center;
    	padding-top: 10px;
    	width: 80%;
    	margin: 0 auto 0;
	}
	
div#bottomnav ul
	{
	margin: 0px;
	padding: 0px;
	}

div#bottomnav ul li
	{
	display: inline;
	list-style-type: none;
	}
	
div#container
	{
	width: 80%;
	background-color: #FFF5EE;
	margin: 50px auto 0;
	height: 100%;
	overflow: auto;
	}

div#containertwo
	{
	width: 80%;
	overflow: auto;
	margin: 0px auto 0;
	}
	
div#content
	{
	background-color: #FFF5EE;
	padding: 12px 12px 0;
	overflow: auto;
	}
	
div#header
	{
	height: 100%;
	padding-left: 12px;
	padding-right: 12px;
	text-align: center;
	overflow: auto;
	}

div#footer
	{
	text-align: left;
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 auto 0;
	font-size: 10px;
	width: 80%;
	}
	
div#page
	{
	text-align: left;
	}
2

Hi,

That’s not a very semantic menu and you would be better with something more up to date that doesn’t need javascript (for all but ie6). Something Like Jasons menu here or one of my [URL=“http://www.pmob.co.uk/temp/drop-down-basic-good.htm”]old ones here based on the [URL=“http://www.htmldog.com/articles/suckerfish/dropdowns/”]suckerfish examples.

Anyway in your existing code you would need to set the submenu to position:absolute so that it drops down and then position it accordingly. However you have put overflow on the header which means the dropdown can never escape so you need to remove the overflow from the header.

Something like this:


#header{height:auto;overflow:visible}

div#nav ul li{position:relative;}
#sddm div {
  left: 0;
  margin: 0;
  padding: 0;
  position: absolute;
}
#sddm div li{display:block}

Usually in a dropdown you would create the sublists semantically using a nested list rather than a div. Avoid inline js as that is very old school and makes the page much heavier than it should be and harder to manage.