• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1197
  • Last Modified:

menu hover css on level 1 or main menu tab

trying to make the main menu tab a hover effect, with buttonblack and buttonblackreverse as the menu tab image.
It only apply when changed the font size of level 1 to 24, which will only stretch out to the menu tab.

 <td>
                <div class="nav-menu container">
                <asp:Panel id="Panel01" runat="server" />
                </div>
 </td>
.level1 
{
    background-image:url(../images/buttonblackreverse.jpg); 
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding-top: -1px;
	height:30px;
	width:70px;
}

.level1 a:hover
{
    background-image:url(../images/buttonblack.jpg); 
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
    height:30px;
	width:120px;
}
.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:33px;
	padding-left:15px;
	background-color : aqua;
}

Open in new window

0
doramail05
Asked:
doramail05
  • 4
  • 2
1 Solution
 
remorinaCommented:
Hi doramail05,
In order for us to be able to assist we need to see what you're trying to achieve or what issues you're facing.
Unfortunately your code is incomplete as it seems your menu is dynamically rendered and there are no images.

It's always best to provide a link when possible, otherwise you might need to browse the page, view source in the browser and post the html rendered by the browser along with images and CSS so we can understand what's going on and be able to help.

Cheers!

0
 
doramail05Author Commented:
it is like that,
menunotalign.jpg
0
 
remorinaCommented:
Hi doramail05,

Unfortunately we would still be unable to assist only with an image without actually seeing the result in a browser. we provide or alter CSS without seeing the effect of them.

However it would seem you're having a positioning problem which should be easily fixed.

It would be best if you provide a link, or if not possible at try to save the rendered HTML along with any images, CSS and JavaScript files if possible.

Cheers!

0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
doramail05Author Commented:

<!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"> 
	/* <![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>
                    Student Dashboard</tr>
            <tr>
                <div style="position:fixed">
                <td class="framecontainer">
                    <table>
                    <tr>
                        <td>
                        
                        </td>
                    </tr>
                     <tr>
                        <td>
                        sdasadsda
                        </td>
                    </tr>
                     <tr>
                        <td>
                        asdas
                        </td>
                    </tr>
                     <tr>
                        <td>
                        
                            SDASDA</td>
                    </tr>
                    
                    </table></td>
                    </div>
                <td valign="top">
                
<div>
    <table>
        <tr>
            <td>Content  </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
 
doramail05Author Commented:
solved with this :
.level1 
{
    /**/
    color:black;
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	text-align : center;
	border-width:1px;
    margin-right:5px;
	position :relative;
    padding-right : 0px;
	padding-left :20px;
	padding-right : 20px;	
	padding-top: 10px;
  
	padding-bottom : 5px;

		width:180px;
	
}

li.static
{
    margin-right:5px;
   background-image:url(../images/buttongradient01_jpg.jpg);
    background-repeat:repeat-x;
}

li.static:hover
{
    margin-right:5px;
   background-image:url(../images/buttongradientreverse01_jpg.jpg);
    background-repeat:repeat-x;
}

Open in new window

0
 
doramail05Author Commented:
solved from other post
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now