style.css 파일 질문
본문
버튼 네비게이션을 넣었는데요
배경에 이미지가 있어서
마우스가 올라가면 회색이 나오는데.
마우스가 올라가지 않으면 투명이어서
버튼 글씨가 안보입니다.
투명부분에도 색깔을 넣고 싶은데요
어떻게 하면 되나요?
CSS파일 오려 봅니다
자세한 설명 부탁 드립니다
여기에 있는 버튼 이미지 소스 보다 더 좋은 소스가
있으시면 소스 좀 부탁드립니다
------------ style.css ----------------------------------------------------------
* { margin: 0; padding: 0; }
body {font-family: Arial, Tahoma, sans-serif; font-size: 16px; color: #232323; }
/* @group structure */
#head { background: #e1ecf6; height: 100px; padding-top: 15px; border-bottom: 1px solid #d5dce8; }
.wrap { width: 800px; margin: 0 auto; }
/* @group core nav menu */
#nav { margin: 0; padding: 0; list-style: none; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; border-bottom: 1px solid #d5dce8; border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; height: 50px; padding-left: 15px; padding-right: 15px; background: #edf3f7; }
#nav li { float: left; display: block; background: none; position: relative; z-index: 999; margin: 0 1px; }
#nav li a { display: block; padding: 0; font-weight: 700; line-height: 50px; text-decoration: none; color: #818ba3; zoom: 1; border-left: 1px solid transparent; border-right: 1px solid transparent; padding: 0px 12px; }
#nav li a:hover, #nav li a.hov { background-color: #fff; border-left: 1px solid #d5dce8; border-right: 1px solid #d5dce8; color: #576482; }
/* @group subnav */
#nav ul { position: absolute; left: 1px; display: none; margin: 0; padding: 0; list-style: none; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2); -o-box-shadow: 0 1px 3px rgba(0,0,0,0.2); box-shadow: 0 1px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2); padding-bottom: 3px; }
#nav ul li { width: 180px; float: left; border-top: 1px solid #fff; text-align: left; }
#nav ul li:hover { border-left: 0px solid transparent; border-right: 0px solid transparent; }
#nav ul a { display: block; height: 20px; line-height: 20px; padding: 8px 5px; color: #666; border-bottom: 1px solid transparent; text-transform: uppercase; color: #797979; font-weight: #cccccc; }
#nav ul a:hover { text-decoration: none; border-right-color: transparent; border-left-color: transparent; background: #ddd; color: #111111; }
* html #nav ul { margin: 0 0 0 -2px; }
/** @group clearfix **/
.clearfix:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; }
.clearfix { display: inline-block; }
html[xmlns] .clearfix { display: block; }
* html .clearfix { height: 1%; }
--------------------- html --------------------------------------------------
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="/style.css" media="all" />
<div class="wrap">
<ul id="nav">
<li><a href="#">CSS3HTML5</a></li>
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">Adverti</a></li>
<li><a href="#">Adverti</a></li>
<li><a href="#">Write for Us?</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</li>
<li><a href="#">Freebies</a>
<ul>
<li><a href="#">PSD</a></li>
<li><a href="#">AI Vectors</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Icons</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP MySQL</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li><a href="#">Web Tools</a>
<ul>
<li><a href="#">Performance</a></li>
<li><a href="#">Browser Testing</a></li>
<li><a href="#">CMS Plugins</a></li>
<li><a href="#">Cheat Sheets</a></li>
</ul>
</li>
<li><a href="#">Originals</a>
<ul>
<li><a href="#">Website Design</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">User Interface</a></li>
<li><a href="#">Freelancing</a></li>
<li><a href="#">Inspiration</a></li>
</ul>
</li>
</ul>
</div>
<script type="text/javascript">
$(document).ready(function() {
$('#nav li').hover(function() {
$('ul', this).slideDown(200);
$(this).children('a:first').addClass("hov");
}, function() {
$('ul', this).slideUp(100);
$(this).children('a:first').removeClass("hov");
});
});
</script>
답변 2
#nav li { float: left; display: block; background: #ffffff; position: relative; z-index: 999; margin: 0 1px; }
빨간색 부분에 색상코드를 넣으세요.
eyekiss님 코드가 정답이지만 좀 더 확실한 방법(여백으로 인한 들뜸현상 등)으로 하자면 아래의 코드를 이용하세요.
<head>
<!-- -------------------------------------------------------------------------------
## 스타일 코드
-------------------------------------------------------------------------------- -->
<style>
* {
margin: 0;
padding: 0;
}
body {
font-family: Arial, Tahoma, sans-serif;
font-size: 16px;
color: #232323;
}
/* @group structure */
#head {
background: #e1ecf6;
height: 100px;
padding-top: 15px;
border-bottom: 1px solid #d5dce8;
}
.wrap {
width: 800px;
margin: 0 auto;
}
/* @group core nav menu */
#nav {
margin: 0;
padding: 0;
list-style: none;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
border-bottom: 1px solid #d5dce8;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
height: 50px;
padding-left: 15px;
padding-right: 15px;
background: #edf3f7;
}
#nav li {
float: left;
display: block;
background: none;
position: relative;
z-index: 999;
margin: 0 1px;
}
#nav li a {
display: block;
padding: 0;
font-weight: 700;
line-height: 50px;
text-decoration: none;
color: #818ba3;
zoom: 1;
border-left: 1px solid transparent;
border-right: 1px solid transparent;
padding: 0px 12px;
}
#nav li a:hover,
#nav li a.hov {
background-color: #fff;
border-left: 1px solid #d5dce8;
border-right: 1px solid #d5dce8;
color: #576482;
}
/* @group subnav */
#nav ul {
position: absolute;
display: none;
margin: 0;
padding: 0;
padding-bottom: 3px;
left: 1px;
overflow: hidden;
list-style: none;
background: #edf3f7; /* 서브메뉴 색상추가 */
border-radius: 0 0 4px 4px; /* 서브메뉴 하단 둥글게 처리 */
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
-o-box-shadow: 0 1px 3px rgba(0,0,0,0.2);
box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}
#nav ul li {
width: 180px;
float: left;
border-top: 1px solid #fff;
text-align: left;
}
#nav ul li:first-child {
border-top: 0;
}
#nav ul li:hover {
border-left: 0px solid transparent;
border-right: 0px solid transparent;
}
#nav ul a {
display: block;
height: 20px;
line-height: 20px;
padding: 8px 5px;
color: #666;
border-bottom: 1px solid transparent;
text-transform: uppercase;
color: #797979;
font-weight: #cccccc;
}
#nav ul a:hover {
text-decoration: none;
border-right-color: transparent;
border-left-color: transparent;
background: #ddd;
color: #111111;
}
* html #nav ul {
margin: 0 0 0 -2px;
}
/** @group clearfix **/
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
.clearfix {
display: inline-block;
}
html[xmlns] .clearfix {
display: block;
}
* html .clearfix {
height: 1%;
}
</style>
</head>
<body>
<!-- -------------------------------------------------------------------------------
## 본문 내용 [메뉴]
-------------------------------------------------------------------------------- -->
<div class="wrap">
<ul id="nav">
<li><a href="#">CSS3HTML5</a></li>
<li><a href="#">jQuery</a>
<ul>
<li><a href="#">Adverti</a></li>
<li><a href="#">Adverti</a></li>
<li><a href="#">Write for Us?</a></li>
<li><a href="#">Advertising</a></li>
<li><a href="#">Get in Touch</a></li>
</ul>
</li>
<li><a href="#">Freebies</a>
<ul>
<li><a href="#">PSD</a></li>
<li><a href="#">AI Vectors</a></li>
<li><a href="#">Patterns</a></li>
<li><a href="#">Icons</a></li>
</ul>
</li>
<li><a href="#">Tutorials</a>
<ul>
<li><a href="#">HTML5</a></li>
<li><a href="#">CSS3</a></li>
<li><a href="#">jQuery</a></li>
<li><a href="#">PHP MySQL</a></li>
<li><a href="#">Ruby on Rails</a></li>
</ul>
</li>
<li><a href="#">Web Tools</a>
<ul>
<li><a href="#">Performance</a></li>
<li><a href="#">Browser Testing</a></li>
<li><a href="#">CMS Plugins</a></li>
<li><a href="#">Cheat Sheets</a></li>
</ul>
</li>
<li><a href="#">Originals</a>
<ul>
<li><a href="#">Website Design</a></li>
<li><a href="#">Mobile</a></li>
<li><a href="#">User Interface</a></li>
<li><a href="#">Freelancing</a></li>
<li><a href="#">Inspiration</a></li>
</ul>
</li>
</ul>
</div>
<!-- -------------------------------------------------------------------------------
## 스크립트
-------------------------------------------------------------------------------- -->
<script>
/* ---------------------------------------------------------------------------------
애니메이션 효과시 stop() 코드를 적용하지 않을 경우 주메뉴에 마우스를 갔다왔다 했을때,
마우스가 메뉴에서 벗어나더라도 이전에 마우스 오버된 횟수만큼 서브메뉴가 계속 열립니다.
이를 방지하기 위해 애니메이션이 들어가는 코드에 .stop()을 이용하여 마우스가 해당 영역에서
벗어 났을 경우 스크립트가 즉시 중지되도록 요청할 수 있습니다.
--------------------------------------------------------------------------------- */
$(document).ready(function(){
$('#nav li').hover(function(){
/* ------------------------------------------------
stop()을 넣어 마우스 이벤트가 정지되었을 경우
즉시 서브메뉴의 슬라이드 효과를 정지함.
------------------------------------------------ */
$('ul', this).stop().slideDown(200);
$(this).children('a:first').addClass("hov");
},function(){
/* ------------------------------------------------
stop()을 넣어 마우스 이벤트가 정지되었을 경우
즉시 서브메뉴의 슬라이드 효과를 정지함.
------------------------------------------------ */
$('ul', this).stop().slideUp(100);
$(this).children('a:first').removeClass("hov");
});
});
</script>
</body>
