overlap of drop down menu and accordion block (display problem)
(note : i renamed this topic, original post was sent yesterday under "override of drop down menu and accordion (display problem)" and published in Using Jquery UI)
Hi all
I set a drop down menu using jquery naviDropDown 1.0 and use accordion of jquery-ui-1.8.11 too. I have a problem because the drop down menu is diplayed behing the accordion block.
Does anyone know what the problem could be ? I attach a screenshot of what happens and head and mennu and accordion code.
Head statements :
Copy code
- script type="text/javascript" src="js/jquery-1.5.1.min.js"><link type="text/css" href="jquery/css/custom-theme/jquery-ui-1.8.11.custom.css" rel="stylesheet" /></script>
- <script type="text/javascript" src="js/jquery.easing.1.3.js">
- <script type="text/javascript" src="js/jquery.hoverIntent.minified.js">
- <script type="text/javascript" src="js/jquery.naviDropDown.1.0.js">
- <script type="text/javascript" src="jquery/js/jquery-ui-1.8.11.custom.min.js">
Menu call :
Copy code
- script type="text/javascript"> $(function(){ $('#navigation_horiz').naviDropDown({ dropDownWidth: '115px' }); }); </script>
- <div id="menu">
- <div id="navigation_horiz">
- <ul>
- <li>
- <a href="" class="navlink">DOCUMENTS</a>
- <div class="dropdown" id="dropdown_two">
- <p class="maj">
- <a href="#URL">title</a><br /><br />
- </p>
- </div><!-- .dropdown_menu -->
- </li>
- </ul>
- </div><!-- #navigation_horiz -->
Accordion call :
Copy code
- script> $(function() { $( "#accordion" ).accordion({ autoHeight: false, collapsible: true}); });</script>
- <div id="accordion">
- <h3><a href="#">First header</a></h3>
- <div> Morbi a arcu augue. </div>
- <h3><a href="#">Second header</a></h3>
- <div> Nullam in ligula rhoncus lorem hendrerit</div>
- </div>
Of course I can send further details if necessary.
Thanks
lg