(CSS) 메뉴배경 색상과 드롭다운 배경 색상을 각각 다르게 주고 싶습니다. 채택완료

따라하기 10년 전 조회 5,845

메뉴배경 색상과 드롭다운 배경 색상을 각각 다르게 주고 싶습니다.

HTML

                              </p><p style="margin-left: 0px;"> <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></p><p style="margin-left: 0px;">

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; }

#그누보드5 #css #웹표준 #jquery #제이쿼리

댓글을 작성하려면 로그인이 필요합니다.

답변 2개

정렬:

윈드디자인1

10년 전

 
01"float:left">
02                                  class="menu">
03                                      "#">ABOUT
04                                        class="sub">
05                                           "#">ABOUT KOTEKA
06                                           "#">CORE TECH
07                                           "#">PRODUCTS
08                                           "#">NOTICE
09                                           "#">CONTACT
10                                           "#">SHOP

                                                    로그인 후 평가할 수 있습니다
                                                
                                            댓글을 작성하려면 로그인이 필요합니다.
                                        
                p
            
                                                            port
                                                        
10년 전

일단 소스가 문제 있는 듯 합니다.
, ,... 와 같은 존재하지 않는 태그가 있네요. 
스타일시트도 ul에 대한 정의된 부분이 없는 것 같구요.

                                                    로그인 후 평가할 수 있습니다
                                                
                                            댓글을 작성하려면 로그인이 필요합니다.
                                        
답변을 작성하려면 로그인이 필요합니다.

                        로그인
                    
            지금 질문하기
        
                질문하는방법
            
                모든질문
                129,285
            
                답변없는질문
                8
            
                미채택된질문
                18,376
            
                채택된질문
                101,681
            
모든답변
                5
                그누보드5
                62,905
            
                영카트5
                17,535
            
                태그전체보기
            
관심태그
                                                        
                    #영카트5
                
                    #그누보드4
                
                    #영카트4
                
                    #정규식
                
                    #테마
                
                    #그누보드5
                
                    #네이버페이
                
                    #그누커머스
                
                    #php
                
                    #그누보드6
                
인기태그
                                                        
                    #그누보드5
                                            (62,905)
                                    
                    #영카트5
                                            (17,535)
                                    
                    #php
                                            (15,830)
                                    
                    #그누보드4
                                            (10,649)
                                    
                    #게시판
                                            (3,273)
                                    
                    #javascript
                                            (2,678)
                                    
                    #그누보드
                                            (2,463)
                                    
                    #css
                                            (2,129)
                                    
                    #mysql
                                            (1,556)
                                    
                    #영카트
                                            (1,295)
                                    
                    #모바일
                                            (1,293)
                                    
                    #그누커머스
                                            (1,178)
                                    
                    #html
                                            (1,133)
                                    
                    #jquery
                                            (1,027)
                                    
                    #최신글
                                            (970)
                                    
                    #자바스크립트
                                            (953)
                                    
                    #DB
                                            (850)
                                    
                    #로그인
                                            (821)
                                    
                    #이미지
                                            (785)
                                    
                    #여분필드
                                            (784)
                                    
                공유하기
                
이 게시물을 신고 하시겠습니까?
신고사유를 선택해주세요.

            광고성 게시물
        
            음란성 게시물
        
            상대방 비방 및 혐오
        
기타
                기타 신고사유
                
(주)에스아이알소프트 | 사업자등록번호: 217-81-36347 | 대표: 홍석명
서울특별시 강남구 테헤란로 322 한신인터밸리24 서관 1402호
© 2025 SIRSOFT. All rights reserved.