css - Personal Google search bar blocking jQuery underneath -


i added google search bar website. how found blocking navigation underneath when search not active. if bring navigation z-index displayed on search results. how make buttons "clickable" when search bar not rolled down. view page here http://etterengineering.com/sampleindex.html

here html:

<div id="cse-search-form" style= "z-index:999999; top:0px;"></div> <div id="cse-search-form" style="width: 100%;"></div> <script src="http://www.google.com/jsapi" type="text/javascript"></script> <script type="text/javascript">   google.load('search', '1', {language : 'en', style : google.loader.themes.shiny});   google.setonloadcallback(function() {     var customsearchcontrol = new google.search.customsearchcontrol('012677673255316824096:sean13fvlei');     customsearchcontrol.setresultsetsize(google.search.search.filtered_cse_resultset);     var options = new google.search.drawoptions();     options.setsearchformroot('cse-search-form');     customsearchcontrol.draw('cse', options);   }, true); </script> <div id="cse" style="width:43%; z-index:999997; top:40px; height:650px;"></div> 

and css:

#cse-search-form {     position:absolute;      z-index:999999;      width:270px;      left:680px;} #cse{position:absolute; z-index:999997; left: 530px;  overflow:auto;overflow-x:hidden; pointer-events:none;     }  #dropdown {         margin: 0;   padding: 0;   height: 1em;   }  #dropdown li {   float: left;       list-style: none;   }  #dropdown li {   display: block;   width:12em;        padding: 3px 0px;      background-color: transparent;         white-space:pre;       font-size:.8em;   letter-spacing: -.4px;           text-align:center;    z-index: 24000;        font-family: verdana;      color: #424242;   position: relative; top:105px; left: 0px;      text-decoration: none;    }   #dropdown li a:hover {color:#000000;}   /* sub drop down organization */   #dropdown li ul {   display: none;    width: 18em;           letter-spacing:  1em;   text-align:center;   }   /* sub drop down hover */   #dropdown li:hover ul {   display: block;   position: absolute;   margin: 0;   padding: 0; }  #dropdown li:hover li {   word-spacing: .025em;          letter-spacing: -.05em;        font-size:.8em;    font-family: verdana;      background: #6e6e6e; background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#adadad));       background: -moz-linear-gradient(top,  #ffffff,  #adadad);   }   #dropdown li li a:hover {color:#ff0000;} 

your problem not google search bar, have div id of "cse" preventing clicking of links.

picture of issue: click

css:

#cse {display:none;} 

assign id search box such googlesearch.

jquery:

$(function() {     $("#googlesearch").focus(function() {         $("#cse").show();     });     $("#googlesearch").blur(function() {         $("#cse").hide();     }); }); 

Comments

Popular posts from this blog

apache - Add omitted ? to URLs -

redirect - bbPress Forum - rewrite to wwww.mysite prohibits login -

php - How can I stop spam on my custom forum/blog? -