Sub menu closing too fast - javascript

The sub menu of a Wordpress site I'm working on closees so fast. But on some users browsers all is fine. The problem is obvious on my part when I go to services -> pets, I can't click anything
http://www.jokerleb.com
The css of the menu
.header_menu_res ul,
.header_menu_res ul ul,
.header_menu_res ul ul ul {
float: left;
margin: 0;
padding: 0;
list-style: none;
}
.header_menu_res ul li.first {
padding-left: 0;
background: none;
}
.header_top .header_top_res p a{
color: #FDC300 !important;
}
/*menu font color*/
.header_menu_res ul li a {
color: #FDC300;
font-size: 17px;
font-weight: bold;
text-decoration: none;
}
.header_menu_res ul {
z-index: 99;
margin: 3px;
padding: 0;
list-style: none;
line-height: 1;
}
.header_menu_res ul a {
padding: 5px 10px;
position: relative;
color: #555;
z-index: 100;
display: block;
line-height: 18px;
text-decoration: none;
}
.header_menu_res ul li:hover a {
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li.current_page_item,
.header_menu_res ul li.current-menu-item,
.header_menu_res ul li.current-menu-parent a {
color: #555;
background: #f4f4f4;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul li li.current_page_item,
.header_menu_res ul li li.current-menu-item {
background: none;
}
.header_menu_res ul li.current_page_item a,
.header_menu_res ul li.current-menu-item a {
color: #555;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.children li a {
background: #fff;
border-top: none;
border-left: none;
}
.header_menu_res ul li {
float: left;
/
font: normal 14px/1.2em Arial, Helvetica, sans-serif;
z-index: 999;
margin: 0 0 20px;
width: 25%;
}
.menu-item i._mi, .menu-item img._mi {
display: block;
float: left;
}
.menu-item span {
margin-top: 8px;
display: block;
margin-left: 60px;
}
.header_menu_res ul li ul {
margin-top: -2px;
background: #fff;
position: absolute;
left: -999em;
width: 180px;
border: 1px solid #dbdbdb;
border-width: 1px 1px 0;
z-index: 998;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu ul ul.children {
background-color: #FFF;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 1px 1px 5px #b7b7b7;
-webkit-box-shadow: 1px 1px 5px #b7b7b7;
box-shadow: 1px 1px 5px #b7b7b7;
}
.header_menu_res ul.menu li ul li {
margin: 0;
padding: 0px;
}
.header_menu_res ul.menu li ul li a {
background: none;
padding: 7px 12px;
width: 156px;
color: #555;
font-size: 14px;
line-height: 18px;
}
.header_menu_res ul.menu li ul li a:hover {
text-decoration: underline;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.header_menu_res ul.menu li ul ul {
margin: -32px 0 0 181px;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu ul.sub-menu {
display: none;
position: absolute;
margin: -2px 0 0;
-webkit-border-radius: 0 3px 3px 3px;
border-radius: 0 3px 3px 3px;
}
.header_menu_res ul.menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul.menu ul.sub-menu li ul.sub-menu {
display: none;
top: 2px;
left: 180px;
-webkit-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
.header_menu_res ul.menu ul.sub-menu li:hover ul.sub-menu {
display: block;
}
.header_menu_res ul li:hover,
.header_menu_res ul li.hover {
position: static;
color: #555555;
}
.header_menu_res ul li:hover ul ul,
.header_menu_res ul li:hover ul ul ul,
.header_menu_res ul li:hover ul ul ul ul {
left: -999em;
}
.header_menu_res ul li:hover ul,
.header_menu_res ul li li:hover ul,
.header_menu_res ul li li li:hover ul,
.header_menu_res ul li li li li:hover ul {
left: auto;
}
.header_menu_res ul li img.dropdown {
padding: 2px 0 2px 8px;
border: none;
}
.header_menu_res ul.sub-menu {
width: auto;
}
.header_menu_res ul.sub-menu li {
clear: left;
margin: 8px 4px 0;
}
/* category menu */
div#adv_categories,
.header_menu_res ul.sub-menu {
margin: -2px 0 0 0;
padding: 0 0 8px;
position: absolute;
background: #fff;
border: 1px solid #eee;
border-top: none;
z-index: 998;
-webkit-border-radius: 0 6px 6px 6px;
border-radius: 0 6px 6px 6px;
}
div#adv_categories {
display: none;
padding: 0 5px 8px;
}
#menu-header li:hover #adv_categories,
.header_menu .menu li:hover #adv_categories {
display: block;
}
Since Wordpress generates way too much css and I'm sure where's the problem since some people say all is fine; I tried the jquery snippet from here but still doesn't work, I tried with different id's and classes. Perhaps I'm targeting the wrong class. The original snippet from the other question
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide();
}, 1000);
});

