asp.net dynamic menu css not align properly

trying to align the css menu but still the 2nd level is aligned a little bit above and supposed to remove the arrow, menu not align menu not align
.level1 
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding-top: 10px;
	padding:10 30px 10 35px;
	height:20px;
	width:130px;
    margin-left:10px;
    
}

.level1 a:hover
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:orange;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding:10 10px 10 15px;
    height:20px;
	width:130px;
   
}

.level2 {
	padding:0px;
	
	margin-top:-10px;
	padding-left:10px;
	margin-bottom:10px;
    
	width:130px;
	height:30px;
    	
}
.level2 a {
	color: Black;
	font-family:Arial;
	font-size:11px;
	background-image:url(../images/blackbuttonbg.jpg); 
	background-repeat:repeat-x;
	height:30px;
	
	padding:0 10px 0 15px;
	width:130px;
	line-height: 30px;
	
}
.level2 a:hover {
	color: Orange;
	font-family:Arial;
	font-size:11px;
	/* font-weight:700;
	*/
	/*background-image:url(../images/nav_menu_container_hover.jpg);*/
	background-image:url(../images/blackbuttonreversebg.jpg); 
	background-repeat:repeat-x;
	width:130px;
	height:28px;
	
	line-height:28px;
	 
}
.nav-menu .container {
	background-image:url(../images/buttonblack.jpg);
	background-repeat:no-repeat;
	height:13px;
	padding-left:15px;
	background-color : aqua;
}

Open in new window

LVL 1
doramail05Asked:
Who is Participating?
 
doramail05Connect With a Mentor Author Commented:
found out that by putting
menu.StaticEnableDefaultPopOutImage = false;

it will eliminate the dark gray row at the front,

but now left that the dark gray row lies on the back.
attached the css,
.tdheaderbackground
{
    BACKGROUND-IMAGE: url('../images/headerback3_idash_jpg.jpg');
    background-repeat: repeat-x;
    
}

.container     
{
    
     min-height: 100%;     
     width: 100%;
     padding:0px;
     
    
} 

.menupanelbg
{
   
	background-color : Blue;
   
}


.menupanelbg2
{
   
	background-color : Gray;
   
}


.level1 
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
	padding-top: 10px;
	padding:10 30px 10 35px;
	height:20px;
	width:130px;
    margin-left:10px;
    
}

.level1 a:hover
{
    background-image:url(../images/blackbuttonbg.jpg); 
    background-repeat:repeat-x;
    color:orange;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding:10 10px 10 15px;
    height:20px;
	width:130px;
   
}

.level2 
{
    /*
	padding:0px;
	
	margin-top:-10px;
	padding-left:10px;
	margin-bottom:10px;
    
	width:130px;
	height:30px;
    	*/
    	text-align: center;
    	 margin-top:0px;
      padding-left:0 0 0 00px ;
      margin-bottom:0px;
      width:130px;
      height:30px;

}
.level2 a {
	color: Black;
	font-family:Arial;
	font-size:11px;
	background-image:url(../images/blackbuttonbg.jpg); 
	background-repeat:repeat-x;
	height:30px;
    text-align:center;	
	padding:0 10px 0 15px;
	width:130px;
	line-height: 30px;
	
}
.level2 a:hover {
	color: Orange;
	font-family:Arial;
	font-size:11px;
	/* font-weight:700;
	*/
	/*background-image:url(../images/nav_menu_container_hover.jpg);*/
	background-image:url(../images/blackbuttonreversebg.jpg); 
	background-repeat:repeat-x;
	width:130px;
	height:28px;
    text-align : center;	
	line-height:28px;
	 
}
.level3 {
	color:black;
	font-family:Arial;
	font-size:11px;
	background-color:#EEEDED;
	border-width:1px;
	border:1px solid;
	letter-spacing:normal;
	padding:4px;
	width:150px;
}

.nav 
{
    height:73px;
	vertical-align:top;
	border-bottom:1px solid #CB5D28;
	background-color : gray;
}


.nav-menu {
	/*background-image : url(../images/buttonblack.jpg);*/
	/*background-repeat:repeat-x;*/
	height:30px;
	vertical-align:top;
	border-bottom:1px solid #CB5D28;
	background-color : gray;
    
}
.nav-menu .container {
	background-image:url(../images/buttonblack.jpg);
	background-repeat:no-repeat;
	height:13px;
	padding-left:15px;
	background-color : aqua;
}
.nav-menu .btn {
	background-image:url(../images/buttonblackreverse.jpg);
	background-repeat:no-repeat;
	float:left;
	width:100px;
	height:40px;
	font-family:Arial,Helvetica,sans-serif;
	font-size:13px;
	color:#B85527;
	/*text-shadow:#FFF;*/
	line-height:60px;
	text-align:center;
	margin-top:10px;
}
.nav-menu .sub a:hover 
{
   /* background-image:url(../images/buttonblack.jpg);*/
	position:absolute;
	display:block;
	width:500px;
	height:30px;
	background-color:#999;
}

