드롭 다운 메뉴에 로고 맞추기

최종 목표는 이미지 B에 보이는 것을 만드는 것입니다. 참고 : 메뉴 막대는 페이지의 가운데에 위치해야합니다. 이미지의 세로 정렬을 가운데로 설정하여 B를 만들었습니다. 그러나 이렇게하면 내 드롭 다운 메뉴가 메인 헤더에서 약간 분리됩니다. 따라서 마우스 커서를 아래로 움직이면 하위 메뉴 항목을 선택할 수 없습니다. 이 작품 제작에 대한 아이디어가 있습니까? 로고 높이를 다루까지 감사 질리언은드롭 다운 메뉴에 로고 맞추기

Example A and B

<style> 


     #nav{ 
      border:1px solid #ccc; 
      border-width:1px 0; 
      list-style:none; 
      margin:0; 
      padding:0; 
      text-align:center; 
     } 
     #nav li{ 
      position:relative; 
      display:inline; 
     } 
     #nav a{ 
      display:inline-block; 
      padding:10px; 
     } 
     #nav ul{ 
      position:absolute; 
      /*top:100%; Uncommenting this makes the dropdowns work in IE7 but looks a little worse in all other browsers. Your call. */ 
      left:-9999px; 
      margin:0; 
      padding:0; 
      text-align:left; 
     } 
     #nav ul li{ 
      display:block; 
     } 
     #nav li:hover ul{ 
      left:0; 
     } 
     #nav li:hover a{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 
     #nav li:hover ul a{ 
      text-decoration:none; 
      background:none; 
     } 
     #nav li:hover ul a:hover{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 
     #nav ul a{ 
      white-space:nowrap; 
      display:block; 
      border-bottom:1px solid #ccc; 
     } 
     a{ 
      color:#c00; 
      text-decoration:none; 
      font-weight:bold; 
     } 
     a:hover{ 
      text-decoration:underline; 
      background:#f1f1f1; 
     } 

</style> 

</head> 
<body> 
<ul id="nav"> 
    <li><a href="link1.html">Item one</a></li> 
    <li><a href="#">Item two</a> 
    <ul> 
    <li><a href="link1.html">Sub1</a></li> 
    <li><a href="link1.html">Sub2</a></li> 
    </ul> 
    </li> 
    <li class="double-line"> 
    <a href="index.php"><img style="vertical-align:middle" src="img/logo_large.png" alt="logo" /></a></li> 
    <li><a href="link4.html">The Fourth</a></li> 
    <li><a href="link5.html">Last</a></li> 
</ul> 
</body> 
</html>

출처

2013-09-10 user2197774

당신은 하위 메뉴를 상쇄 할 수 있습니다. 여기

은 구글 로고를 사용하고이를 추가하여 하위 메뉴 스타일을 변경 JSfiddle입니다 :

#nav ul { 
    top: 20px; 
}

출처

2013-09-10 22:58:03

단순 ... PR 감사 – user2197774

당신이 좋아하는 일을 할,

#nav ul{ 
    background:url('img/logo_large.png') no-repeat center center; 
    /* more CSS here */ 
}

당신이 링크로 사용하지 않는 한. 그런 다음 #nav ul이 position:relative; 인 이미지의 경우 position:absolute;을 고려하고 다른 링크의 경우 부동 레이아웃을 사용하여 z-index이 넘기 위해 겹치도록하십시오.

출처

2013-09-10 23:21:27 PHPglue

CSS line-height: X px에 삽입하십시오. (항목 1, 항목 2, 넷째 등)의 각 항목 (예 : 상위 div 높이)

출처

2013-09-10 23:25:00

드롭 다운 메뉴에 로고 맞추기

답변

관련 문제