Editing (v7+)

Problem with amiant_css3_menu drop down

Permalink May 14, 2014 at 6:18 AM

Hi everybody,

I used the amiant_css3_menu add-on for my drop down menu but the drop down is behaving very weirdly.. When I try to click on the subpages, it keeps disappearing so I can only access the parent page.

Does anyone have an idea how I can change the CSS so that it stays there long enough to click on the subpages?

Heres the link to the webpage>http://www.jump-group.com

thank you very much for your help!!

thats my css if thats of any help..

.amiant-css3-menu-navigation-bar {
   background: #e8e8e8;
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;
   margin: -6px;
   margin-top: 0px;
   padding: 0px;
   width: 563px;
}
/* Navigation Bar Styles */
.amiant-css3-menu-navigation-bar .navigation-menu {
   margin: 0px !important;
   padding: 0px !important;

Viewing 15 lines of 182 lines. View entire code block.

 
.amiant-css3-menu-navigation-bar {
   background: #e8e8e8;
 
 
   -moz-border-radius: 10px;
   -webkit-border-radius: 10px;
   -o-border-radius: 10px;
   border-radius: 10px;
 
   margin: -6px;
   margin-top: 0px;
   padding: 0px;
 
   width: 563px;
}
 
/* Navigation Bar Styles */
 
.amiant-css3-menu-navigation-bar .navigation-menu {
   margin: 0px !important;
   padding: 0px !important;
   display: block;
}
 
.amiant-css3-menu-navigation-bar .navigation-menu li {
   margin: 0px 0px 0px 3px;
   padding: 3px 0px 0px 4px;
   float: left;
   position: relative;
   list-style: none;
}
 
/* main level link */
.amiant-css3-menu-navigation-bar .navigation-menu li > a {
   font-weight: bold;
   font-size: 14px;
   color: #000000 !important;
   text-decoration: none !important;
   outline: none;
 
   display: block;
   padding: 4px 10px 2px 10px;
   margin: 0;
 
   text-shadow: 0 1px 1px rgba(0, 0, 0, .3);
 
   -moz-border-radius: 7px;
   -webkit-border-radius: 7px;
   -o-border-radius: 7px;
   border-radius: 7px;
 
   -webkit-transition: all 300ms ease-in-out;
   -moz-transition: all 300ms ease-in-out;
   -o-transition: all 300ms ease-in-out;
   transition: all 300ms ease-in-out;
 
   /*white-space: nowrap;*/
}
 
.amiant-css3-menu-navigation-bar .navigation-menu a.nav-with-sub {
   padding-right: 7px;
}
 
/* main level link hover */
.amiant-css3-menu-navigation-bar .navigation-menu a.nav-selected, .amiant-css3-menu-navigation-bar .navigation-menu a.nav-path-selected, .amiant-css3-menu-navigation-bar .navigation-menu li:hover > a {
   background: #e8e8e8; /* for non-css3 browsers */
 
   color: #e8e8e8;
   font-color: #C03;
   text-shadow: 1px 1px 2px #FFFFFF;
   filter: dropshadow(color=#FFFFFF, offx=1, offy=1);
}
 
 
 
/* sub levels link */
.amiant-css3-menu-navigation-bar .navigation-menu ul li a, .amiant-css3-menu-navigation-bar .navigation-menu li li a {
font-weight: bold;
   font-size: 13px;
   color: #000000 !important;
   text-decoration: none !important;
   outline: none;
   padding-left: 14px;
 
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
   border-radius: 0;
 
   -webkit-transition: none;
   -moz-transition: none;
   -o-transition: none;
   transition: none;
}
 
/* sub levels link hover */
.amiant-css3-menu-navigation-bar .navigation-menu ul a:hover {
   background: #e8e8e8 !important; /* for non-css3 browsers */
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bebdbd') !important; /* for IE */
   background-image: -webkit-linear-gradient(top, #e8e8e8, #bebdbd) !important;
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e8e8), color-stop(100%, #bebdbd)) !important;
   background-image: -moz-linear-gradient(top, #e8e8e8, #bebdbd) !important; /* Old Firefox < v10 */
   background-image: -moz-linear-gradient(to bottom, #e8e8e8, #bebdbd) !important;  /* New Firefox > v10 */
   background-image: -ms-linear-gradient(top, #e8e8e8, #bebdbd) !important;
   background-image: -o-linear-gradient(top, #e8e8e8, #bebdbd) !important;
   background-image: linear-gradient(top, #e8e8e8, #bebdbd) !important;
 
   color: #000 !important;
   text-decoration: none;
   -webkit-border-radius: 0;
   -moz-border-radius: 0;
   -o-border-radius: 0;
   border-radius: 0;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
}
 
/* level 2 list */
.amiant-css3-menu-navigation-bar .navigation-menu ul {
   background: #e8e8e8; /* for non-css3 browsers */
   filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#e8e8e8', endColorstr='#bebdbd'); /* for IE */
   background-image: -webkit-linear-gradient(top, #e8e8e8, #bebdbd);
   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e8e8e8), color-stop(100%, #bebdbd));
   background-image: -moz-linear-gradient(top, #e8e8e8, #bebdbd); /* Old Firefox < v10 */
   background-image: -moz-linear-gradient(to bottom, #e8e8e8, #bebdbd);  /* New Firefox > v10 */
   background-image: -ms-linear-gradient(top, #e8e8e8, #bebdbd);
   background-image: -o-linear-gradient(top, #e8e8e8, #bebdbd);
   background-image: linear-gradient(top, #e8e8e8, #bebdbd);
 
   display: none;
   margin: 0;
   padding: 0;
   padding-top: 5px;
 
   width: 135px;
   height: 65px;
   position: absolute;
   top: 29px;
   left: 0;
 
   border: 0px;
 
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   -o-border-radius: 7px;
   border-radius: 7px;
 
   -webkit-box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
   -moz-box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
   -o-box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
   box-shadow: 1px 2px 3px rgba(0, 0, 0, .3);
}
 
/* dropdown */
.amiant-css3-menu-navigation-bar .navigation-menu li:hover > ul {
   display: block;
}
 
.amiant-css3-menu-navigation-bar .navigation-menu ul li {
   float: none;
   margin: 0;
   padding: 0;
}
 
.amiant-css3-menu-navigation-bar .navigation-menu ul a {
   font-weight: normal;
   text-shadow: 0 1px 1px rgba(255, 255, 255, .9);
}
 
.amiant-css3-menu-navigation-bar .navigation-menu ul a span.menu-arrow {
   display: block;
   position: absolute;
   top: 13px;
   right: 10px;
   width: 0px;
    height: 0px;
    border-top: 5px solid transparent;
    border-left: 5px solid #bebdbd;
    border-bottom: 5px solid transparent;
}
 
.amiant-css3-menu-navigation-bar .navigation-menu ul li:hover > a span.menu-arrow {
   border-top: 5px solid transparent;
    border-left: 5px solid #FFFFFF;
    border-bottom: 5px solid transparent;
}
 
/* level 3+ list */
.amiant-css3-menu-navigation-bar .navigation-menu ul ul {
   left: 195px;
   top: 0px;
}
 
/* rounded corners for first and last child */
.amiant-css3-menu-navigation-bar .navigation-menu ul li:first-child > a {
   -webkit-border-top-left-radius: 7px;
   -moz-border-radius-topleft: 7px;
   border-top-left-radius: 7px;
   -webkit-border-top-right-radius: 7px;
   -moz-border-radius-topright: 7px;
   border-top-right-radius: 7px;
}
 
.amiant-css3-menu-navigation-bar .navigation-menu ul li:last-child > a {
   -webkit-border-bottom-left-radius: 7px;
   -moz-border-radius-bottomleft: 7px;
   border-bottom-left-radius: 7px;
   -webkit-border-bottom-right-radius: 7px;
   -moz-border-radius-bottomright: 7px;
   border-bottom-right-radius: 7px;
}
 
/* clearfix */
.amiant-css3-menu-navigation-bar .navigation-menu:after {
   content: ".";
   display: block;
   clear: both;
   visibility: hidden;
   line-height: 0;
   height: 0;
}

wanderful replied on Oct 24, 2014 at 12:50 pm Permalink Reply

Did anyone ever help you or did you get it figured out? I am having the same problem. I can click the main and then trying to click the secondary menus is like chasing greased pigs. Sometimes it will click and others they disappear faster than you can click.

Forums

Editing (v7+)

Problem with amiant_css3_menu drop down

Code

Post Reply

Delete Post

Mark Post as Spam

Destroy Spammer

Sign In?