.framecontainer
{
    background-image:url(../images/frameprofile_jpgcut01.jpg);
    width: 160px;
    height:275px;
   
    padding-left:30px;
    padding-top: 0px;
    
}

#pagetitle
{
    font-family: Arial Black;
    font-size: 20px;
    padding-left:0px;   
   
}

.cornertopleft
{
    background-image:url(../images/cornertopleft_jpg.jpg);
    width:21px;
    height:21px;
      
    
}

#footer {
	padding-top:15px;
	padding-left:10px;
	clear:both;
}

Open in new window

0
 
HainKurtSr. System AnalystCommented:
please post a sample menu using this stylesheet... basically a sample like this

<style>
....
</style>

<div ...>
  <ul>
   <li>...
   <li>...
    ....
   </ul>
</div>

so we can test and suggest a solution, or better create this sample and put somewhere and give us the link...
0
 
doramail05Author Commented:
here they are
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="mpDashBoard.master.cs" Inherits="MasterPages_mpDashBoard" %>

<!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>
    <link href="../Styles/StyleSheet03.css" rel="stylesheet" type="text/css" />

    <asp:ContentPlaceHolder id="HeadContent" runat="server">
           

    </asp:ContentPlaceHolder>
 
    <style type="text/css">
        .style1
        {
            width: 152px;
        }
    </style>
 
    </head>
<body leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#eeeeee">
    <form id="form1" runat="server">
    <asp:ScriptManager ID="s01" runat="server" />
   
    
        <table id="container" cellpadding="0" cellspacing="0" width="100%"> 
           <tr>
            <td class="tdheaderbackground">
                <asp:Image ID="img01" runat="server" ImageUrl="~/images/headerfront01_idash_jpg.jpg" />
            </td>
            <td class="tdheaderbackground">
            
            </td>
           </tr>
           <tr>
            <td colspan="2">
                <div class="nav-menu container">
                <asp:Panel id="Panel01" runat="server" />
                </div>
            </td>
            <td bgcolor="gray">
            
            </td>
           
           </tr>
           <tr>
            <td width="200px" colspan="2">
           
           <table style="width: 503%">
           <tr>
               <td colspan="2">
               <div>
                    dsasddsadsadegawgawegawegawgawgeaewgawgeawgae</tr>
            <tr>
                <div style="position:fixed">
                <td class="style1">
                <asp:Image ID="imgprofilepicture" runat="server" />


                
                    <br />
                    saddsadsa        <br />
                    saddsadsa<br />
                    asdsadsa</td>
                    </div>
                <td valign="top">
                <asp:ContentPlaceHolder id="MainContent" runat="server">
        
        
      
                   
        
        
      
                    <p>
                        aewgeawgewagegeawegegewgewgewagewwawwgegegegewa</p>
        
        
      
                   
        
        
      
                </asp:ContentPlaceHolder>
                </td>
            </tr>
           </table>
            
              
                 
          
           
           
              
                 
            </td>
           </tr>
        </table>
   
    

     
       <div id="footer">
        <asp:Label ID="lblcopyright" runat="server" ForeColor="#8f8f8f" Font-Names="Arial" Font-Size="8" Text="Copyright 2010 i-Dash. All Rights Reserved." ></asp:Label>
   </div>
    </form>
</body>
</html>

Open in new window

0
Cloud Class® Course: Microsoft Azure 2017

Azure has a changed a lot since it was originally introduce by adding new services and features. Do you know everything you need to about Azure? This course will teach you about the Azure App Service, monitoring and application insights, DevOps, and Team Services.

 
doramail05Author Commented:
it is located at
<tr>
            <td colspan="2">
                <div class="nav-menu container">
                <asp:Panel id="Panel01" runat="server" />
                </div>
            </td>

Open in new window

0
 
HainKurtSr. System AnalystCommented:
please post the rendered html...
0
 
doramail05Author Commented:
k,
<!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><title>
 
