I've done using a hover now

I want to, when hover it, it will displaying another menu...

how can i do that....

<asp:Menu ID="Menu1" runat="server" />
<Items>
    <asp:MenuItem NavigateUrl="~/Page1.aspx" Text="Page1" Value="Page1">
        <asp:MenuItem NavigateUrl="~/Page1_1.aspx" Text="Page1_1" Value="Page1_1"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/Page1_2.aspx" Text="Page1_1" Value="Page1_1"></asp:MenuItem>
    </asp:MenuItem>
    <asp:MenuItem NavigateUrl="~/Page2.aspx" Text="Page2" Value="Page2">
        <asp:MenuItem NavigateUrl="~/Page2_2.aspx" Text="Page2_2" Value="Page2_2"></asp:MenuItem>
        <asp:MenuItem NavigateUrl="~/Page2_2.aspx" Text="Page2_2" Value="Page2_1"></asp:MenuItem>
    </asp:MenuItem>
</Items>
</asp:Menu>

here's my image:

And i want to put that menus when mouse hover in navigation menu

The navigation menu is from top with have an orange color, and the second arrow in bottom is menu that display when it's hover....

That's what i want to make...

can you help me pls...

There are many script available for . u can use those script .

Following are urls please take may those will help u .

http://www.dynamicdrive.com/dynamicindex17/ddaccordionmenu.htm
http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm
http://www.dynamicdrive.com/dynamicindex1/omnislide/index.htm
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
http://www.dynamicdrive.com/dynamicindex1/switchmenu2.htm

I tried the second link you gave

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

when i run the test it, it say's "Loading Sub menu Contents"

what wrong with that i just follow the steps and instruction....

Can you help me plss....

can you help me plss....

here's the code:

mouseovertabs.js

//Mouseover Tabs Menu: By http://www.dynamicdrive.com
//** Aug 4th, 08': Script creation date

