Is there a way to adjust the positioning of my drop-down menu "Catalog" above the slider? It seems to have compatibility issues with Google Chrome.
You can download the code archive from Dropbox: Download MyCode
Index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Nivo-Slider-test</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/sub_menu.css">
<link rel="stylesheet" href="css/nivo-slider.css">
</head>
<body>
<aside>
<nav>
<ul>
<li>Home</li>
<li class="catalog">
Catalog
<ul>
<h2>Catalog</h2>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
<li>Category 6</li>
<li>Category 7</li>
<li>Category 8</li>
<li>Category 9</li>
<li>Category 10</li>
<li>Category 11</li>
<li>Category 12</li>
</ul>
</li>
<li>Cart</li>
<li>Profile</li>
</ul>
</nav>
</aside>
<div id="content">
<div id="wrapper">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="img/toystory.jpg" data-thumb="img/toystory.jpg" alt="">
<img src="img/up.jpg" data-thumb="img/up.jpg" alt="" title="This is an example of a caption">
<img src="img/walle.jpg" data-thumb="img/walle.jpg" alt="" data-transition="slideInLeft">
<img src="img/nemo.jpg" data-thumb="img/nemo.jpg" alt="">
</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.nivo.slider.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
});
</script>
</div>
</body>
</html>
style.css
* {
padding: 0;
margin: 0;
}
/* CSS styles continue... */
Sub_menu.css
/* Styles for sub-menu navigation */
/* CSS continues... */
nivo-slider.css
/* Styles for Nivo Slider */
/* CSS continues... */