Drop Down Menu & Slide show issues

[chitrag]

I have drop down menu in my site. But some pages like in the following does not appear drop down effects. But in other pages it works fine. http://www.egtours.com/10_days_nepal_trip.php When I remove slideshow from the page it works or appear drop down menu. But I want both drop down menu as well slide show in the page. How to fix it. Why it happened

[justsomeguy]

It may be because you're including multiple versions of jQuery, it may be a conflict between jQuery, prototype, and the $ function you define yourself, or it may be because your page is not valid and contains multiple pages in the code. You should validate that page first. http://validator.w3.org/check?uri=http%3A%2F%2Fwww.egtours.com%2F10_days_nepal_trip.php&charset=%28detect+automatically%29&doctype=Inline&group=0

[chitrag]

Yes I noticed it is due to jquery but I do not know how to fix. I have been using soho site builder which is online site builder. It is mostly drag and paste. It is template based site builder. So, it is little tricky.

It may be because you're including multiple versions of jQuery, it may be a conflict between jQuery, prototype, and the $ function you define yourself, or it may be because your page is not valid and contains multiple pages in the code. You should validate that page first. http://validator.w3....=Inline&group=0

Edited September 27, 2012 by chitrag

[justsomeguy]

It's always a problem to include a version of jQuery after setting up another one, so start by removing one of the versions and having all of the code use the same version.

[chitrag]

Putting following code on the head of file, fixed the drop down menu and lightbox2 slide show issues. <script> jQuery.noConflict(); // Use jQuery via jQuery(...) jQuery(document).ready(function(){ jQuery("div").hide(); }); // Use Prototype with $(...), etc. $('someid').hide(); </script> Thanks, you pointed about jquery conflicts, which helped me to find above solution. However I still have problem of bullet list issues in the drop down menu list. I wanted put bullets in the list but when I activate the bullets, bullets comes in both side ( two bullets )

Edited September 28, 2012 by chitrag

[justsomeguy]

I'm not sure what you're asking.

[chitrag]

I am asking, menu list in horizontal drop down menu. Click on the Activities > in the drop down list there are bullets in the both side of the list and not in order. I want to fix that issues. egtours.com

[dsonesuk]

you are using a background image, also applying bullet to unordered list to not show ul tag bullets remove list-style-type: from below.

.MegaMenuTable .MegaMenuLists {	color: #FFFFFF;  /*  list-style-position: inside;	list-style-type: circle; removed by dsonesuk*/} ul {  /*  list-style-type: square; removed by dsonesuk*/	text-align: left;}

to remove background image from dropdown add background none to below

.MegaMenuLists li {	background: none; /*added by dsonesuk*/	font-family: Verdana,Verdana,Geneva,sans-serif;	font-size: 12px;	font-style: normal;	font-weight: normal;	margin: 4px 0 6px;}

[chitrag]

i made changes but no effect shall i need to change in custom.css or jquery.megamenu.css

[dsonesuk]

OK! you say you get two bullets, BUT, what do you want? one bullet showing, yes! question is which one? background image OR actual li bullet. The styling is inline within the head tags of the document, these will take precedence over those within an external css style sheet. I did the changes i suggested using firebug, and they worked depending what you require background image or li bullets.

[chitrag]

If possible I want background image as bullet in content area as well as drop down menu list. But I m using plug in for drop down menu. So, when I change control panel of plug in activate the bullet, both background image bullet and actual li bullet appears.

[dsonesuk]

Then use !important, its precendence will become higher than anything that selector currently targets

ul li {  	background-image: url("images/li_bullet.gif");	background-position: 0 5px;	background-repeat: no-repeat;	overflow: hidden;/* added by dsonesuk as li cannot detect area of floated 'a' elements*/	padding-left: 20px;} ul, li {list-style-type:none !important;}

Edit: ideally you would want to use png image for background image, it gives much better transparency blending than gif does.

Edited September 29, 2012 by dsonesuk

[chitrag]

Finally, It is fixed. But still image bullet goes little up than text and bullets not close to text. That has to be fixed. If put png image it does not appear, but if I put png image than it works.

Edited September 30, 2012 by chitrag

[dsonesuk]

If put png image it does not appear, but if I put png image than it works.

?????

[dsonesuk]

IF you want to adjust bullet image position, and padding IN menu only

.MegaMenuLists li {  	background-position: 0 14px; /*added by dsonesuk */	font-family: Verdana,Verdana,Geneva,sans-serif;	font-size: 12px;	font-style: normal;	font-weight: normal;	margin: 0 0 2px;	padding-left: 10px;/*added by dsonesuk */}

else

 ul li {background-image: url("images/li_bullet.gif");background-repeat: no-repeat;background-position: 0 14px; /*amended by dsonesuk */padding-left: 10px;/* amended  by dsonesuk */}

will apply changes to all ul, li tags within page

Edited September 30, 2012 by dsonesuk

[chitrag]

sorry, only gif image is working. when I put png image it does not appear Is that possible to round the corner of th list

?????

Edited October 1, 2012 by chitrag