2016-07-24 3 views
1

내 위 블리 (CSS) 코드 활성 서브 메뉴의 배경을 변경하되 이에... 어떻게 그럴 수 그래서 난 그냥이를 알아 내기 위해 노력하고있어 나는 CSS에는 특급 없어 ... 문제를 가지고

내가 Weebly에서 만들고있는 사이트에서 서브 메뉴가 '능동적 인'배경을 가지기를 원합니다. 어떻게해야하는지는 알지만 작동하지 않으며 왜 그렇지 않은지 모르겠습니다. 하위 메뉴가 활성화되어 있어도 그 위에있는 메뉴가 활성 상태로 유지되기를 원하지만 (여전히 클릭 가능)

https://postimg.org/image/6s8phmliv/ 여기 내가 의미하는 이미지가 있습니다. 마우스를 가져 가면 원하는 색을 얻을 수 있습니다. # 657a8f)와 글꼴 색상 (# 97da6f)이 활성화되어있을 때 그 배경색 (# 657a8f; 배경색 : # 657a8f;)으로 되돌아 가지 않아야합니다. .

/* Nav */ 
.nav { 
    text-align: center; 
    background: #4c5a67; 

} 
.nav ul { 
    display: inline-block; 
    vertical-align: top; 
    list-style-type: none; 

} 
.nav ul li { 
    position: relative; 
    display: inline-block; 
} 
.nav ul li a { 
    display: block; 
    padding: 1em; 
    color: #b9b9b9; 
    text-transform: uppercase; 
    letter-spacing: .07em; 
    font-family: 'Quattrocento Sans', sans-serif; 
    font-size: 22px; 
    font-weight: 400; 
    line-height: 19px; 
    -webkit-transition: all 300ms linear; 
    -moz-transition: all 300ms linear; 
    -ms-transition: all 300ms linear; 
    -o-transition: all 300ms linear; 
    transition: all 300ms linear; 
} 
.nav ul li#active > a.wsite-menu-item, 
.nav ul li > a.wsite-menu-item:hover { 
    color: #97da6f; 
    background: #657a8f; 
} 
.mobile-nav { 
    display: none; 
} 
/* Submenu */ 
#wsite-menus .wsite-menu { 
    border-top: 1px solid #b9b9b9; 
    width: 170px; 
} 
#wsite-menus .wsite-menu li a { 
    color: #b9b9b9; 
    background: #657a8f; 
    border: none; 
    text-transform: Capitalize; 
    letter-spacing: .07em; 
} 
#wsite-menus .wsite-menu li:last-child a { 
    background: #4c5a67; 
    border-bottom: none; 
    width: 160px; 
    border-top: 1px solid #b9b9b9; 
    border-bottom: 1px solid #b9b9b9; 
    font-size: 17px; 
} 
#wsite-menus .wsite-menu li:first-child a { 
    background: #4c5a67; 
    border-bottom: none; 
    width: 160px; 
    font-size: 17px; 
} 
.nav ul li#active > a.wsite-menu-item{ 
    color: #97da6f; 
    background: #657a8f; 
} 
.nav ul li > a.wsite-menu-item:hover, 
#wsite-menus .wsite-menu li a:hover { 
    background: #657a8f; 
    color: #97da72; 
} 
#wsite-menus .wsite-menu li a:hover .wsite-menu-arrow:before { 
    background: #657a8f; 
    color: #97da72; 
} 
#wsite-menus .wsite-menu-arrow { 
    background: #657a8f; 
    color: #97da72; 
    font-size: 0; 
} 
#wsite-menus .wsite-menu-arrow:before { 
    background: #657a8f; 
    display: block; 
    color: #97da72; 
    content: '\203A'; 
    font-family: 'Quattrocento Sans', sans-serif; 
    font-size: 24px; 
    font-weight: normal; 
    line-height: 11px; 
}[enter image description here][1] 
:. 마찬가지로, 나는 내 코드입니다 (이 여기에 공중 선회 오버 하위 메뉴

와 같은 활성 색상을 가지고 활동하는 것처럼도 강조 '쇼릴'을 유지하는 방법을 알아낼 수 없습니다

정말 고마워요.별로 모르겠어요. 다른 코드로 물건을 떨어 뜨리고, 내가 옳은 정보를 업데이트했는지 알기 때문에 거기서 엉망이되었을지도 모릅니다.

답변

0

전체 코드 없이는 테스트하기가 어렵 기 때문에 이것은 순수한 추측입니다.

CSS에 추가

.nav ul li > a.wsite-menu-item:active,, .nav ul li > a.wsite-menu-item:focus { 
    background: orange; 
} 
0

을 메인 탐색 메뉴의 경우, (텍스트)를 사용하면 사용할 수 있습니다.

.nav ul li#active a { 
    color: #97da6f; 
} 

을 주요 탐색의 배경에 대 한, 당신은 사용할 수 있습니다

.nav ul li#active { 
    background: #657a8f; 
} 

Weebly가 id = "active"를 주 nav에 추가했기 때문에.

~

드롭 다운 메뉴의 (하위 탐색), 다른 한편으로는, 위 블리는이 작업을 수행하지 않습니다. 따라서 커뮤니티 페이지에서 기능 요청으로 제출해야합니다.