How can I add drop down to Thick Underline Menu

**MulderDSM** · 12-27-2009, 04:14 PM

1) Script Title: Thick Underline Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/cs...nderline_menu/

3) Describe problem: I love this menu, but would like one of the four choices I have drop down to show 5 other choices and can't seem to figure out how to do both drop down and thick underline menu.

**jscheuer1** · 12-27-2009, 06:10 PM

Try this demo:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">

/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */

.underlinemenu{
font-weight: bold;
width: 100%;
}

.underlinemenu ul{
padding: 6px 0 7px 0; /*6px should equal top padding of "ul li a" below, 7px should equal bottom padding + bottom border of "ul li a" below*/
margin: 0;
text-align: center; /*set value to "left", "center", or "right"*/
}

.underlinemenu ul li{
display: inline;
}

.underlinemenu ul li a{
color: #494949;
padding: 6px 3px 4px 3px; /*top padding is 6px, bottom padding is 4px*/
margin-right: 20px; /*spacing between each menu link*/
text-decoration: none;
border-bottom: 3px solid gray; /*bottom border is 3px*/
}

.underlinemenu ul li a:hover, .underlinemenu ul li a.selected, .selectedanchor {
border-bottom-color: black!important;
}

/* ######### class for drop down menu(s) ######### */

.anylinkcss {
position: absolute;
left: 50%!important;
top: 0;
margin-left: -350px; /* negative half the width */
width: 700px;
visibility: hidden;
background-color: white;
z-index: 100; /* zIndex should be greater than that of anything you want the drop down to cover */
}

</style>
<script type="text/javascript" src="anylinkcssmenu.js">

/***********************************************
* AnyLink CSS Menu script v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/anylinkcss.htm for full source code
***********************************************/

</script>

<script type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
anylinkcssmenu.init("anchorclass")
</script>
</head>
<body>
<div class="underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Codes</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a class="anchorclass" rel="submenu1">Webmaster Tools</a></li>
</ul>
</div>
<div id="submenu1" class="anylinkcss underlinemenu">
<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.cssdrive.com">CSS Drive</a></li>
<li><a href="http://www.javascriptkit.com">JavaScript Kit</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
</ul>
</div>
<div style="text-align:center;">
Some other content
</div>
</body>
</html>

You will also need this script:

Attachment 3079

Right click and 'save as'. Put it in the same folder as the above page.

Thread: How can I add drop down to Thick Underline Menu

Thread Tools

Search Thread

How can I add drop down to Thick Underline Menu

Bookmarks

Bookmarks

Posting Permissions