View Full Version : How can I add drop down to Thick Underline Menu

12-27-2009, 04:14 PM
1) Script Title: Thick Underline Menu

2) Script URL (on DD): http://www.dynamicdrive.com/style/csslibrary/item/thick_underline_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.

12-27-2009, 06:10 PM
Try this demo:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
<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/ */

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 */

<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 type="text/javascript">

//anylinkcssmenu.init("menu_anchors_class") ////Pass in the CSS class of anchor links (that contain a sub menu)
<div class="underlinemenu">
<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>
<div id="submenu1" class="anylinkcss underlinemenu">
<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>
<div style="text-align:center;">
Some other content

You will also need this script:


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