homepage Welcome to WebmasterWorld Guest from 23.23.12.202
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Dropdown menu
Shreya



 
Msg#: 4504314 posted 5:51 am on Oct 5, 2012 (gmt 0)

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="ctltopmainmenu.ascx.vb"
Inherits="Controls_ctltopmainmenu" %>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 79px; height: 27px;">
<tr>
<td style="width: 22px">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 40px">
<a href="Default.aspx" class="mainmenu">Home</a>
</td>
<td>
<img alt="" src="images/menu-line.png" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 79px; height: 27px;">
<tr>
<td style="width: 22px" align="center">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 100px">
<ul class="menu" id="menu">
<li><a href="searchproduct.aspx" class="mainmenu" style="color: #ffffff;">Products</a>
<ul>
<li><a href="#" class="sub">Fresh Flowers & Choco Delights </a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=44">Fresh Flower Arrangements</a></li>
<li><a href="category.aspx?type=catg&categoryID=45">Artificial Flower Arrangements</a></li>
<li><a href="category.aspx?type=catg&categoryID=46">Cakes & Chocolates</a> </li>
<li><a href="category.aspx?type=catg&categoryID=47">Gift The Basket Special </a>
</li>
</ul>
</li>
<li><a href="#" class="sub">Home Decor</a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=54">The Wall & Table Decor </a></li>
<li><a href="category.aspx?type=catg&categoryID=55">Home Fragrance </a></li>
<li><a href="category.aspx?type=catg&categoryID=56">Crockery</a></li>
<li><a href="category.aspx?type=catg&categoryID=57">Gift The Basket Specials </a>
</li>
<li><a href="category.aspx?type=catg&categoryID=58">Home Utilities </a></li>
<li><a href="category.aspx?type=catg&categoryID=59">Lamp Shades</a></li>
</ul>
</li>
<li><a href="#" class="sub">Fashion Fiesta (For Men For Women) </a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=48">For Men</a></li>
<li><a href="category.aspx?type=catg&categoryID=49">For Women</a></li>
<li><a href="category.aspx?type=catg&categoryID=50">Gift The Basket Special </a>
</li>
</ul>
</li>

<li><a href="#" class="sub">Baby Shopping </a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=51">The Pink Room</a></li>
<li><a href="category.aspx?type=catg&categoryID=52">The Blue Room</a></li>
<li><a href="category.aspx?type=catg&categoryID=53">Gift The Basket Special </a>
</li>
</ul>
</li>
<li><a href="#" class="sub">Hand-Crafted Products</a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=60">Envelopes</a></li>
<li><a href="category.aspx?type=catg&categoryID=61">Gift Bags</a></li>
<li><a href="category.aspx?type=catg&categoryID=62">Seasonal Cards</a> </li>
<li><a href="category.aspx?type=catg&categoryID=63">Gift The Basket Special</a>
</li>
</ul>
</li>
<li><a href="category.aspx?type=catg&categoryID=34" class="sub">Occasion To Remember </a></li>
<li><a href="category.aspx?type=catg&categoryID=36" class="sub">Gift Hampers </a></li>
<li><a href="#" class="sub">Hampers</a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=64">Invite Designs</a></li>
<li><a href="category.aspx?type=catg&categoryID=65">Gift for Give Away</a></li>
<li><a href="category.aspx?type=catg&categoryID=66">Packaging Supplies</a> </li>
<li><a href="category.aspx?type=catg&categoryID=67">Gift The Basket Special</a>
</li>
</ul>
</li>
<li><a href="vouchers-for.aspx" class="sub">Vouchers For </a>