</title><link href="Styles/StyleSheet03.css" rel="stylesheet" type="text/css" />
 
 
 
 
    <style type="text/css">
        .style1
        {
            width: 152px;
        }
    </style>
 
    <style type="text/css"> 
	/* <![CDATA[ */
	#menu01 img.icon { border-style:none;vertical-align:middle; }
	#menu01 img.separator { border-style:none;display:block; }
	#menu01 img.horizontal-separator { border-style:none;vertical-align:middle; }
	#menu01 ul { list-style:none;margin:0;padding:0;width:auto; }
	#menu01 ul.dynamic { z-index:1; }
	#menu01 a { text-decoration:none;white-space:nowrap;display:block; }
	#menu01 a.static { text-decoration:none;border-style:none;padding-left:0.15em;padding-right:0.15em; }
	#menu01 a.popout { background-image:url("/sbit/WebResource.axd?d=dS0dJALDwN7Qp8NfSGYhbO4B7k15AfucpvabHNN2PX80-mEHqsaOhxbyG9oL8aKPBTy1Q2_6ok3_wIm9Sfs9NpPGdz80Tj7YUXza0SP9sF41&t=634387427996958914");background-repeat:no-repeat;background-position:right center;padding-right:14px; }
	#menu01 a.level1 { text-decoration:none;border-style:none; }
	#menu01 a.level2 { text-decoration:none;border-style:none; }
	#menu01 a.level3 { text-decoration:none;border-style:none; }
	#menu01 a.level4 { text-decoration:none;border-style:none; }
	#menu01 a.level5 { text-decoration:none;border-style:none; }
	#menu01 a.level6 { text-decoration:none;border-style:none; }
	/* ]]> */
</style></head>
<body leftmargin="0" topmargin="0" rightmargin="0" bgcolor="#eeeeee">
    <form method="post" action="Default2.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__EVENTTARGET" id="__EVENTTARGET" value="" />
<input type="hidden" name="__EVENTARGUMENT" id="__EVENTARGUMENT" value="" />
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWAgIFD2QWAmYPFCsADQ8WBB4LT3JpZW50YXRpb24LKiVTeXN0ZW0uV2ViLlVJLldlYkNvbnRyb2xzLk9yaWVudGF0aW9uAB4LXyFEYXRhQm91bmRnZBYEHghDc3NDbGFzcwUESXRlbR4EXyFTQgICZBYEHwIFCmhvdmVyc3R5bGUfAwICZGRkFgQfAgUKaG92ZXJzdHlsZR8DAgJkEBYDAgMCBAIFFgMWBh8CBQZsZXZlbDEeDkZvbnRfVW5kZXJsaW5laB8DAoJAFgYfAgUGbGV2ZWwyHwRoHwMCgkAWBh8CBQZsZXZlbDMfBGgfAwKCQGRkZBQrAAMFAzA6MWQUKwACFgIeBFRleHQFDHBhcmVudG1lbnUwMmRkZBgjT4NfWtGWRRaxbNz7AejDLMUnK+KpgJl0Feukj1rT" />
</div>
 
<script type="text/javascript"> 
//<![CDATA[
var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}
//]]>
</script>
 
 
<script src="/sbit/WebResource.axd?d=FwdmawN0mK2phl7E3fIUobqFP4LHduUYzQ8KPWH63690m7u8UYTclwjDtuDuLkHTshSmsleBBfSmNfB3Z2Y-Tql4tlwLBWX_mC07C_f7xrE1&amp;t=634387427996958914" type="text/javascript"></script>
 
 
<script src="/sbit/ScriptResource.axd?d=GVOfztVGMZ538dvIoy8_6xuhXZET-4oBNC31oyyhTiWNPq3TVZxXW8s-fbtjBkj2qPHeBvLBW5A07nHoSKK6dFnuOTe2DNVXcWycBnCVzAkVAa89cPY65Ghrd3v-PfQWLkfPf63ia5W6_TgG6yVh1g2&amp;t=ffffffff88dd8486" type="text/javascript"></script>
<script src="/sbit/ScriptResource.axd?d=MeZpcN6qknxYxrgXWgozlDSMlxcIPYSHL8Hc0888gLDnREV93B0mz35eW4eQuUoy54R8Vgc5VYfpkzh5UyMML2EmLTv7k7yT8AylY--mkVgAK-bK4QMvgl8nSKnaQ8YZhl4AXXdfFyEkumbP2RP9TinVpIkrJk13pBT4NGhAmU9-usVC6usmf-N3Pv1yMX5T0&amp;t=ffffffffa5d4ef3e" type="text/javascript"></script>
<script type="text/javascript"> 
//<![CDATA[
if (typeof(Sys) === 'undefined') throw new Error('ASP.NET Ajax client-side framework failed to load.');
//]]>
</script>
 