var mouseovertabsmenu={

disappeardelay: 250, //set delay in miliseconds before sub menu disappears onmouseout
ajaxloadingmsg: 'Loading Sub Menu Contents...', //Message to show inside sub menu while fetching contents

///////No need to edit beyond here//////////////////////

tabsmenutree:{},

initializetabs:function(tabsmenuid, submenuid, tabcontentsLength, disappearBool){
	var tabmenu=document.getElementById(tabsmenuid)
	var tablinks=tabmenu.getElementsByTagName("a")
	var submenu=document.getElementById(submenuid)
	var selected=null, tablinks_count=0
	for (var i=0; i<tablinks.length; i++){
		tablinks[i]._parentid=tabsmenuid
		var relattr=tablinks[i].getAttribute("rel")
		if (/^gotsubmenu/i.test(relattr) && tablinks_count<tabcontentsLength){ //if "rel" attribute starts with="gotsubmenu" and a tab content exists for this tab based on its order
			tablinks[i]._pos=tablinks_count //remember position of this tab relative to its active peers
			if (relattr.indexOf("[selected]")!=-1){
				selected=tablinks_count
			}
			this.addEvent(tablinks[i], function(){
				var tabsmenutree=mouseovertabsmenu.tabsmenutree[this._parentid]
				mouseovertabsmenu.clearhidetimer(tabsmenutree.submenu.hidetimer)
				mouseovertabsmenu.showsubmenu(this)
			}, "mouseover")
			tablinks_count++
			this.tabsmenutree[tabsmenuid].tabs.push(tablinks[i]) //add this tab to tab collection
		}
		else{ //else for regular tab links (with no "rel" attribute)
			this.addEvent(tablinks[i], function(){
				mouseovertabsmenu.hidesubmenu(this._parentid)
			}, "mouseover")
		}
	}
	this.addEvent(submenu, function(e){
		mouseovertabsmenu.clearhidetimer(this.hidetimer)
	}, "mouseover")
	if (disappearBool==true){
		this.addEvent(submenu, function(e){ //hide submenu contents when mouse rolls out of submenu DIV
			if (!mouseovertabsmenu.isContained(this, e)){
				var cursubmenuobj=this
				this.hidetimer=setTimeout(function(){mouseovertabsmenu.hidesubmenu(cursubmenuobj._parentid)}, mouseovertabsmenu.disappeardelay)
			}
		}, "mouseout")
	}
	var urlselected=this.urlparamselect(tabsmenuid)
	//return position of selected tab (relative to its peers), or null
	return typeof urlselected=="number"? urlselected : document.getElementById(urlselected)? document.getElementById(urlselected)._pos : selected
},

ajaxload:function(tabsmenuid, submenuid, disappearBool, url){
	var page_request = false
	if (window.ActiveXObject){ //Test for support for ActiveXObject in IE first (as XMLHttpRequest in IE7 is broken)
		try {
		page_request = new ActiveXObject("Msxml2.XMLHTTP")
		} 
		catch (e){
			try{
			page_request = new ActiveXObject("Microsoft.XMLHTTP")
			}
			catch (e){}
		}
	}
	else if (window.XMLHttpRequest) // if Mozilla, Safari etc
		page_request = new XMLHttpRequest()
	else
		return false
	var tabsmenutree=this.tabsmenutree[tabsmenuid]
	tabsmenutree.submenu.innerHTML=this.ajaxloadingmsg
	var ajaxfriendlyurl=url.replace(/^http:\/\/[^\/]+\//i, "http://"+window.location.hostname+"/") 
	page_request.onreadystatechange=function(){
		mouseovertabsmenu.ajaxpopulate(page_request, tabsmenuid, submenuid, disappearBool, ajaxfriendlyurl)
	}
	var bustcache=(ajaxfriendlyurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
	page_request.open('GET', ajaxfriendlyurl+bustcache, true)
	page_request.send(null)
},

ajaxpopulate:function(page_request, tabsmenuid, submenuid, disappearBool, url){
	if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
		var tabsmenutree=this.tabsmenutree[tabsmenuid]
		tabsmenutree.submenu.innerHTML=page_request.responseText
		var innerdivs=tabsmenutree.submenu.getElementsByTagName("div")
		for (var i=0; i<innerdivs.length; i++){
			if (/tabsmenucontent/i.test(innerdivs[i].className)){
				tabsmenutree.submenu_divs.push(innerdivs[i])
			}
		}
		var selected=this.initializetabs(tabsmenuid, submenuid, tabsmenutree.submenu_divs.length, disappearBool)
		if (selected!=null && selected<tabsmenutree.submenu_divs.length){
			innerdivs[selected].style.display="block"
			this.css(tabsmenutree.tabs[selected], "selected", "add")
			tabsmenutree.submenu._prevselected=selected
		}
	}
},

showsubmenu:function(linkobj){
	var tabsmenutree=this.tabsmenutree[linkobj._parentid]
	this.hidesubmenu(linkobj._parentid)
	var selected=parseInt(linkobj._pos)
	tabsmenutree.submenu_divs[selected].style.display="block"
	this.css(tabsmenutree.tabs[selected], "selected", "add")
	tabsmenutree.submenu._prevselected=selected
},

hidesubmenu:function(tabsmenuid){
	var tabsmenutree=this.tabsmenutree[tabsmenuid]
	var prevselectedindex=tabsmenutree.submenu._prevselected
	if (typeof prevselectedindex!="undefined"){
		tabsmenutree.submenu_divs[prevselectedindex].style.display="none"
		this.css(tabsmenutree.tabs[prevselectedindex], "selected", "remove")
	}
},

clearhidetimer:function(timerid){
	if (timerid)
		clearTimeout(timerid)
},

css:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add" && !needle.test(el.className))
		el.className+=" "+targetclass
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

urlparamselect:function(tabsmenuid){
	var result=window.location.search.match(new RegExp(tabsmenuid+"=(\\w+)", "i")) //check for "?tabsmenuid=id_or_pos_of_selected_tab" in URL
	var selectedtabstr=RegExp.$1
	return /^\d+$/.test(selectedtabstr)? parseInt(selectedtabstr) : selectedtabstr //return position or ID of selected tab (or null if niether found)
},


addEvent:function(target, functionref, tasktype){
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false);
	else if (target.attachEvent)
		target.attachEvent('on'+tasktype, function(){return functionref.call(target, window.event)});
},

init:function(tabsmenuid, submenuid, disappearBool){
	this.tabsmenutree[tabsmenuid]={} 
	this.tabsmenutree[tabsmenuid].tabs=[] //array referencing the active tab links in this menu (ones with a "rel=gotsubmenu" attr)
	this.tabsmenutree[tabsmenuid].submenu=null //reference submenu DIV for this menu
	this.tabsmenutree[tabsmenuid].submenu_divs=[] //array referencing the submenu contents (external DIVs with class="tabsmenucontent")
	var submenu=document.getElementById(submenuid)
	submenu._parentid=tabsmenuid
	this.tabsmenutree[tabsmenuid].submenu=submenu //remember this DIV as menu's submenu container
	var remoteurl=submenu.getElementsByTagName("a")[0].getAttribute("href")
	this.ajaxload(tabsmenuid, submenuid, disappearBool, remoteurl)
}

}

