(CSS) 메뉴배경 색상과 드롭다운 배경 색상을 각각 다르게 주고 싶습니다.
본문
메뉴배경 색상과 드롭다운 배경 색상을 각각 다르게 주고 싶습니다.
HTML
<div style="float:left">
<ul class="menu">
<li1><a href="#">ABOUT</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
<li><a href="#">CONTACT</a></li>
<li><a href="#">SHOP</a></li>
</ul>
</li1>
<li2><a href="#">CORE</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
</ul>
</li2>
<li3><a href="#">PRODUCTS</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
</ul>
</li3>
<li4><a href="#">NOTICE</a>
<ul class="sub">
<li><a href="#">ABOUT KOTEKA</a></li>
<li><a href="#">CORE TECH</a></li>
<li><a href="#">PRODUCTS</a></li>
<li><a href="#">NOTICE</a></li>
</ul>
</li4>
<li5><a href="#">SHOP</a>
</li5>
</ul>
</div>
CSS
ul.menu li1{
float: left;
width: 100px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li2{
float: left;
width: 95px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li3{
float: left;
width: 130px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li4{
float: left;
width: 105px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li5{
float: left;
width: 80px;
height: 40px;
background-color:#ef3e36;
position: relative;
}
ul.menu li1 a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
background-color:#ef3e36;
}
ul.menu li2 a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
background-color:#ef3e36;
}
ul.menu li3 a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
background-color:#ef3e36;
}
ul.menu li4 a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
background-color:#ef3e36;
}
ul.menu li5 a{
display: block;
width: 100%;
height:40px;
line-height: 40px;
text-indent: 10px;
font-weight: bold;
color:#FFF;
text-decoration: none;
background-color:#ef3e36;
}
ul.menu li1 a:hover{
background-color:#F90;
text-decoration:underline;
}
ul.menu li2 a:hover{
background-color:#F90;
text-decoration:underline;
}
ul.menu li3 a:hover{
background-color:#F90;
text-decoration:underline;
}
ul.menu li4 a:hover{
background-color:#F90;
text-decoration:underline;
}
ul.menu li5 a:hover{
background-color:#F90;
text-decoration:underline;
}
ul.menu li1 ul.sub{
position: absolute;
width:200px;
}
ul.menu li2 ul.sub{
position: absolute;
width:200px;
}
ul.menu li3 ul.sub{
position: absolute;
width:200px;
}
ul.menu li4 ul.sub{
position: absolute;
width:200px;
}
ul.menu li5 ul.sub{
position: absolute;
width:200px;
}
ul.menu{
zoom: 1;
}
ul.menu:after{
height: 0;
visibility: hidden;
content: ".";
display: block;
clear: both;
}
답변 2
일단 소스가 문제 있는 듯 합니다.
<li1>, <li2>,... 와 같은 존재하지 않는 태그가 있네요.
스타일시트도 ul에 대한 정의된 부분이 없는 것 같구요.
01 | <div style="float:left"> |
02 | <ul class="menu"> |
03 | <li1><a href="#">ABOUT</a> |
04 | <ul class="sub"> |
05 | <li><a href="#">ABOUT KOTEKA</a></li> |
06 | <li><a href="#">CORE TECH</a></li> |
07 | <li><a href="#">PRODUCTS</a></li> |
08 | <li><a href="#">NOTICE</a></li> |
09 | <li><a href="#">CONTACT</a></li> |
10 | <li><a href="#">SHOP</a></li> |
|