Please define speed for hide() and show()
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
Try below code jquery:
$('.main_navigation a').bind('mouseout', function()
{
var menu = this;
setTimeout(function()
{
$(menu).parents('li').children('ul').hide(500);
}, 1000);
});
https://www.w3schools.com/jquery/jquery_hide_show.asp

Related

Submenu is disappearing on hover

My submenu is disappearing on hover.Please show me how to fix it.
#header {
padding-left: 0;
padding-right: 0;
position: relative;
}
.wp-toolbar #header{
margin-top: 0;
}
#site-title, #site-description {
padding-left: 20px;
}
#theme-logo img {
box-shadow: none;
}
/* =Navigation
*/
#top-navigation {
position: absolute;
bottom: -10px;
right: 0;
}
#theme-top-menu {
display:-moz-inline-stack;
display:inline-block;
zoom:1;
*display:inline;
}
#theme-top-menu .sub-menu {
left: auto;
right: 0px;
}
.menu .current_page_item a, .menu .current-menu-item a {
background-color: transparent;
}
#theme-top-menu a {
padding: 0 0.9em;
border: none;
font-weight: normal;
font-size: 80%;
}
#site-navigation{
padding: 0;
position: relative;
max-width: 1140px;
border-top: 1px solid #666666;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topleft: 10px;
-moz-border-radius-topright: 10px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
.fullwidth #site-navigation {
max-width: 100%;
}
#site-navigation .theme-wrap {
padding: 0 5px;
position: relative;
min-height: 50px;
}
#theme-menu-main {
margin: 0 auto;
background-color: transparent;
}
#theme-menu-main > li {
border: none;
border-right: 1px solid rgba(255, 255, 255, 0.2);
margin: 0;
padding: 10px 0;
}
#theme-menu-main > li a {
border: none;
font-weight: bold;
}
#theme-menu-main > li:hover {
background-color: transparent;
}
#theme-menu-main > li > ul {
top: 50%;
left: 0.9em;
padding: 10px 0;
}
#theme-menu-main > li ul > li a {
margin: 0 10px;
padding: 5px 10px;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
font-weight: 100;
}
#theme-menu-main > li ul > li:last-child a{
border: none;
}
#theme-menu-main > li > a span{
padding: 0 0 2px;
border-bottom: 3px solid transparent;
}
#theme-menu-main a {
background-color: transparent;
font-weight: 100;
}
.menu a:hover { background: none; }
Try this:
ul li:hover ul {
display:block;
}

2 level responsive menu doesn't display block

