main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" href="menu.css" type="text/css">
<!-- <script type="text/javascript" src="js/jquery-1.8.1.min.js"></script> -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="menu.js"></script>
</head>
<body>
<ul id="dropdownmenu">
<li class="mainmenu">
<a href="">주메뉴1</a>
<ul>
<li><a href="http://www.naver.com">부메뉴1-1</a></li>
<li><a href="">부메뉴1-2</a></li>
<li><a href="">부메뉴1-3</a></li>
</ul>
</li>
<li class="mainmenu">
<a href="">주메뉴2</a>
<ul>
<li><a href="http://www.naver.com">부메뉴2-1</a></li>
<li><a href="">부메뉴2-2</a></li>
<li><a href="">부메뉴2-3</a></li>
</ul>
</li>
</ul>
</body>
</html>
main.css
.mainmenu {
float: left;
width: 200px;
list-style-type: none;
margin-right: 5px;
}
li.mainmenu ul {
margin: 0px;
}
a {
width: 200px;
display: block;
text-decoration: none;
background: #0000ff;
color: #ffff00;
padding: 0.5em;
border-bottom: 1px solid #ffffff;
}
ul#dropdownmenu li a:hover {
background: #000000;
}
main.js
$(document).ready(function() {
$('li.mainmenu ul').hide();
$('li.mainmenu').hover(
function() {
$('ul', this).show();
},
function() {
$('ul', this).hide();
}
);
});
'Study > HTML5,CSS,JQuery' 카테고리의 다른 글
| [HTML5/CSS3/JQUERY] image : 이미지 example (0) | 2019.05.27 |
|---|---|
| [HTML5/CSS3/JQUERY] table : 테이블 example (0) | 2019.05.27 |
| [HTML5/CSS3/JQUERY] effect : 효과 이벤트 example (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] event : 이벤트 example (0) | 2019.05.22 |
| [HTML5/CSS3/JQUERY] selector (0) | 2019.05.22 |
