WordPress.org

Ready to get started?Download WordPress

Forums

Dropdown navigation should stay visible (2 posts)

  1. GraphicalMarc
    Member
    Posted 1 year ago #

    Hey!

    I got this problem with my drop down menu.
    It works fine, but I would like it to be shown when i select an item in the drop down navigation. So the drop menu stays "active" on the page.

    See my code below:

    PHP

    <?php wp_nav_menu( array( 'sort_column' => 'menu_order', 'menu_class' => 'nav', 'theme_location' => 'primary-menu' ) ); ?>

    CSS

    .nav{
    	width:610px;top:-50px !important;margin-left:280px;	display:inline;
    	float:left;
    	position:relative;	}
    
    .nav ul{
    	list-style:none;
    	margin: 0 !important;
    	padding: 0 0 0 3% !important;
    	background: transparent !important;
    }
    
    .nav li{
    	float:left;
    	position:relative;
    	padding: 0 0 0 0px;		
    
    }
    
    .nav a{
    	display:block;
    	text-decoration:none;
    	color:#606060;
    	padding:10px 10px 10px 10px;
    	font-size:20px;
    	font-weight:bold;		font-family: 'Nothing You Could Do', cursive;
    	-khtml-border-radius: 10px;
      -moz-border-radius: 10px;
      -webkit-border-radius: 10px;
      border-radius: 10px; /* optional rounded corners for browsers that support it */
    	margin: 3px;	white-space:nowrap;
    }
    
    .current-menu-item > a,.current-menu-ancestor > a,.current_page_item > a,.current_page_ancestor > a {
    color:#6f00a3;
    }
    
    .nav ul ul{	display:inline;	position:absolute;	visibility:hidden;    opacity: 0;      /* Hide sub level, we will use this in transition */    -webkit-transition:visibility 0s ease-in-out 0.25s, opacity .4s ease-in-out; /* For chrome & safari */    -moz-transition:visibility 0s ease-in-out 0.25s, opacity .4s ease-in-out; /* For mozilla firefox */    -o-transition:visibility 0s ease-in-out 0.25s, opacity .4s ease-in-out; /* For opera */        transition:visibility 0s ease-in-out 0.25s, opacity .4s ease-in-out; /* Not yet implemented, but will be available soon */	top:47px;	left:-115px;	float:left;	z-index:99999;	background: rgba(217, 217, 217, 0.95); 		border-bottom: 1px solid #bdbdbd;	width:380px;
    }
    
    .nav ul ul ul{
    	top: 0%;
    	left:100%;
    	background: #4e048e; /* for non-css3 browsers */
    
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#4e048e', endColorstr='#730198'); /* for IE */
    background: -webkit-gradient(linear, left top, left bottom, from(#4e048e), to(#730198)); /* for webkit browsers */
    background: -moz-linear-gradient(top,  #4e048e,  #730198); /* for firefox 3.6+ */
    }
    
    .nav ul ul a{
    	height:auto;
    	line-height:1em;
    	padding:10px 10px 5px 10px;
    	width:100%;
    }
    
    .nav li:hover > a,.nav ul ul:hover > a{
    	color:#6f00a3;
    	background: transparent;}
    
    .nav ul li:hover > ul{
    	display:block;	opacity: 1;	position:absolute; top:47px; left:-115px;	visibility:visible;	-webkit-transition-delay:0s;	transition-delay:0s;	-moz-transition-delay:0s;	-o-transition-delay:0s;
    }

    BR Marcus

  2. GraphicalMarc
    Member
    Posted 1 year ago #

    If I add this piece of code

    .nav ul li:active > a, .nav ul ul {
    opacity:1; visibility:visible;
    }

    The sublevel is shown for all parent navigation items.

Topic Closed

This topic has been closed to new replies.

About this Topic