document.write('<style type="text/css">\n.tabsmenucontent{display:none}\n</style>')

mouseovertabs.css

/* ######### CSS for top level tabs ######### */

.tabsmenuclass ul{
overflow: hidden;
width: auto;
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenuclass li{
float: left;
}

.tabsmenuclass a{
display: block;
padding: 5px 7px;
background: #E8E8E8;
color: black;
margin-right: 1px;
text-decoration: none;
font: bold 13px Arial;
}

.tabsmenuclass a:hover, .tabsmenuclass a.selected{
background: black;
color: white;
}

/* ######### CSS for sub menu container below ######### */

.tabsmenucontentclass{
clear: left;
background: #E8E8E8;
width: 90%;
height: 24px;
padding: 5px;
border: 1px solid silver;
}

.tabsmenucontentclass ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.tabsmenucontentclass li{
float: left;
margin-right: 1em;
}

HTML source code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link rel="stylesheet" type="text/css" href="mouseovertabs.css" />

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

/***********************************************
* Mouseover Tabs 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>
 
 <div id="mytabsmenu" class="tabsmenuclass">
<ul>
<li><a href="http://www.javascriptkit.com" rel="gotsubmenu[selected]">JavaScript Kit</a></li>
<li><a href="http://www.cssdrive.com" rel="gotsubmenu">CSS Drive</a></li>
<li><a href="http://www.codingforums.com">No Sub Menu</a></li>
</ul>
</div>

    <div id="mysubmenuarea" class="tabsmenucontentclass">
        <!--1st link within submenu container should point to the external submenu contents file-->
        <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
    </div>   
    
    <script type="text/javascript">
        //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
        mouseovertabsmenu.init("mytabsmenu", "mysubmenuarea", true)

</script>
</body>
</html>

submenucontents.htm:

<div class="tabsmenucontent">
<ul>
<li><a href="http://www.javascriptkit.com">Home</a></li>
<li><a href="http://www.javascriptkit.com/cutpastejava.shtml">Free JavaScripts</a></li>
<li><a href="http://www.javascriptkit.com/javatutors/">JS Tutorials</a></li>
<li><a href="http://www.javascriptkit.com/jsref/">JS Reference</a></li>
<li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
<li><a href="http://www.javascriptkit.com/java/">Applets</a></li>
<li><a href="http://www.codingforums.com">Coding Forums</a></li>
</ul>
</div>

<div class="tabsmenucontent">
<ul>
<li><a href="http://www.cssdrive.com">Gallery</a></li>
<li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Designs</a></li>
<li><a href="http://www.cssdrive.com/index.php/news/">News</a></li>
<li><a href="http://www.cssdrive.com/index.php/examples/">Examples</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">Compressor</a></li>
<li><a href="http://www.cssdrive.com/index.php/forums/">Forums</a></li>
<li><a href="http://www.cssdrive.com/index.php/main/submit/">Submit</a></li>
<li><a href="http://www.cssdrive.com/index.php/search/">Search</a></li>
</ul>
</div>

<br style="clear:left" />

It's run now in mozilla firefox but in IE8 is not running....

it say's "Loading Sub Contents"

Please try to use JavaScript to solve this issue, check this link, and we can download the code on it,

http://www.dynamicdrive.com/dynamicindex1/mouseovertabs.htm

ellow i got problem with these

i did not expect that i have create a new webform.aspx

does not work with mouse hover tabs menu

it works only on masterpage but when i create a web forms with check "select master page"

it doesn't work...

here's my html source code:

<%@ Master Language="VB" CodeFile="MasterPage.master.vb" Inherits="MasterPage" %>

<%@ Register Assembly="ASPNetFlash.NET3" Namespace="ASPNetFlash" TagPrefix="ASPNetFlash" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <link href="S.Header.css" rel="stylesheet" type="text/css"/>
    <link href="S.Content.css" rel="stylesheet" type="text/css" />
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>

    <div id="header">
         <ul class="headerul">
            <li class="headerli">
                <a href="#1">Sign In</a>
                <a href="#2">Join</a>
            </li>
        </ul> 
    </div>
    
    <div id="navmenu">
        <div class="navimage"></div> <!-- Images --> 
            <div id="mytabsmenu">
                <ul>
                    <li id="linavmenu1"><a href="../Content/newscoverange.aspx" title="News Coverage" rel="gotsubmenu" class="hyperlinknavmenu1">News Coverage</a></li>
			        <li id="linavmenu2"><a href="../Content/software.aspx" title="Software" rel="gotsubmenu" class="hyperlinknavmenu2">Software</a></li>
			        <li id="linavmenu3"><a href="../Content/technology.aspx" title="Technology" rel ="gotsubmenu" class="hyperlinknavmenu3">Technology</a></li>
			        <li id="linavmenu4"><a href="../Content/opinion.aspx" title="Opinion" rel ="gotsubmenu" class="hyperlinknavmenu4">Opinion</a></li>
			        <li id="linavmenu5"><a href="../Content/community.aspx" title="Community" rel ="gotsubmenu" class="hyperlinknavmenu5">Community</a></li>
                </ul>
            </div>
    </div>
    <asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
        <div id="navmenulower"></div>
    </asp:ContentPlaceHolder>
    
      
      <div id="bodycontent">
          <asp:ContentPlaceHolder ID="ContentPlaceHolder3" runat="server">
          </asp:ContentPlaceHolder>
      </div>
      
      <script type="text/javascript">
        //mouseovertabsmenu.init("tabs_container_id", "submenu_container_id", "bool_hidecontentsmouseout")
        mouseovertabsmenu.init("mytabsmenu", "navmenulowerindex", true)
      </script>
            
</body>
</html>

And my javascript is on my previous post with code:

And here's my newscoverage.aspx sourcode:

<%@ Page Language="VB" MasterPageFile="~/MasterPage.master" AutoEventWireup="false" CodeFile="newscoverange.aspx.vb" Inherits="Content_newscoverange" title="News Coverage" %>

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
    <link href="newscoveranget.css" rel="stylesheet" type="text/css" />
    <script src="mouseovertabsnewscoverage.js" type="text/javascript"></script>
</asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
    <div id="navmenunewscontent">
        <a href="submenucontents.htm" style="visibility:hidden">Sub Menu contents</a>
    </div>
</asp:Content>

<asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server">
</asp:Content>