드롭 다운 메뉴에서 원하는 것을 수행하지 않습니다.

안녕하세요. 내 문제로 인해 사이트 레이아웃에서 작업하고 있습니다. 내게 문제가되지 않는다고 생각하는 이유가 있습니다. 뿐만 아니라 나는 그것을 만들었습니다. 하지만 문제는 풀다운 메뉴가 제대로 작동하지 않으므로 문제입니다.드롭 다운 메뉴에서 원하는 것을 수행하지 않습니다.

내가 당신과 코드 공유 : 또한

<html> 
<head> 
<style> 
body{ 
    background:linear-gradient(to bottom right,#013,#c0c); 
    color:#930; 
} 
#nav{ 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:40px; 
    maring-bottom:10px; 
    color:#930; 
    background-color:#cb6; 
    border:2px solid #930; 
    border-radius:13px; 
    -webkit-border-radius:13px; 
    -moz-border-radius:13px; 
    text-align:center; 
    float:center; 
    width:750px; 
    height:40px; 
} 
#main{ 
    margin-left:auto; 
    margin-right:auto; 
    margin-top:auto; 
    maring-bottom:auto; 
    color:#930; 
    background-color:#cb6; 
    border:2px solid #930; 
    border-radius:13px; 
    -webkit-border-radius:13px; 
    -moz-border-radius:13px; 
    text-align:center; 
    float:center; 
    width:750px; 
    height:500px; 
} 
#nav ul{ 
    list-style:none; 
    margin:0 auto; 
} 
#nav li{ 
    position:relative; 
    float:left; 
    display:inline; 
} 
#nav a{ 
    text-decoration:none; 
    color:#930; 
    padding:10px 25px; 
    height:20px; 
    display:inline-block; 
} 
#nav a:hover{ 
    text-decoration:none; 
    color:#fff; 
    background-color:#930; 
    padding:10px 25px; 
    height:20px; 
    display:inline-block; 
} 
#pull li ul{ 
    display:none; 
    color:#930; 
    text-align:center; 
    position:absolute; 
} 
#pull li:hover ul{ 
    display:block; 
    color:#930; 
    text-align:center; 
    position:absolute; 
} 
#pull li ul a{ 
    display:block; 
    min-width:80px; 
    width:auto; 
    height:25px; 
    color:#fff; 
    padding:0px 5px; 
    text-align:center; 
    border:2px solid #930; 
    background-color:#cb6; 
} 
#pull li ul a:hover{ 
    display:block; 
    min-width:80px; 
    width:auto; 
    height:25px; 
    color:#fff; 
    padding:0px 5px; 
    text-align:center; 
    border:2px solid #fff; 
    background-color:#930; 
} 
</style> 
</head> 
<body> 
<div id="nav"> 
<ul id="pull"> 
    <li><a href="http://www.elderpact.site11.com/home.html"><b>home</b></a></li>&nbsp&nbsp 
    <li><a href="http://www.elderpact.site11.com/page.html"><b>page 1 &#9660</b></a> 
     <ul> 
      <li><a href="http://www.elderpact.site11.com/page2.html"><b>page 2</b></a><li> 
      <li><a href="http://www.elderpact.site11.com/page3.html"><b>page 3</b></a><li> 
     </ul> 
    </li> 
</ul> 
</div> 
<br><br> 
<div id="main"> 
de content komt nog 
</div> 
</body> 
</html>

온라인 누워 아웃 www.elderpact.tk에서 눈을 볼-수

이

메뉴 표시 줄 및 모든 그들이 머물 필요를 이지만 드롭 다운 메뉴를 열면 내용 함이 낮아집니다. 이제 콘텐츠를 바로 살펴 봅니다. 또한 드롭 다운 메뉴 오프너 아래에 직접 드롭 다운 메뉴를 표시하고 싶습니다 (페이지 1).

누군가 나를 도울 수 있습니까?

출처

2013-12-10 Dylan Lindelauf

다른 메모 : 원하는 경우이 레이아웃을 사용할 수 있지만 직접 디자인 한 것으로 주장하지 마십시오. 나는 그것을 사용하고 싶다. 왜냐하면 나는 그것을 만들었지 만 다른 누군가가 그것을 사용하기를 원한다면 나는 아무런 문제가 없다. –

모든 브라우저에서 자신 만의 드롭 다운 메뉴가 작동하지 않을 수 있습니다. 이 문제를 해결하는 가장 좋은 방법은 Bootstrap Twitter입니다. http://jsfiddle.net/TPLJ8/1/

당신은 기본적 CSS의 상단에있는 ul 및 li 요소의 마진과 패딩을 제거해야

(재설정) : 여기

출처

2013-12-10 20:03:50

미안하지만, 나는 분명히 알지 못했지만 레이아웃에 영향을 미칠 수있는 원인을 사용할 수 없다. 그것은 모든 레이아웃에서 작동하지 않을 것입니다 내게 귀찮게하지 않습니다. –

문제는 그냥 드롭 다운이 리 아래로 가야한다는 것입니다. 리우가 생성되고 현재와 같이 물통이 들어 가지 않을 수도 있습니다. –

이것은 끔찍한 답변입니다. disinfor

Bootstrap DropDown 당신이 그것을 원하는 내가 생각 메뉴 방식에 바이올린의 이 같은 :

ul, li {margin:0; padding:0;}

이것은 당신이 깨끗한 상태로 시작하는 데 도움이됩니다. 스타일이 동일하면 hovers에 같은 스타일을 선언 할 필요가 없으므로 CSS를 정리했습니다.

HTML도 약간의 작업이 필요했습니다. </li> 태그를 놓치고 있었고 불필요한 <br /> 태그가있었습니다.

출처

2013-12-10 20:12:18 disinfor

어이 당신은 www.elderpact.tk 페이지 1을 확인할 수 있습니까? –

내가 원했던 메뉴와 비슷하지만 어떻게 얻었는지 모르겠다. –

드롭 다운 메뉴에서 원하는 것을 수행하지 않습니다.

답변

관련 문제