드롭 다운 메뉴 및 탐색 문제

내 탐색을위한 드롭 다운 메뉴를 디자인하려고했습니다. 불행히도 내비게이션에서 드롭 다운 버튼을 가리키면 전체 탐색과 드롭 다운이 깜박입니다. 드롭 다운 메뉴를 클릭하면 사라집니다. 유래는 HTML로 직접 변환하기 때문에드롭 다운 메뉴 및 탐색 문제

내가 당신에게 내 코드의 조각을 줄 수 없다 (이유를 모르는), 그래서 난 그냥 내 테스트 페이지에 당신에게 링크를 제공 할 수 있습니다 : http://keinkopf.de/designs/1/

편집 :

HTML

<nav> 
<ul> 
<li><a href="#" id="block1">Start</a></li> 
<li><a href="#" id="block2">Themen</a> 
<ul> 
<br /> 
<li><a href="#">1</a></li><br /> 
<li><a href="#">2</a></li><br /> 
<li><a href="#">3</a></li><br /> 
<hr /><hr /> 
</ul> 
</li> 
<li><a href="#" id="block3">3s</a></li> 
</ul> 
</nav>

CSS

 ul li ul{ 
      display: none; 

      background-color: #000000; 
      width: 400px; 
      margin-top: 40px; 
      float: left; 
     } 

    ul li ul li{ 
      margin-left: 10px; 
     } 

     ul li:hover ul{ 
      display: block; /* display the dropdown */ 
     } 

    ul { 
     padding: 0; 
     list-style: none; 
    } 

    ul li ul hr{ 
      border-color: #FFFFFF; 
      border-width: thin; 
      border-style: solid; 
     } 

li { 
    display: inline; 
    margin-right: -1px; 


} 



#block1 { 
    background-color: #000000; 
    padding-top: 3px; 
    padding-bottom: 3px; 
    padding-right: 30px; 
    padding-left: 30px; 

} 

#block1:hover { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 
} 

#block2 { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 

} 

#block2:hover { 
    background-color: #000000; 
    color: #FFFFFF; 
} 

#block3 { 
    background-color: #FFFFFF; 
    padding-top: 2px; 
    padding-bottom: 2px; 
    padding-right: 29px; 
    padding-left: 29px; 
    color: #000000; 
    border-color: #000000; 
    border-style: solid; 
    border-width: 1px; 
} 

#block3:hover { 
    background-color: #000000; 
    color: #FFFFFF; 
} 

nav a { 
    text-decoration: none; 
    color: #FFFFFF; 
    font-family: 'Lato', Arial; 
    font-size: 15pt; 
} 

nav { 
    margin-top: 39px; 


} 

hr { 

    border-color: #000000; 
    border-width: 2px; 
}

출처

2014-12-19 Johannes Schütt

질문에 코드를 붙여 강조 표시하고 도구 모음에서 '코드 형식 지정'아이콘 ('{}'모양)을 클릭하십시오. – JJJ

이 필요합니까? –

을 만들었습니다.

ul li ul{ 
    position: absolute; 
    padding-top: 40px; 
}

바 사이에 여유 공간을두고 드롭 다운하려는 경우, 그 주위에 일부 div를 추가하십시오.

출처

2014-12-19 23:03:47

글쎄, 그게 꽤 잘 작동하지만, 지금은 드롭 다운 리와 내 탐색 사이에 큰 공간이 있습니다. –

큰 공간이란 무엇입니까? 이 두 줄을 넣고 여백을 지우면 벌금이 부과됩니다. 패딩 - 탑이 너에게 너무 커서 때문이 아닌가? –

내 실수 ... 패딩 - 가기가 너무 커서 감사합니다 –

당신 부모에게 'li'(메뉴) absolute 내의 'ul'(드롭 다운 메뉴)가 position이어야합니다.

메뉴 항목 위에 마우스를 올리면 메뉴가 표시되고 메뉴 항목의 위치가 변경됩니다. 그래서 깜박입니다.

그 외에도 'ul li ul'에서 margin-top을 제거하고 인라인 대신 목록 항목을 inline-block으로 만들어 드롭 다운이 목록 항목에서 삭제되지 않도록해야합니다. 그것은 다른 개체에 영향을 나던 그래서 내가 대신 마진 사용 패딩, 절대 사용 위치를 추천 할 경우

나는 codesnipped here

출처

2014-12-19 23:03:10 ChiefORZ

저는 탭 배치와 관련이 있다고 생각합니다. 내가 말하고있는 것은 : 마우스가 탭 위로 움직일 때 나머지 하부 탭이 표시되어 마우스에서 탭을 밀고 따라서 메뉴가 닫히거나 깜빡 거리는 경우입니다.

출처

2014-12-19 23:06:00

드롭 다운 메뉴 및 탐색 문제

답변

관련 문제