제이쿼리소스두개를 넣어놨는데..
본문
메뉴바에 마우스 오버시에 밑으로 메뉴바가 나와야 하는데
이미지 슬라이드가 씹어먹어버리는 현상.. ㅇ_ㅇ
도와주세용.. http://hjin2005.dothome.co.kr/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>MTV.com CSS Drop-Down Menu Theme</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="Tom@Lwis (http://www.lwis.net/free-css-drop-down-menu/)" />
<meta name="keywords" content=" css, dropdowns, dropdown menu, drop-down, menu, navigation, nav, horizontal, vertical left-to-right, vertical right-to-left, horizontal linear, horizontal upwards, cross browser, internet explorer, ie, firefox, safari, opera, browser, lwis" />
<meta name="description" content="Clean, standards-friendly, modular framework for dropdown menus" />
<link rel="shortcut icon" type="image/x-icon" href="css/dropdown/themes/mtv.com/images/favicon.ico" />
<link href="css/dropdown/themes/mtv.com/helper.css" media="screen" rel="stylesheet" type="text/css" />
<link type="text/css" href="./css/font-awesome.min.css" rel="stylesheet" />
<link href="css/dropdown/dropdown.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/dropdown/themes/mtv.com/default.ultimate.css" media="screen" rel="stylesheet" type="text/css" />
<style>
body {
-webkit-font-smoothing: antialiased;
font: normal 15px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
color: #232525;
padding-top:70px;
}
#slides {
display: none
}
#slides .slidesjs-navigation {
margin-top:5px;
}
a.slidesjs-next,
a.slidesjs-previous,
a.slidesjs-play,
a.slidesjs-stop {
background-image: url(img/btns-next-prev.png);
background-repeat: no-repeat;
display:block;
width:12px;
height:18px;
overflow: hidden;
text-indent: -9999px;
float: left;
margin-right:5px;
}
a.slidesjs-next {
margin-right:10px;
background-position: -12px 0;
}
a:hover.slidesjs-next {
background-position: -12px -18px;
}
a.slidesjs-previous {
background-position: 0 0;
}
a:hover.slidesjs-previous {
background-position: 0 -18px;
}
a.slidesjs-play {
width:15px;
background-position: -25px 0;
}
a:hover.slidesjs-play {
background-position: -25px -18px;
}
a.slidesjs-stop {
width:18px;
background-position: -41px 0;
}
a:hover.slidesjs-stop {
background-position: -41px -18px;
}
.slidesjs-pagination {
margin: 7px 0 0;
float: right;
list-style: none;
}
.slidesjs-pagination li {
float: left;
margin: 0 1px;
}
.slidesjs-pagination li a {
display: block;
width: 13px;
height: 0;
padding-top: 13px;
background-image: url(img/pagination.png);
background-position: 0 0;
float: left;
overflow: hidden;
}
.slidesjs-pagination li a.active,
.slidesjs-pagination li a:hover.active {
background-position: 0 -13px
}
.slidesjs-pagination li a:hover {
background-position: 0 -26px
}
#slides a:link,
#slides a:visited {
color: #333
}
#slides a:hover,
#slides a:active {
color: #9e2020
}
.navbar {
overflow: hidden
}
</style>
<!-- End SlidesJS Optional-->
<!-- SlidesJS Required: These styles are required if you'd like a responsive slideshow -->
<style>
#slides {
display: none
}
.container {
margin: 0 auto
}
/* For tablets & smart phones */
@media (max-width: 767px) {
body {
padding-left: 20px;
padding-right: 20px;
}
.container {
width: auto
}
}
/* For smartphones */
@media (max-width: 480px) {
.container {
width: auto
}
}
/* For smaller displays like laptops */
@media (min-width: 768px) and (max-width: 979px) {
.container {
width: 724px
}
}
/* For larger displays */
@media (min-width: 1200px) {
.container {
width: 1170px
}
}
</style>
<!-- SlidesJS Required: -->
</head>
<body>
<h1><img src="img/1234.png" alt="MTV.com" /> </h1>
<!-- Beginning of compulsory code below -->
<div width:100%>
<div
style="
width: 100%;
height: 40px;
overflow:hidden;">
<ul id="mega-menu-9" class="mega-menu" ; margin:0 auto; ">
<ul id="nav" class="dropdown dropdown-horizontal">
<li id="n-shows"><a href="./">회사소개</a>
<ul>
<li class="first"><a href="./" class="dir">회사소개</a>
<li class="first"><a href="./" class="dir">조직도</a>
</ul>
</li>
<li id="n-shows"><a href="./" class="dir">브랜드소개</a>
<ul>
<li class="first"><a href="./" class="dir">Merck Milipore</a>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">Nest</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">CellNest</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">AnalytiCon Discovery</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">IntegenX</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">Fisher</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><span class="dir">Eppendorf</span>
<ul>
<li class="first"><a href="./">1</a></li>
<li><a href="./">2</a></li>
<li><a href="./">3</a></li>
<li><a href="./">4</a></li>
<li><a href="./">5</a></li>
<li><a href="./">6</a></li>
<li><a href="./">7</a></li>
<li><a href="./">8</a></li>
<li><a href="./">9</a></li>
<li><a href="./">10</a></li>
</ul>
</li>
<li><a href="./">제품검색</a></li>
</ul>
</li>
<li id="n-shows"><a href="./" class="dir">온라인문의</a>
<ul>
<li class="first"><a href="./"><strong>온라인문의</strong></a></li>
</ul>
</li>
<li id="n-shows"><a href="./" class="dir">대리점안내</a>
<ul>
<li class="first"><a href="./">대리점안내</a></li>
</ul>
</li>
<li id="n-shows"><span class="dir">오시는길</span>
<ul>
<li class="first"><a href="./">오시는길</a></li>
</ul>
</li>
<li id="n-shows"><span class="dir">Site Map</span>
<ul>
<li class="first"><a href="./">Site Map</a></li>
</ul>
</li>
<li id="n-shows"><span class="dir">Contact Us</span>
<ul>
<li class="first"><a href="./">Contact Us</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
<!-- SlidesJS Required: Start Slides -->
<!-- The container is used to define the width of the slideshow -->
<div class="container">
<div id="slides">
<img src="img/example-slide-1.jpg" alt="Photo by: Missy S Link: http://www.flickr.com/photos/listenmissy/5087404401/">
<img src="img/example-slide-2.jpg" alt="Photo by: Daniel Parks Link: http://www.flickr.com/photos/parksdh/5227623068/">
<img src="img/example-slide-3.jpg" alt="Photo by: Mike Ranweiler Link: http://www.flickr.com/photos/27874907@N04/4833059991/">
<img src="img/example-slide-4.jpg" alt="Photo by: Stuart SeegerLink: http://www.flickr.com/photos/stuseeger/97577796/">
</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".topnav").hover(function() { //마우스를 topnav에 오버시
$(this).parent().find(".subnav").slideDown('normal').show(); //subnav가 내려옴.
$(this).parent().hover(function() {
}, function(){
$(this).parent().find(".subnav").slideUp('fast'); //subnav에서 마우스 벗어났을 시 원위치시킴
});
});
});
</script>
<!-- End SlidesJS Required: Start Slides -->
<!-- SlidesJS Required: Link to jQuery -->
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Link to jquery.slides.js -->
<script src="js/jquery.slides.min.js"></script>
<!-- End SlidesJS Required -->
<!-- SlidesJS Required: Initialize SlidesJS with a jQuery doc ready -->
<script>
$(function() {
$('#slides').slidesjs({
width: 940,
height: 528,
play: {
active: true,
auto: true,
interval: 4000,
swap: true
}
});
});
</script>
<!--[if lt IE 7]>
<script type="text/javascript" src="js/jquery/jquery.js"></script>
<script type="text/javascript" src="js/jquery/jquery.dropdown.js"></script>
<![endif]-->
<!-- / END -->
<!-- / END -->
</body>
</html>
답변을 작성하시기 전에 로그인 해주세요.
