We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

menu button does not have a:active effect

doramail05
doramail05 asked
on
Medium Priority
486 Views
Last Modified: 2012-05-11
trying to make the menu button clicked / active while navigating on to the page.

tried separate into

level 1 a:active

but still couldnt;'
.level1 a:hover, a:active
{
    background-image:url(../images/buttongradientreverse01_jpg.jpg); 
    background-repeat:repeat-x;
    color:#B04905;
    
	font-size:12px;
	font-weight:bold;
	font-family:Arial;
	text-transform:uppercase;
	border-width:1px;
	padding:10 10px 10 15px;
    height:20px;
	width:180px;
   
}

Open in new window

Comment
Watch Question

Top Expert 2011

Commented:
your selector really should be

.levl1 a:hover, .level1 a:active

Open in new window


However, is your level1 class a div or is that the class of the link?

If that is the class of the link, it should be

a.level1:hover, a.level1:active

Open in new window


Is this live? Can I view it at all?
Top Expert 2011

Commented:
Sorry for the misspell. The keyboard I am on is AWFUL.

Author

Commented:
tried this
.level1 a.level1:hover, a.level:active
cannot,,

and this,
.level1 a:hover, .level1 a:active
also cannot :(
Top Expert 2011

Commented:
Can you post the HTML? This will help.
Top Expert 2011

Commented:
Even better would be a link to a live page.

Author

Commented:
k, the page html view source is posted.
<!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">
        .style3
        {
            text-align: left;
            
        }
        .style4
        {
            width: 857px;
        }
    </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-dynamic { background:url("/sbit/WebResource.axd?d=dS0dJALDwN7Qp8NfSGYhbO4B7k15AfucpvabHNN2PX80-mEHqsaOhxbyG9oL8aKPBTy1Q2_6ok3_wIm9Sfs9NpPGdz80Tj7YUXza0SP9sF41&t=634387427996958914") no-repeat 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="/wEPDwUKMTY1NDU2MTA1Mg9kFgJmD2QWAgIDD2QWCgIFD2QWAmYPPCsADQIADxYCHgtfIURhdGFCb3VuZGdkCRAWABYAZGQCCQ8PFgIeCEltYWdlVXJsBSQuLi9pbWFnZXMvcHJvZmlsZWltYWdlL3Byb2ZpbGUwMS5wbmdkZAINDw8WAh4EVGV4dAUJc3R1ZGVudDAxZGQCEQ8PFgIfAgUCMTlkZAIXDw8WAh8CBRYxMi8xMi8yMDExIDEyOjAwOjAwIEFNZGQYAQUeX19Db250cm9sc1JlcXVpcmVQb3N0QmFja0tleV9fFgEFC2N0bDAwJGltZzAyHUoSsuo0YgTO+BhcXCDJKZLiahVEAe9+KMfzPrfvCn8=" />
</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="__PREVIOUSPAGE" id="__PREVIOUSPAGE" value="sMBwthXCjeep7k8QUK_3RefsqXGqiUsXO5el5gk3VM3q3-ikn5idXaTvPNheNInKXiN4ATQGExfeSSE_peVeK_ARAerG0VC5-Qdr5UYpV8Y1" />
	<input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="/wEWAgLT2YXIBALi+a+EAc2U3NT5aRVuRJDm94+KLAshS1U9VNmryIab+Jzpo9BD" />
</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">
                <input type="image" name="ctl00$img02" id="img02" src="images/headerfront01_idash_jpg.jpg" onclick="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions(&quot;ctl00$img02&quot;, &quot;&quot;, false, &quot;&quot;, &quot;Default2.aspx&quot;, false, false))" />
            </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="level1 Item level1" href="Student/StudentAttendance.aspx">Attendance</a></li><li><a class="level1 Item level1" href="Student/StudentResults.aspx">Results</a></li>
		</ul>
	</div><a id="menu01_SkipLink"></a>
</div>
                </div>
            </td>
            
           
           </tr>
           <tr>
            <td width="200px" colspan="2">
           
           <table style="width: 100%">
           <tr>
               <td width="197px">
              
                    </td>
                    <td class="style4" rowspan="3" valign="top">
                     
                 
<div>
    <table width="100%">
        <tr>
 
            <td align="center">
                <img src="images/idash_bg3.png" />
            </td>
 
        </tr>
            
    </table>
 
</div>
 
 
 
 
                
 
                
                    </td>
                    </tr>
            <tr>
                
                <td valign="top">
                <div class="framecontainer">
                    <table>
                    <tr>
                        <td class="style3" colspan="2" >
                        
                        </td>
                    </tr>
                    <tr>
                        <td class="style3" colspan="2" >
                        
                            &nbsp;</td>
                    </tr>
                    <tr>
                        <td class="style3" colspan="2">
                        
                            <img id="imgprofile" src="images/profileimage/profile01.png" style="height:100px;width:100px;" /></td>
                    </tr>
                     <tr>
                        <td class="style3">
                            <span id="lblnametitle" style="font-family:Arial;">Name</span>  </td>
                        <td class="style3">
                           : <span id="lblname" style="font-family:Arial;">student01</span></td>
                    </tr>
                     <tr>
                        <td class="style3">
                        
                            <span id="lblagetitle" style="font-family:Arial;">Age</span></td>
                        <td class="style3">
                        
                           : <span id="lblage" style="font-family:Arial;">19</span></td>
                    </tr>
                    
                     <tr>
                        <td class="style3" colspan="2">
                        <span id="lbllastactivetitle" style="font-family:Arial;">Last</span>
                            </td>
                    </tr>
                    
                     <tr>
                        <td class="style3" valign="top">
                             <span id="Label1" style="font-family:Arial;">Active</span></td>
                        <td class="style3">
                            :
                        
                            <span id="lbllastactive" style="font-family:Arial;">12/12/2011 12:00:00 AM</span></td>
                    </tr>
                    
                     <tr>
                        <td class="style3" colspan="2">
                        
                            &nbsp;</td>
                    </tr>
                    
                     <tr>
                        <td class="style3" colspan="2">
                        
                            &nbsp;</td>
                    </tr>
                    
                     <tr>
                        <td colspan="2">
                        <div style="padding-left:10px">
                            <span id="Label2" style="color:#8F8F8F;font-family:Arial;font-size:8pt;">Copyright 2011 i-Dash.</span></td>
                            </div>
                    </tr>
                    
                     <tr>
                        <td colspan="2">
                         <div style="padding-left:10px">
        
        </div>
                         </td>
                    </tr>
                    
                    </table>
                    </div>
                    </td>
                    
            </tr>
            <tr>
                <td>
                    &nbsp;</td>
            </tr>
           </table>
            
              
                 
          
           
           
              
                 
            </td>
           </tr>
           </table>
   
    
 
     
       <div id="footer">
   </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

Unlock this solution and get a sample of our free trial.
(No credit card required)
UNLOCK SOLUTION

Author

Commented:
could be resolved if there are <li> tag in the dynamic menu
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.