2014-07-20 2 views
0

상단 메뉴 막대가 있으며 각 메뉴 항목 위로 마우스를 가져 가면 자주색으로 바뀝니다.커서가 하위 메뉴로 이동했을 때 CSS 상단 메뉴가 마우스 커서가 움직이지 않을 때

이러한 메뉴 중 하나에는 추가 항목 드롭 다운 목록도 있습니다. 이 하위 메뉴를 통해 마우스 커서를 아래로 움직이면 최상위 메뉴가 원래 스타일로 돌아갑니다. 하위 메뉴 항목 위에 마우스를 올려 놓더라도 보라색을 유지하고 싶습니다. 웹 사이트가 here 인 경우, "정보"아래의 하위 메뉴 위로 마우스를 이동하면 문제가 표시됩니다.

나는 비슷한 몇 가지 stackoverflow 답변을 통해 검색했습니다. 예를 들어,이 문제는 previous answer here입니다. 나는

#topnav li hover:a {} 

#topnav li a:hover {} 

에서 변화를 시도하지만이 제안 된 변경 또는 원래 어느 쪽 상단 메뉴 보라색 유지합니다. 아래의 전체 코드 :

#topnav { 
    clear: both; 
    background: url(nav-bg-orange.png) no-repeat; 
    height: 87px; 
    width: 962px; 
    padding: 6px 63px 6px; 
} 

#topnav ul { 
    list-style: none; 
    float: left; 
} 

#topnav ul li { 
    list-style: none; 
    float: left; 
    padding: 3px 0 0 0; 
    border-left: 1px dashed #f38739; 
} 

#topnav ul li:last-child { 
    border-right: 1px dashed #f38739; 
} 

#topnav ul li a { 
    float: left; 
    display: block; 
    color: #fff; 
    font-size: 14px; 
    text-decoration: none; 
    font-family: Arial, Helvetica, sans-serif; 
    font-weight: bold; 
    padding: 15px 20px 15px 20px; 
    border: 0; 
    outline: 0; 
    line-height: 1; 
    list-style-type: none; 
    text-transform: uppercase; 
} 

#topnav li#active a, 
#topnav li:hover a { 
    color: #fff; 
    background: #745b7c; 
    display:block; 
    border-radius: 5px 5px 0 0; 
} 


/****************************** flyout menus ******************************/ 

#wsite-menus .wsite-menu li a { 
    font-family: Tahoma, Geneva, sans-serif; 
    padding: 11px; 
    color: #fff; 
    background: #745b7c; 
    border: 0; 
    border-bottom: 1px dashed #9e89a4; 
} 

#wsite-menus .wsite-menu li:hover a { 
    color: #fff; 
    background: #8c7395; 
} 
+0

당신도 html을 공유 할 수 있습니까 ..? – Awesomestvi

+0

'#topnav ul : hover'을 시도해 보셨습니까? – simeg

+0

어떤 jsfiddle을 사용할 수 있습니까? –

답변

0

나는 친구에게 나를 위해 이것을 보도록했다. 메뉴를 수정하는 ordre에서 현재 하위 메뉴를 움직이는 javascript를 변경해야했습니다. 불행히도 Weebly 기반 템플릿을 사용하기 때문에이 코드를 액세스 할 수 없습니다. 그래서 막 다른 골목처럼 보입니다.

-1

실례합니다. CSS를 처음 사용하십니까? 당신이해야 할 일은 UL : HOVER를 사용하는 것입니다. LI에서 마우스를 제거하기 때문입니다. 따라서 UL을 트리거로 사용하십시오. LI를 변경하더라도 UL은 사라지지 않습니다. :)

+0

예 새로운 기능! ul : Hover를 사용하면 모든 상단 탐색 메뉴가 선택됩니다. 두렵습니다. 방금 해봤 어. 마우스가이 낮은 레벨의 LI로 이동할 때도 특정 하위 메뉴의 최상위 메뉴를 선택 상태로 유지하려고합니다. –

0

당신은 제대로 작동합니다이 경우 클래스

.wsite-nav-3 

와 요소에 중첩하여

#wsite-menus 

메뉴를 넣어 시도 할 수 있습니다.

<li id="pg524622535697207710" class="wsite-nav-3" style="position: relative;"><a href="/about.html" style="position: relative;">About </a><div id="wsite-menus"><div class="wsite-menu-wrap" style="position: absolute; left: -1118px; display: block; top: 47px;"><ul class="wsite-menu" style="display: block;"><li id="wsite-nav-977240454937878932" style="position: relative;"><a href="/hatha-yoga.html" style="position: relative;"><span class="wsite-menu-title">Hatha Yoga</span></a></li><li id="wsite-nav-788960178245244400" style="position: relative;"><a href="/yin-yoga.html" style="position: relative;"><span class="wsite-menu-title">Yin Yoga</span></a></li><li id="wsite-nav-226130023988115977" style="position: relative;"><a href="/yoga-for-men.html" style="position: relative;"><span class="wsite-menu-title">Yoga for Men</span></a></li><li id="wsite-nav-104813911397431638" style="position: relative;"><a href="/prenatel-yoga.html" style="position: relative;"><span class="wsite-menu-title">Prenatel Yoga</span></a></li><li id="wsite-nav-176000207649938754" style="position: relative;"><a href="/private-classes.html" style="position: relative;"><span class="wsite-menu-title">Private Classes</span></a></li><li id="wsite-nav-558168910269966978" style="position: relative;"><a href="/yoga-for-business.html" style="position: relative;"><span class="wsite-menu-title">Yoga for Business</span></a></li></ul></div></div> </li> 

본인 확인하지 않았지만 괜찮습니다.

관련 문제