Situation: I have made a navigation menu using div's and asp:LinkButtons. I would like to use the ajax toolkit to make a hover menu extender showing a panel underneath each div.
Problem: My hover menu works find when experementing but when I applied it to my div navigation menu it could only pop up outside the main div, floating on the right side. I tried applying the other forum posts but I think my problem might be CSS related, I'm not sure.
Question/profile: as my knowledge of ASP is purely from web tutorials I'd like to request to be pointed in to the right direction. Also if possible, it would be nice if somebody could show me with code how I can achieve my goal?
Ressources: !watchout I only included my master page because the default.aspx is empty for now
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Site1.master.cs" Inherits="RafanovaWeb.Site1" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %><!DOCTYPE html><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Rafanova</title><link href="CSS/CssReset.css" rel="stylesheet" /><style type="text/css">
body {
text-align: center;
}
#wrapper {
min-width: 1010px;
}
#main {
width: 1000px;
margin-left: auto;
margin-right: auto;
clear: both;
}
#top {
clear: both;
}
#navigation {
position: relative;
clear: both;
}
#navigation p {
color: #000 ;
margin-left: 3px;
margin-top: 20px;
text-decoration: none;
}
.navButton {
width: 160px;
height: 53px;
float: left;
font-family: "myriad pro";
text-align: left;
position: relative;
}
.navFiller {
width: 120px;
height: 53px;
float: left;
}
#middle {
text-align: left;
clear:both;
}
#footer {
clear:both;
}
/* TEXT CONTROLER */
p {
font-family: 'Trebuchet MS';
}
h1 {
font-family: 'Trebuchet MS';
}
/* EXTRA QUICK CLASSES*/
.hyper {
text-decoration: none;
}
/* Menu Css*/
.navPanel {
position: absolute;
top: 0px;
left: 0px;
display: block;
visibility: hidden;
z-index: 1000;
}
.absolute {
position:absolute;
}
#HoverMenuExtender1 {
z-index: 1001;
}
</style><asp:ContentPlaceHolder ID="head" runat="server"></asp:ContentPlaceHolder></head><body><form id="form1" runat="server"><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><div id="wrapper"><div id="main"><div id="top"><div><p style="font-family: 'Edwardian Script ITC'; font-size: 80px; color: #72625A; text-align: left; margin-top: 15px;">Rafanova</p><hr /></div><div id="navigation"><asp:LinkButton runat="server" id="btnHome" href="default.aspx"><div class="navButton"><p>Home</p><hr /></div></asp:LinkButton><div class="navFiller"></div><asp:LinkButton runat="server" id="btnRapports" href="#"><div class="navButton"><p>Rapports</p><hr /></div></asp:LinkButton><div class="navFiller"></div><asp:LinkButton runat="server" id="btnData" href="#"><div class="navButton"><p>Data</p><hr /></div></asp:LinkButton><asp:HoverMenuExtender ID="HoverMenuExtender1" runat="server" TargetControlID="btnData" PopupControlID="PanelData" OffsetX="6" PopDelay="250" HoverCssClass="" /><asp:Panel ID="PanelData" runat="server" CssClass="navPanel">
panel achieved</asp:Panel><div class="navFiller"></div><asp:LinkButton runat="server" id="btnInfo" href="#"><div class="navButton"><p>Info</p><hr /></div></asp:LinkButton></div><%-- stop top --%><div id="middle"><asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder></div><%-- stop middle --%><div id="footer"></div><%-- stop footer --%></div><%-- stop Main --%></div><%-- stop wrapper --%></form></body></html>!using visual studio 2012