CSS 드롭 다운 메뉴 하위 메뉴 글꼴 크기 변경

나는이 문제에 대한 답변을 찾기 위해 노력했지만 행운은 없습니다. 하위 메뉴의 글꼴 크기를 작게 만들려는 드롭 다운 메뉴가 있습니다. 나는 그것의 일부를 크기를 바꿀 수있다. 그러나 공중에서 나는 꽤 그것이 nav 바에서 스타일을 상속 받는다라고 확신한다. 탐색 막대에있는 크기를 변경하면 하위 메뉴 글꼴 크기가 변경되지만 탐색 막대가 마우스 오버하면 좋지 않습니다. 스타일 시트에서 몇 가지 해결 방법을 시도했지만 아무 것도 탐색 바를 넘을 수 없을 것 같습니다.CSS 드롭 다운 메뉴 하위 메뉴 글꼴 크기 변경

http://www.dinewine.com/startbootstrap-agency-1.0.6/index.html

그것은 마지막 메뉴 항목입니다 :

<li class="dropdown"> 
    <a class="page-scroll dropdown-toggle" data-toggle="dropdown" href="#">Christy Lodge<span class="glyphicon glyphicon-menu-down"></span></a> 
<ul class="dropdown-menu"> 
    <li><a href="#">View Our Rooms</a></li> 
     <li><a href="#">Room Request Form</a></li> 
     <li><a href="#">Map-Christy Lodge</a></li> 
      <li><a href="#">Policies/Procedures</a></li> 
      </ul> 
     </li>

페이지 URL가에있다 :

는 지금은 다음과 같은 작업을해야합니다. 하위 메뉴 글꼴을 10px로 설정하고 마우스를 10px로 설정합니다.

나는이 문제를 해결하는 데 도움이 될 것이라고 확신하지만, 도움을 주시면 대단히 감사하겠습니다. 정말 고마워. 당신의 CSS를 보면

출처

2016-07-06 bethabernathy

당신은 무엇을 시도 했습니까? 성공할 수 있다고 생각하는 CSS를 줄 수 있습니까? –

-Beth,이 같은 작업을해야합니다 :

.navbar-default .nav .dropdown-menu li a, 
.navbar-default .nav .dropdown-menu li a:hover { 
    font-size: 10px; 
}

출처

2016-07-06 23:11:53

안녕하세요 마르코 - 고마워요! 그것은 완벽하게 작동했습니다. 나는 이것이 어떻게 작동하는지 정확히 모르겠다. 그러나 나는 그것이 컨트롤 nav bar 엘리먼트에 대해 작동하는 css를 추가하는 것과 관련이 있다고 생각한다. – bethabernathy

문제는 선택기'.navbar-default .nav li a : hover, .navbar-default .nav li a : focus'가 사용했던 것보다 더 구체적입니다. 이것을 확인하십시오 https://developer.mozilla.org/en/docs/Web/CSS/Specificity –

좋습니다. 마르코 고마워. 말된다. – bethabernathy

이 모든 것에 클래스를 추가하는 것이 좋습니다 - 당신이 이제까지 당신의 HTML을 리팩토링없이 CSS를 변경하려는 경우 특히.

하지만 하위 메뉴과 같이 타겟팅 할 수는 :

.dropdown li { font-size: 12px; }

이 .dropdown 내에 중첩 된 모든 li 대상으로합니다. 정말 유용한 다른 선택기가 있습니다. 더 큰 목록에 대한 Lobotomized Owl을 확인하지만,이 즉시 관련 :

li > li이 : 즉시 다른 사람의 아이 (아래 두 개 이상의 수준이 중첩되지 하나 - 같은, 손자 또는 무엇이든) 인 li을 목표로하고있다.

출처

2016-07-06 23:14:19 AJFarkas

CSS 드롭 다운 메뉴 하위 메뉴 글꼴 크기 변경

답변

관련 문제