2 Replies - 209 Views - Last Post: 08 September 2017 - 03:21 PM

#1 ikhlas06  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 178
  • Joined: 20-May 16

How can I change the css code so rather than hover, its by click?

Posted 08 September 2017 - 12:15 PM

I am using html, css and VB

I have a pretty simple sub-menu. At start it will show, 'All Links', Link1', and 'Link4' in menu.
If user hover over 'link1' than sub menu shows up with 'link2' and 'link3'.

How can I change the css code so rather than hover, its by click? So inorder for sub-menu to show up, user has to click on link1.


<ul class="leftMenu nav-sub sidebar-nav">
	<li class="first"><a href="AllLinks.aspx">All Links</a></li>
	<li><a href="#">Link1 <span class="caret"></span></a>
		<ul>
			<li><a href="Link2.aspx">Links2</a></li>
			<li><a href="Link3.aspx?topTabs=6">Links3</a></li>
		</ul>
	</li>
	<li><a href="link4.aspx">Link4</a></li>
 </ul>
				
		
/* menu */		
        .leftMenu li a
        {
            font-family: 'Cambria', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 17px;
            line-height: 34px;
            color:Black;
            display: block; 
        }
        
        .leftMenu li a:hover, .leftMenu li a:active 
        {
            color: #155DC2;
            text-decoration: none; 
        }
		
        /* sub menu */
        .leftMenu  ul {
	        display: none;
	        list-style-type: none;
        }
        .leftMenu  li:hover > ul {
		    display: block;
	    }
	    .leftMenu li ul li
	    {
	        border-bottom: 0px;
	        padding-left:20px;
	    }



I already tried the following but no luck.
.leftMenu  li:focus 
.leftMenu  li:active


Is This A Good Question/Topic? 0
  • +

Replies To: How can I change the css code so rather than hover, its by click?

#2 Dormilich  Icon User is offline

  • 痛覚残留
  • member icon

Reputation: 4136
  • View blog
  • Posts: 13,051
  • Joined: 08-June 10

Re: How can I change the css code so rather than hover, its by click?

Posted 08 September 2017 - 02:45 PM

Quote

How can I change the css code so rather than hover, its by click?

You’ll need Java­Script for that.
Was This Post Helpful? 0
  • +
  • -

#3 ArtificialSoldier  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 1828
  • View blog
  • Posts: 5,755
  • Joined: 15-January 14

Re: How can I change the css code so rather than hover, its by click?

Posted 08 September 2017 - 03:21 PM

Right, the problem is that the active state only happens while you're actually clicking on the item, so the menu will disappear when you stop clicking. If you want to toggle states when you click then you'll need Javascript to do that.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1