I'm trying to make my old menu responsive for smaller screen sizes. I get the menu icon working properly, but when I open the list it displays inline instead of block. I tried several options but could not get it work right.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.menu.responsive li {
float: none;
display: inline;
}
ul.menu.responsive li a {
display: block;
text-align: left;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>
You have to put display: block; on the li.
Also, don't forget to remove the set float: none; on the a elements.
I added a z-index on the icon to be able to close it even if you were over the first element.
This may help you :
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "menu") {
x.className += " responsive";
} else {
x.className = "menu";
}
}
/* Main menu */
.menu
{
width: 100%;
margin: -15px 0 0 0;
padding: 0 0 0 0;
list-style: none;
background: #d1d1d1;
background: -moz-linear-gradient(#d1d1d1, #b6b6b6);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #d1d1d1),color-stop(1, #b6b6b6));
background: -webkit-linear-gradient(#d1d1d1, #b6b6b6);
background: -o-linear-gradient(#d1d1d1, #b6b6b6);
background: -ms-linear-gradient(#d1d1d1, #b6b6b6);
background: linear-gradient(#d1d1d1, #b6b6b6);
border-bottom: 4px solid #005da2;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
.menu li
{
float: left;
padding: 0 0 10px 0;
position: relative;
line-height: 0;
border-right: 1px solid #b6b6b6;
}
.menu li:hover {
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
/*-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
-moz-border-radius: 5px;
border-radius: 5px;*/
z-index: 9999 !important;
}
.menu a
{
float: left;
height: 25px;
padding: 10px 25px 0 25px;
color: #000;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
}
.menu li:hover > a
{
color: #fafafa;
}
*html .menu li a:hover /* IE6 */
{
color: #fafafa;
}
.menu li:hover > ul
{
display: block;
z-index: 9999 !important;
}
/* Sub-menu */
.menu ul
{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 45px;
left: 0;
z-index: 9999 !important;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 0 2px rgba(255,255,255,.5);
-webkit-box-shadow: 0 0 2px rgba(255,255,255,.5);
box-shadow: 0 0 2px rgba(255,255,255,.5);
}
.menu ul ul
{
top: 0;
left: 150px;
z-index: 9999 !important;
}
.menu ul li
{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
.menu ul li:last-child
{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.menu ul a
{
padding: 10px;
height: 40px;
width: auto;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
color: #fff;
}
*html .menu ul a /* IE6 */
{
height: 10px;
}
*:first-child+html .menu ul a /* IE7 */
{
height: 10px;
}
.menu ul a:hover
{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
.menu ul li:first-child > a
{
-moz-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
.menu ul li:first-child > a:after
{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
.menu ul ul li:first-child a:after
{
left: -8px;
top: 12px;
width: 0;
height: 0;
border-left: 0;
border-bottom: 5px solid transparent;
border-top: 5px solid transparent;
border-right: 8px solid #444;
}
.menu ul li:first-child a:hover:after
{
border-bottom-color: #04acec;
}
.menu ul ul li:first-child a:hover:after
{
border-right-color: #04acec;
border-bottom-color: transparent;
}
.menu ul li:last-child > a
{
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
.menu:after
{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
ul.menu li.icon {display: none;}
/* When the screen is less than 680 pixels wide, hide all list items, except for the first one ("Home"). Show the list item that contains the link to open and close the topnav (li.icon) */
#media screen and (max-width:680px) {
ul.menu li:not(:first-child) {display: none;}
ul.menu li.icon {
float: right;
display: inline-block;
}
}
/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */
#media screen and (max-width:680px) {
ul.menu.responsive {position: relative;}
ul.menu.responsive li.icon {
position: absolute;
right: 0;
top: 0;
z-index: 10000;
}
ul.menu.responsive li {
float: none;
display: block;
}
ul.menu.responsive li a {
display: block;
text-align: left;
float: none;
}
}
* html .menu { zoom: 1; } /* IE6 */
*:first-child+html .menu { zoom: 1; } /* IE7 */
<!--MENU-->
<ul class="menu" id="myTopnav">
<li>Home</li>
<li>Videos
<ul>
<li>Videos 1</li>
<li>Videos 2</li>
<li>Videos 3</li>
</ul>
</li>
<li>Headlines
<ul>
<li>Headlines All</li>
<li>Headlines Last Week</li>
</ul>
</li>
<li>Pictures</li>
</li>
<li class="icon">
☰
</li>

How to change the css of child and subchild menu's border together

I have got a task to create a horizontal menu.Each menu has child and these child has sub child. But when I selecting the sub menu there is a separation between these child and sub child. I want to clear the child right side border when it selected and also discard the first sub child's left border. You can check this on http://jsfiddle.net/ucpcA/.
How can i solve this problem?
The css page is
#wrapper {
width:100%;
height:500px;
}
h2 {
color:#787878;
}
#menu, #menu ul {
list-style: none;
padding: 2px;
}
#nav{
border-bottom: 1px solid #CCCCCC;
border-spacing: 0;
display: table;
float: left;
height: 25px;
width: 100%;
}
#nav ul {
margin: 0;
padding: 0;
}
#nav > ul > li:hover {
background: none repeat scroll 0 0 #FFFFFF;
border-color: #ccc #ccc #FFFFFF;
border-style: solid;
border-width: 1px;
padding-bottom: 0;
border-radius:1px;
}
.menu-child {
width:160px;
display:block !important;
}
/*
#menu ul li ul {
border-radius:0px;
border-color:#fff #ccc #ccc #ccc !important;
}
*/
#nav ul li ul li:hover {
//border:0px;
//border-color: #ccc #FFFFFF #FFFFFF #ccc;
}
#nav ul li ul :hover {
//border:0px;
//border-color: #FFFFFF #ccc #ccc;
}
#menu {
float: left;
height: 25px;
}
#menu> li {
float: left;
}
#menu li a {
display: block;
height: 2em;
line-height: 2em;
padding: 0 1.5em;
text-decoration: none;
}
#menu ul {
position: absolute;
display: none;
z-index: 999;
}
#menu ul li a {
/*width: 80px;*/
}
#menu li:hover ul {
display: block;
}
#menu {
font-family: Arial;
font-size: 12px;
//background: #F8F8F8;
}
#menu > li > a {
font-family: Verdana, Arial, sans-serif;
font-style: normal;
color:#787878;
font-weight: bold;
}
#menu > li > a:hover {
/*color: #000;*/
}
#menu ul {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 0 0 5px 5px;
margin-top: 1px;
}
#menu ul li a {
color: #000;
}
#menu ul li a:hover {
background: #E0E0E0;
}
.logout {
float:right;
width:300px;
}
.title {
float:left;
width:300px;
}
#footer {
width:100%;
height:100px;
float:left;
}
.subchild-list {
margin:0;
position: absolute !important;
top:0;
right:-89px;
//border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
.child-list ul {
display: none !important;
position: absolute !important;
z-index: 999 !important;
}
.child-list li {
position:relative !important;
}
.child-list li:hover ul {
display: block !important;
}
.child-list li{
border-left:1px solid #C0C0C0;
border-right:1px solid #C0C0C0;
}
.child-list ul{
border-top:1px solid #C0C0C0;
border-bottom:5px solid #C0C0C0;
}
.child-list{
border-bottom:5px solid #C0C0C0;
}
.nav-subchild
{
border-color: #ccc #FFFFFF #ccc #FFFFFF;
}
Below 2 css properties will do the needful.
ul#menu li ul.child-list li.menu-child:hover { border-right:0 !important; }
li.menu-child ul li:first-child { border-left:0 !important; }
why are you re-inventing the wheel? you can use jquery menu, and if you want it horizontal there are proven ways of doing that as well. I do this whenever I want to solve a very old and classic problem.
the best way to win a battle is by not having to fight one.

Twitter Bootstrap - Nav collapse

I am working on updating my website to be responsive using Twitter Bootstrap. My current website can be viewed # http://www.JoshuaBock.com.
I am encountering an issue on trying to customize the Navbar collapse functionality. At the moment I have it displaying correctly, but it does not function between 981 pixels and 1126 pixels. I am avoiding modifying the Bootstrap base code so I can easily upgrade to a newer version of Bootstrap. The issue is being caused by my custom media query:
Media Query
<pre><code>
#media (min-width: 980px) and (max-width: 1126px) {
.navbar{
width: 85%;
}
.navbar-fixed-top,
.navbar-fixed-bottom {
position: static;
}
.navbar-fixed-top {
margin-bottom: 20px;
}
.navbar-fixed-bottom {
margin-top: 20px;
}
.navbar-fixed-top .navbar-inner,
.navbar-fixed-bottom .navbar-inner {
padding: 5px;
}
.navbar .container {
width: auto;
padding: 0;
}
.navbar .brand {
padding-right: 10px;
padding-left: 10px;
margin: 0 0 0 -5px;
}
.nav-collapse {
clear: both;
}
.nav-collapse .nav {
float: none;
margin: 0 0 10px;
}
.nav-collapse .nav > li {
float: none;
}
.nav-collapse .nav > li > a {
margin-bottom: 2px;
}
.nav-collapse .nav > .divider-vertical {
display: none;
}
.nav-collapse .nav .nav-header {
color: #777777;
text-shadow: none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
padding: 9px 15px;
font-weight: bold;
color: #777777;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.nav-collapse .btn {
padding: 4px 10px 4px;
font-weight: normal;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.nav-collapse .dropdown-menu li + li a {
margin-bottom: 2px;
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .dropdown-menu a:hover {
background-color: #f2f2f2;
}
.navbar-inverse .nav-collapse .nav > li > a,
.navbar-inverse .nav-collapse .dropdown-menu a {
color: #999999;
}
.navbar-inverse .nav-collapse .nav > li > a:hover,
.navbar-inverse .nav-collapse .dropdown-menu a:hover {
background-color: #111111;
}
.nav-collapse.in .btn-group {
padding: 0;
margin-top: 5px;
}
.nav-collapse .dropdown-menu {
position: static;
top: auto;
left: auto;
display: none;
float: none;
max-width: none;
padding: 0;
margin: 0 15px;
background-color: transparent;
border: none;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.nav-collapse .open > .dropdown-menu {
display: block;
}
.nav-collapse .dropdown-menu:before,
.nav-collapse .dropdown-menu:after {
display: none;
}
.nav-collapse .dropdown-menu .divider {
display: none;
}
.nav-collapse .nav > li > .dropdown-menu:before,
.nav-collapse .nav > li > .dropdown-menu:after {
display: none;
}
.nav-collapse .navbar-form,
.nav-collapse .navbar-search {
float: none;
padding: 10px 15px;
margin: 10px 0;
border-top: 1px solid #f2f2f2;
border-bottom: 1px solid #f2f2f2;
-webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
-moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(255, 255, 255, 0.1);
}
.navbar-inverse .nav-collapse .navbar-form,
.navbar-inverse .nav-collapse .navbar-search {
border-top-color: #111111;
border-bottom-color: #111111;
}
.navbar .nav-collapse .nav.pull-right {
float: none;
margin-left: 0;
}
.nav-collapse,
.nav-collapse.collapse {
height: 0;
overflow: hidden;
}
.navbar .btn-navbar {
display: block;
}
.navbar-static .navbar-inner {
padding-right: 10px;
padding-left: 10px;
}
}
#media (min-width: 980px) and (max-width: 1126px) {
.nav-collapse.collapse{
height:0 !important;
overflow:hidden !important;
}
}
</pre></code>
More specify the !important section seems to be causing the issue. If I remove the !important the nav does not collapse.
The actual code can be view on my beta site # http://beta.joshuabock.com/index.html
I know I am close to the solution, but could use some help figuring this out. Any help will be greatly appreciated. Thanks in advance.
When I specify media queries I normally specify them like so
#media all and (min-width: 980px) and (max-width: 1126px)
noticed yours starts #media, so not sure if that causing any issues
Here is how I solved this
#media (max-width: 1992px) {
.navbar-header {
float: none;
}
.navbar-left,.navbar-right {
float: none !important;
}
.navbar-toggle {
display: block;
}
.navbar-collapse {
border-top: 1px solid transparent;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.navbar-fixed-top {
top: 0;
border-width: 0 0 1px;
}
.navbar-collapse.collapse {
display: none!important;
}
.navbar-nav {
float: none!important;
margin-top: 7.5px;
}
.navbar-nav>li {
float: none;
}
.navbar-nav>li>a {
padding-top: 10px;
padding-bottom: 10px;
}
.collapse.in{
display:block !important;
}
}

close button for JS dropdown menu on tablets/phones?

I've been using the following CSS dropdown box on my website, and I've noticed that when you click to activate the dropdown on an ipad/iphone, there is no way to close the dropdown menu other than refreshing the page.
Is there a JS code that I can add to the bottom of the dropdown box for tablet/phone users so they can close the box if they don't make a selection?
/* css */
#dropdown {
}
#dropdown ul {
}
#dropdown li {
}
.dropmain1 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
width: 98px;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
margin-top: 10px;
-moz-box-shadow: 3px 9px 8px #888;
-webkit-box-shadow: 3px 9px 8px #888;
box-shadow: 3px 9px 8px #888;
}
.dropmain2 {
background: #f2f2f2 url(images/gradients/drop1bg.jpg) repeat-x;
border-left: 1px solid #e9e9e9;
border-right: 1px solid #e9e9e9;
-moz-border-radius-bottomleft: 7px;
-moz-border-radius-bottomright: 7px;
border-bottom-left-radius: 8px;
border-bottom-right-radius: 8px;
padding: 5px;
-moz-box-shadow: 3px 5px 8px #888;
-webkit-box-shadow: 3px 5px 8px #888;
box-shadow: 3px 5px 8px #888;
}
#drop2 { width: 633px; margin-top: 10px; padding: 9px; }
#drop3 { width: 200px; margin-top: 10px; padding: 9px; }
#drop4 { width: 200px; margin-top: 10px; padding: 9px; }
#drop5 { width: 200px; margin-top: 10px; padding: 9px; }
/*this is the css for the horizontal version*/
.horizontal ul{
border: none;
list-style-type: none;
padding:0;margin:0;
}
.horizontal ul li{
float: left;
position: relative;
margin:0;padding:0;
}
a.toplevel {
display: block;
color: #525252;
text-decoration: none;
overflow: hidden;
display:inline-block;
padding-left:15px;
padding-right: 15px;
line-height:18px;
background:transparent url(images/misc/menu_open.gif) center left no-repeat;
}
.horizontal li li{
float: none;
margin-bottom: -1px;
}
.horizontal li li.last{
border-bottom: none;
}
.horizontal ul li ul{
position: absolute;
top: 1.3em;
left: -1px;
}
.horizontal ul ul ul{
width: 130px;
top: -1px;
left: 128px;
margin-top: 0;
}
.horizontal.left ul ul ul,.horizontal .left ul ul{
top: -1px;
left: -128px;
}
.horizontal ul li li a{
padding: 12px;
}
.horizontal ul li:first-child>a{
}
.horizontal ul li a.first{
}
.horizontal ul li li a.first{
}
.horizontal ul li li:first-child>a{
}
div.horizontal ul li.pixelfix ul{
left: 0;
}
div.horizontal ul li.pixelfix ul ul{
left: 128px;
}
/*here we use a little CSS to make a basic/backup dropdown menu in modern browsers *cough* not IE6 or less *cough* if javascript is disabled.Flickering never happens in these browsers*/
.mlmenu li ul{
display: none;
}
.mlmenu li:hover>ul{
display: block;
}
/*This section makes the menu not work in non-javascript enabled browsers by not showing the menu by default-This can be worked around by making top level links point to a sitemap*/
.accessible li ul{
display: block;
}
/*Code to show an element has a child*/
.mlmenu.plus li a:first-child:not(:last-child):after{
content: ' ';
}
.plus a span{
padding-left: .5em;
}
.noshow{
visibility: hidden;
}
/*colors for menu*/
}
.bluewhite li a{
background-color: ;
color: #ffffff;
}
.bluewhite li a:hover,.bluewhite li a.first:hover,.bluewhite .trail a.hover{
/* HOVER */
}
.bluewhite li:first-child>a:hover{
}
.bluewhite ul{
border-color: #000033;
}
#ldrop a:link, #ldrop a:visited {
}
#ldrop a:hover, #ldrop a:active {
}
#holdjump1 {
padding-left: 8px; padding-bottom: 6px;
}
#holdjump1 div {
}
#holdjump1 a:link, #holdjump1 a:visited {
padding: 2px 0 2px 3px; margin:0;
}
#holdjump1 li {
padding:0; margin:0;
}
.fjl {
display: inline-block;
border-bottom: 1px dotted #c1c1c1;
width:30%;
margin: 0 5px 0 5px;
padding: 2px;
font-size: 12px;
font-weight: normal;
}
.fjl a:link, .fjl a:visited {
display: block;
}
.fjl a:active, .fjl a:hover {
background: #a1a1a1;
text-decoration: none;
color: #ffffff;
}
<div id="dropdown" class="mlmenu horizontal bluewhite blindv plus inaccessible delay">
<ul>
<li>Menu Link</li>
<ul> <li>test</li> </ul>
</ul>
</div>
oops!, I just noticed I had posted the wrong "order" of the ul list.
I posted
$('div#dropdown ul li').click
when it actually should be
$('div#dropdown li ul').click or
$('div#dropdown li ul li').click
What I previously posted was for the main links to be opened and closed. The new method I am posting will open close the sub menu. UL inside of the LI. To add more submenu functioning, just keep adding on to the element.
$('div#dropdown li ul // 1-level drop down
$('div#dropdown li ul li ul // 2-level drop down
$('div#dropdown li ul li ul li ul // 3 level drop down.
Or you could just create classes for each level. Example
instead of a 2-level drop being
$('div#dropdown li ul li ul
you could just do something like this >>
Example menu with a 2-level sub menu
<ul>
<li>link1<ul class="sub1">
<li>sublink1-1<ul>
<li>sub-sublink1-1</li>
<li>sub-sublink1-2</li></ul></li></ul></li>
</ul>
Jquery
<script>
$(document).ready(function() {
$('ul.sub1').click(function() {
$(this).slideToggle();
});
});
</script>
That would cause the 2nd level sub menus to slide up or slide down on click, thus "showing" and "hiding".
Hope this helped a little more!
You can try using JQuery. I'm not sure how to do it in full blown javascript but if you download the jquery library, link to it, and then try something like this it might work.
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).show();
$('div#dropdown ul li').click(function() {
$(this).hide();
});
});
});
</script>
or
<script>
$(document).ready(function() {
$('div#dropdown ul li').click(function() {
$(this).slideDown();
$('div#dropdown ul li').click(function() {
$(this).slideUp();
});
});
});
</script>

Categories