Can anyone help me in sorting this out. I have a submenu poping up but falling outside the design. Can be seen in the screenshot. Also adding css for menu design.
''APPLICATI0N ADMIN GROUP VIEW" should fit and display inside the menu design.
#navMenu
{
margin: 0;
padding: 0;
}
.textbox
{
width: 200px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
#navMenu ul
{
margin: 0;
padding: 0;
line-height:30px;
font-weight:bold;
float:left;
position:relative;
}
#navMenu li
{
margin: 0;
padding: 0;
list-style:none;
float:left;
position:relative;
background:#006DAA;
font-weight:bold;
display:inline;
}
#navMenu ul li
{
text-align:center;
padding:0; display:inline;
position:relative;
float:left
}
#navMenu ul li a
{
text-align:center;
text-decoration:none;
height:30px;
width:200px;
display:block;
color:#FFF;
border:1px solid White;
font-weight:bold;
}
#navMenu ul ul
{
position:absolute;
visibility:hidden;
top:32px;
font-weight:bold;
}
#navMenu ul li:hover ul
{
visibility:visible;
color: #cfdbe6;
}
#navMenu ul ul ul
{
left: 100%; top: 0;
position:absolute;
visibility:hidden;
}
#navMenu ul li:hover ul ul
{
position:absolute;
visibility:hidden;
top:0;
font-weight:bold;
}
#navMenu ul li:hover ul li:hover ul
{
visibility:visible;
color:#cfdbe6;
}
#navMenu li:hover
{
background:#6DAA;
color: #cfdbe6;
}
#navMenu ul li:hover ul li a:hover.
{
background:#6DAA;
color: #cfdbe6;
}
#navMenu a:hover
{
color: #cfdbe6;
font-weight:bold;
}
/* Larger Side Border */
.textbox {
width: 230px;
border: 1px solid #3366FF;
border-left: 4px solid #3366FF;
}
*******MENU MASTER CODE**********
<%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Menu.master.cs" Inherits="NavMenu.Menu" %>
<!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></title>
<asp:ContentPlaceHolder ID="head" runat="server">
<%--<link rel="stylesheet" href="<%= ResolveUrl("~/Styles/Style.css") %>" type="text/css" />--%>
<link rel="stylesheet" href="~/Styles/Style.css" type="text/css" />--%>
</asp:ContentPlaceHolder>
</head>
<body>
<form id="form1" runat="server">
<table style="width: 1310px" bgcolor="White">
<tr>
<td height="30">
<img align="left" src="Images/Logo.jpg" />
</td>
</tr>
</table>
<br />
<table style="width: 1310px" bgcolor="#006DAA">
<tr>
<td height="30">
<div id="wrapper">
<div id="navMenu" >
<nav>
<ul >
<li><a href="Default.aspx">Home</a>
</li>
<li><a href="BSPInput.aspx">BSP</a>
<ul>
<li><a href="BSPInput.aspx">Add Outage/Incident - BSP</a></li>
<li><a href="BSPView.aspx">BSP View</a></li>
</ul><!-- end of inner ul-->
</li><!-- end of main li-->
<li><a href="Incident.aspx">Incident</a>
<ul>
<li><a href="Incident.aspx">Incident Input</a></li>
<li><a href="IncidentView.aspx">Incident View</a></li>
</ul><!-- end of inner ul-->
</li><!-- end of main li-->
<li><a href="Problem.aspx">Problem</a>
<ul>
<li><a href="Problem.aspx">Problem Input</a></li>
<li><a href="ProblemView.aspx">Problem View</a></li> </ul> </li>
<li><a href="LOBAdmin.aspx">Admin</a>
<ul>
<li><a href="LOBAdmin.aspx">LOB Admin</a>
<ul>
<li><a href="LOBAdmin.aspx">Add LOB Admin Group</a> </li>
<li><a href="LOBGroupAdminView.aspx">LOB Admin Group View</a> </li>
</ul>
</li>
<li><a href="ApplicationAdmin.aspx">Application Admin</a>
<ul>
<li><a href="ApplicationAdmin.aspx">Add Application Admin Group</a> </li>
<li><a href="ApplicationGroupAdminView.aspx">Application Admin Group View</a> </li>
</ul> </li>
</ul><!-- end of main ul-->
</nav>
</div>
<asp:ContentPlaceHolder ID="bodycontent" runat="server">
</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
</form>
</body>
</html>