How to avoid jquery library from effecting my css


Tags: jquery,css,jquery-ui

Problem :

I have a div with nav buttons and dropdowns with a photo slider below it which uses requires the inclusion of jquery.min.js.

When I include jQuery it effects my CSS preventing my dropdowns from expanding open.

<div id="sticky_navigation">
  <ul class="menumix">
    <li><a href="index.php"><img src="images/home_icon.png"></a></li>
    <li><a href="page.php">VIDEOS</a></li>
    <li><a href="#">LANGUAGE<span class="dc-mega-icon"></span></a>
    <ul class="sub">
      <li><a href="setcookies.php?id=5">English</a></li>
      <li><a href="setcookies.php?id=6">Malayalam</a></li>
    </ul>
  </ul> 
</div>

<script type='text/javascript' src='slider/scripts/jquery.min.js'></script>
 <div id="slider_main">     
  <div id="fluid_container">
    <div class="camera_wrap" id="camera_wrap_1">
      <div data-src="slider/slides/">
      </div>     
    </div>
  </div> 
</div>


Solution :

I fixed this issue by adding some simple css code for the dropdown i.e

ul li:hover ul
 {
  display: block;
  opacity: 1;
  visibility: visible;
}

Earlier the dropdown was working without this code but now after adding the new slider i need to add this additional code to show the dropdwon. Thank you all who gave some idea's to solve this issue.


    CSS Howto..

    How to arrange div structure with radius using CSS

    how to change css of the image link when clicked?

    How to use background css for an image not in the Content or Resource folder

    How to position the select element while using Chosen?

    How to get the type word inside the input field once after pressing the Comma key and not after pressing space bar

    Knockout - How to bind outer container css from set of checkboxes?

    How to change my Mercurial web interface aspect

    responsive image gallery with different heights - how to achieve this with css (or jquery)

    How do I animate this box to have a pop out effect?

    how to let CMS make use of my css files instead of its own css?

    How to use HTML classes and ID's

    When I use
    • , how to let the element inside the li float left but the

    Show jquery datepicker with HTML/CSS image

    Angular: How to alternate CSS classes for a list, with more than 2 classes?

    How to Link to Images in CSS file in RoR 3.2 Project?

    How to include library files (css/js) in angular-fullstack based app

    How to set the CSS content property with a Google Material Icon?

    How can I integrate the code from this pen onto my site?

    meteorjs how to import a wrapbootstrap theme

    How to show hidden part of an image which is inside a fixed height div, using just the CSS?

    How to move a CSS class below another? [closed]

    How to convert a specific part of materialize.scss to css

    How could I have an iframe that shows the target page and all it's elements at 50% scale?

    Are where any examples available on how to use postcss-modules instead of css-modules?

    How to get margin to be relative to text amount css

    How to make slanted ribbon

    How to set original image for animate background image in css

    How to prevent text style defaults during CSS transition

    How to change button colors upon click (Javascript)?

    How to use a Drive hosted css to customize the receiver?