</li>
<li><a href="category.aspx?type=catg&categoryID=42" class="sub">Personalize Your Product</a></li>
</ul>
</td>
<td>
<img alt="" src="images/menu-line.png" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 90px; height: 27px;">
<tr>
<td style="width: 22px" align="center">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 70px">
<ul class="menu" id="menu">
<li><a href="searchproduct.aspx" class="mainmenu" style="color: #ffffff;">Select By</a>
<ul>
<li><a href="#" class="sub">By Categories</a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=16">Baby Product</a></li>
<li><a href="category.aspx?type=catg&categoryID=14">Cake</a></li>
<li><a href="category.aspx?type=catg&categoryID=15">Chocolate</a> </li>
<li><a href="category.aspx?type=catg&categoryID=25">Ecofriendly</a></li>
<li><a href="category.aspx?type=catg&categoryID=18">Fashion </a></li>
<li><a href="category.aspx?type=catg&categoryID=5">Flowers </a></li>
<li><a href="category.aspx?type=catg&categoryID=6">Footwear </a></li>
<li><a href="category.aspx?type=catg&categoryID=4">Gift Articles </a></li>
<li><a href="category.aspx?type=catg&categoryID=27">Hamper </a></li>
<li><a href="category.aspx?type=catg&categoryID=8">Home Decor</a></li>
<li><a href="category.aspx?type=catg&categoryID=7">Jewellery </a></li>
<li><a href="category.aspx?type=catg&categoryID=26">Package Supply </a></li>
<li><a href="category.aspx?type=catg&categoryID=19">Personalized Gift</a></li>
<li><a href="category.aspx?type=catg&categoryID=17">Seasonal Greeting </a></li>
<li><a href="category.aspx?type=catg&categoryID=13">Wedding</a></li>
</ul>
</li>
<li><a href="#" class="sub">By Occasion</a>
<ul>
<li><a href="category.aspx?type=catg&categoryID=10">Anniversary Gift </a></li>
<li><a href="category.aspx?type=catg&categoryID=11">Baby Shower </a></li>
<li><a href="category.aspx?type=catg&categoryID=9">Birthday</a></li>
<li><a href="category.aspx?type=catg&categoryID=23">Congratulation </a></li>
<li><a href="category.aspx?type=catg&categoryID=22">Get Well Soon </a></li>
<li><a href="category.aspx?type=catg&categoryID=12">House Warming</a></li>
<li><a href="category.aspx?type=catg&categoryID=21">I Love you </a></li>
<li><a href="category.aspx?type=catg&categoryID=20">Thank You </a></li>
</ul>
</li>
</ul>
</li>
</ul>
</td>
<td>
<img alt="" src="images/menu-line.png" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 130px; height: 27px;">
<tr>
<td style="width: 22px" align="center">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 100px">
<a href="testimonial.aspx" class="mainmenu">GTB Specials</a>
</td>
<td>
<img alt="" src="images/menu-line.png" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 90px; height: 27px;">
<tr>
<td style="width: 22px" align="left">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 70px">
<a href="#" class="mainmenu">By Brand</a>
</td>
<td>
<img alt="" src="images/menu-line.png" />
</td>
</tr>
</table>
</td>
<td>
<table border="0" cellpadding="0" cellspacing="0" style="width: 130px; height: 27px;">
<tr>
<td style="width: 22px" align="center">
<img alt="" src="images/main-menu-arrow.png" />
</td>
<td align="left" style="width: 100px">
<a href="#" class="mainmenu">Current Events</a>
</td>
</tr>
</table>
</td>
</tr>
</table>


here is the css

ul.menu {list-style:none; margin:0; padding:0}
ul.menu * {margin:0; padding:0}
ul.menu a {display:block; color:#000; text-decoration:none}
ul.menu li {position:relative; float:left; margin-right:2px}
ul.menu ul {position:absolute; top:26px; left:0; background:#fff; display:none; opacity:0; list-style:none}
ul.menu ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu ul li a:hover {background-color:#fff}
ul.menu ul ul {left:148px; top:-1px}
ul.menu .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu .topline {border-top:1px solid #aaa}

ul.menu1 {list-style:none; margin:0; padding:0}
ul.menu1 * {margin:0; padding:0}
ul.menu1 a {display:block; color:#000; text-decoration:none}
ul.menu1 li {position:relative; float:left; margin-right:2px}
ul.menu1 ul {position:absolute; top:26px; left:0; background:#d1d1d1; display:none; opacity:0; list-style:none}
ul.menu1 ul li {position:relative; border:1px solid #aaa; border-top:none; width:148px; margin:0}
ul.menu1 ul li a {display:block; padding:3px 7px 5px; background-color:#d1d1d1}
ul.menu1 ul li a:hover {background-color:#c5c5c5}
ul.menu1 ul ul {left:148px; top:-1px}
ul.menu1 .menulink:hover, ul.menu .menuhover {background:url(images/header_over.gif)}
ul.menu1 .sub {background:#d1d1d1 url(images/arrow.gif) 136px 8px no-repeat}
ul.menu1 .topline {border-top:1px solid #aaa}

i want to 2 dropdown tabs 1) product n 2)select by but there is no dropdown in select by y ?

 

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved