Menu Alignment

Jul 9 2013 8:45 AM

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>
</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>
</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>
</nav>
</div>
<asp:ContentPlaceHolder ID="bodycontent" runat="server">

</asp:ContentPlaceHolder>
</div>
<div id="footer"></div>
</form>
</body>
</html>

Attachment: menu design.zip

Answers (4)

css chat window popup

how to add j.s page with a database by making your own lapto