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

LVL 1
doramail05Asked:
Who is Participating?
 
doramail05Connect With a Mentor Author 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
 
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
Cloud Class® Course: SQL Server Core 2016

This course will introduce you to SQL Server Core 2016, as well as teach you about SSMS, data tools, installation, server configuration, using Management Studio, and writing and executing queries.

 
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
 
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 from other post
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.