<script src="/sbit/ScriptResource.axd?d=Ztmyhk4PjU52Xg34iyhd1e40axSqsLKGC0zAB7ul502rX_y4pWqoTaTWSOMa--OQAuXivWq_8PJbrIofRvaFMgfE_wG0cNlc7heoosvhrQ-Sql0nBqTeKcue9V3HQqeMSdVIdtTXJWnAW78zgBjwFL8a8s6iBqP_aTfzOQtujrSGFF1j4d6va08MR0urTUuQ0&amp;t=ffffffffa5d4ef3e" type="text/javascript"></script>
<div class="aspNetHidden">
 
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWBgLlltoYAs6r7j8C/7axhAwC/7axhAwC/7b9sgICzquigQqzNVQeEO/zmbfF1WS8+ArYntmcTlptD7PhnToppFPQ0g==" />
</div>
    <script type="text/javascript"> 
//<![CDATA[
Sys.WebForms.PageRequestManager._initialize('ctl00$s01', 'form1', [], [], [], 90, 'ctl00');
//]]>
</script>
 
   
    
        <table id="container" cellpadding="0" cellspacing="0" width="100%"> 
           <tr>
            <td class="tdheaderbackground">
                <img id="img01" src="images/headerfront01_idash_jpg.jpg" />
            </td>
            <td class="tdheaderbackground">
            
            </td>
           </tr>
           <tr>
            <td colspan="2">
                <div class="nav-menu container">
                <div id="Panel01">
	<a href="#menu01_SkipLink"><img alt="Skip Navigation Links" src="/sbit/WebResource.axd?d=IB7WmIm9954jeIRhfFkbOUekB3lk-nq7zqh_s6sTwyhPC8bMhKIPWuASIWfF_ZKVO2DLGyawJCJ7FmgNvYWEe5jMk24joRNe2telzZEHMMA1&amp;t=634387427996958914" width="0" height="0" style="border-width:0px;" /></a><div id="menu01">
		<ul class="level1">
			<li><a class="popout level1 Item level1" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01&#39;)">parentmenu01</a><ul class="level2">
				<li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage01&#39;)">childpage01</a></li><li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage01&#39;)">childpage01</a></li><li><a class="level2 level2" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu01\\childpage02&#39;)">childpage02</a></li>
			</ul></li><li><a class="level1 Item level1" href="#" onclick="__doPostBack(&#39;ctl00$menu01&#39;,&#39;parentmenu02&#39;)">parentmenu02</a></li>
		</ul>
	</div><a id="menu01_SkipLink"></a>
</div>
                </div>
            </td>
            <td bgcolor="gray">
            
            </td>
           
           </tr>
           <tr>
            <td width="200px" colspan="2">
           
           <table style="width: 503%">
           <tr>
               <td colspan="2">
               <div>
                    dsasddsadsadegawgawegawegawgawgeaewgawgeawgae</tr>
            <tr>
                <div style="position:fixed">
                <td class="style1">
                <img id="imgprofilepicture" src="" />
 
 
                
                    <br />
                    saddsadsa        <br />
                    saddsadsa<br />
                    asdsadsa</td>
                    </div>
                <td valign="top">
                
<div>
    <table>
        <tr>
            <td>saasdasddadegagadgagadgagagavbafbabafbafdbadfbafdbafdbfadbafbafdbfadb
            afbbafbfabffbabfbfbfbffabffbfbabafbfdbafdbafbafdbdfbfbafbfbffbfbfbfafba
            bafbfabafbffbbfabfbffbbfabfafbbfabfafbbfafbfbafbbfbfa
            bfaabfbfabafbfbafbfabfbfabfabfabaf </td>
        </tr>
    
    </table>
 
</div>
 
 
 
 
                </td>
            </tr>
           </table>
            
              
                 
          
           
           
              
                 
            </td>
           </tr>
        </table>
   
    
 
     
       <div id="footer">
        <span id="lblcopyright" style="color:#8F8F8F;font-family:Arial;font-size:8pt;">Copyright 2010 i-Dash. All Rights Reserved.</span>
   </div>
    
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'menu01', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>

Open in new window

0
 
havj123Commented:
Try this:
Change margin-top to -20px
.level2 {
      margin-top:-20px;
      padding-left:0 0 0 10px ;
      margin-bottom:10px;
      width:130px;
      height:30px;
}

Can you show me in working mode somewhere on your website?
0
 
doramail05Author Commented:
i modified abit , and it became like this :
menunotalignw.jpg
0
 
doramail05Author Commented:
but is it a way to remove the dark gray row in Parentmenu01 , to become something like Parentmenu02
which is clean,
.level2 
{
      margin-top:0px;
      padding-left:0 0 0 00px ;
      margin-bottom:0px;
      width:130px;
      height:30px;

}

Open in new window

0
 
doramail05Author Commented:
the output image is here :
menunotalign03.jpg
0
 
doramail05Author Commented:
trying to make it all dark gray for the menu tab's background
0
 
doramail05Author Commented:
solved partially
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.