Log in

View Full Version : Need Help with Expanding Flex Level Drop Down Menu


teresamar2
02-18-2011, 05:26 AM
I'm starting a website using this menu. The menu isn't expanding like it should. Can someone help me?

HTML code:

<link href="vspfiles/templates/collectibles/css/Imports.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="flexdropdown.css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="flexdropdown.js">
/************************************************ Flex Level Drop Down Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)* This notice MUST stay intact for legal use* Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more***********************************************/
</script>

</head>

<body id="body">

<!-- =========== Left Navigation Menu ============ -->

<div id="first_nav" class="nav_section">
<h3 style="color:Menu1_Title_TextColor; background-color:Menu1_Title_BgColor;">Products</h3>

<ul id="flexmenu2" class="flexdropdownmenu"><li><a href="http://www.ttcollectiblegifts.com/baby.html">Baby Center</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/babybeds.html">Cribs 'n Cradles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/cgchildren.html">Cottage Garden Music Boxes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babybags.html">Diaper Bags</a></li>
<li><a href="http://www.ttcollectiblegifts.com/formom.html">Just For Mom</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babykeepsakes.html">Keepsakes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyornaments.html">Ornaments</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">Plush</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/cloudb.html">Cloud b Sleep Toys</a></li>
<li><a href="http://www.ttcollectiblegifts.com/jellycat.html">Jellycat</a></li>
<li><a href="http://www.ttcollectiblegifts.com/babyplush.html">Other Baby Plush</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/babybedding.html">Quilts/Blankets</a></li>
<li><a href="http://www.ttcollectiblegifts.com/silver.html">Silver for Baby</a></li>
<li><a href="http://www.ttcollectiblegifts.com/othergifts.html">Special Gifts</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wallart.html">Wall Art</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/candles.html">Candles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/comfortcandles.html">Comfort Candles</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/comforttogo.html">Comfort To Go</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ccinspiration.html">Inspirational</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ccscripture.html">Scripture Series</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/birchhearts.html">BirchHearts Snowmen</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Elements</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements1.html">Angels</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements4.html">Ornaments</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements5.html">Home Decor</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements6.html">Holiday Elements</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements7.html">Gift Sets</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements10.html">Plaques</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/greatexpectations.html">Great Expectations</a></li>
<li><a href="http://www.ttcollectiblegifts.com/isabelbloom.html">Isabel Bloom</a></li>
<li><a href="http://www.ttcollectiblegifts.com/perfectlypaisley.html">Perfectly Paisley</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/perfectlypaisley.html">Figurines/Home Decor</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ppholiday.html">Holiday</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Women Of The Way</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wotwmin.html">Minatures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/wotwornaments.html">Ornaments</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/handbags.html">Handbags</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/isabellasjourney.html">Isabella's Journey</a></li>
<li><a href="http://www.ttcollectiblegifts.com/marcchantal.html">Marc Chantal</a></li>
<li><a href="http://www.ttcollectiblegifts.com/marieosmond.html">Marie Osmond</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/homedecor.html">Home Decor</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/corinthian.html">Corinthian Bells Windchimes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/figurines.html">Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/pavilion.html">Pavilion Gifts</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/birchhearts.html">BirchHearts Snowmen</a></li>
<li><a href="http://www.ttcollectiblegifts.com/comfortcandles">Comfort Candles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements1.html">Elements Figurines/Accessories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements6.html">Holiday Elements</a></li>
<li><a href="http://www.ttcollectiblegifts.com/fragments.html">Fragments Mosaic Accessories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/perfectlypaisley.html">Perfectly Paisley Figurines/Accesories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ppholiday.html">Perfectly Paisley Holiday</a></li>
<li><a href="http://www.ttcollectiblegifts.com/simplystated">Simply Stated Accessories</a></li>
<li><a href="http://www.ttcollectiblegifts.com/welove.html">We Love Birds/Accessories</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/shanmu.html">Shan Mu Baskets &amp; Bowls</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/inspirationalgifts.html">Inspirational</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/comfortcandles.html">Comfort Candles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/cottagegarden.html">Cottage Garden Music &amp; Jewelry Boxes</a></li>
<li><a href="http://www.ttcollectiblegifts.com/greatexpectations.html">Great Expectations Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/isabelbloom.html">Isabel Bloom Sculptures</a></li>
<li><a href="http://www.ttcollectiblegifts.com/pavilion.html">Pavilion Inspiratoinal Gifts</a></li>
<li class="c1">
<ul>
<li><a href="http://www.ttcollectiblegifts.com/elements.html">Elements Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/elements6.html">Holiday Elements</a></li>
<li><a href="http://www.ttcollectiblegifts.com/perfectlypaisley.html">Perfectly Paisley Figurines</a></li>
<li><a href="http://www.ttcollectiblegifts.com/ppholiday.html">Perfectly Paisley Holiday</a></li>
<li><a href="http://www.ttcollectiblegifts.com/birchhearts.html">BirchHearts Snowmen</a></li>
<li><a href="http://www.ttcollectiblegifts.com/fragments.html">Fragments Mosiac Decor</a></li>
<li><a href="http://www.ttcollectiblegifts.com/comfortcandles.html">Comfort Candles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/comforttogo.html">Comfort To Go Candles</a></li>
<li><a href="http://www.ttcollectiblegifts.com/simplystated.html">Comfort Simply Stated Home Decor</a></li>
<li><a href="http://www.ttcollectiblegifts.com/welove.html">We Love Nature Home Decor</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/womenoftheway.html">Women of the Way Sculptures</a></li>
</ul>
</li>
<li><a href="http://www.chamiliajewels.com">Jewelry</a>
<ul>
<li><a href="http://www.treasured-jewelry.com">Chamilia</a></li>
<li><a href="http://www.ttcollectiblegifts.com/cottagegarden.html">Cottage Garden Jewelry Boxes</a></li>
</ul>
</li>
<li><a href="http://www.ttcollectiblegifts.com/corinthian.html">Windchimes</a>
<ul>
<li><a href="http://www.ttcollectiblegifts.com/corinthian.html">Corinthian Bells</a></li>
</ul>
</li>
</ul>
</div>


Here's the CSS code:

/* CSS Document */

/* Left navigation */

.flexdropdownmenu, .flexdropdownmenu ul { /*topmost and sub ULs, respectively*/
font: normal 11px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: transparent;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
display: none; /*collapse all sub menus to begin with*/
box-shadow: 3px 3px 8px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 8px #818181;
-moz-box-shadow: 3px 3px 8px #818181;
}


.flexdropdownmenu li {
position: relative;
}


.flexdropdownmenu li a {
display: block;
width: 160px; /*width of menu (not including side paddings)*/
color: black;
background: #fae7a9;
border-bottom: 1px solid black;
text-decoration: none;
padding: 4px 5px;
}


* html .flexdropdownmenu li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}


.flexdropdownmenu li a:hover, .flexdropdownmenu li.selected>a {
background: #F0CE7D;
}


.rightarrowclass {
position: absolute;
top: 6px;right: 5px;
}


#left_nav div.nav_section {
padding:0;
margin:0;
margin-bottom:1em;
}