위치 상대 값이 작동하지 않는 이유는 무엇입니까?

Question

나는이

하지만 내가 도착하면, 하위 메뉴가 정상적으로 표시되지 않습니다이

처럼 보여야 페이지에 사이드 바이 같은 내 코드 조회

.submenu{ 
    position: absolute; 
} 
.submenu ul{ 
    height: auto !important; 
    background-color: transparent !important; 
} 
.submenu ul li{ 
    position: static !important; 
} 

right: value을 할당하면 구성 요소의 동작이 일반적이지 않습니다. Here is a jsfiddle

고맙습니다!

Answer 1

좋아, 나는이 일을하고 있지만 네가 제공 한 바이올린은 아니야. 오버플로에 대한 질문에 대한 바이올린을 만들 때 질문이나 문제와 관련된 코드 만 격리하려고합니다. 거기에 모든 것을 추가하면 관련 자료를 찾기가 조금 어렵습니다.

나는 그것이 어떻게 작동 하는지를 보여주기 위해 당신을 위해 바이올린을 만들었고, 당신이 그것을 어떻게 사용하는지 자유롭게 느끼는 방법을 좋아한다면, 이것은 CSS 드롭 다운이며 스크립팅이 필요하지 않습니다. 당신이해야 할 일은 ul'sli 태그의 내부에 ul을 넣는 것입니다. 그런 다음 중첩 된 ul을 숨겨야 나중에 마우스를 올리면 나타납니다.

내가 만든 삼각형은 CSS3 삼각형이 아니어도 이미지를 사용할 수 있습니다.

HTML

<div class="sideBar"> 
<ul> 
    <li>¿Porqué Nosotros?</li> 
    <li><span class="tri"></span>Pregrado 
     <ul> 
      <li>Diseño &amp; Comunicación Visual</li> 
      <li>Comunicació y Relaciones Públicas</li> 
     </ul> 
    </li> 
    <li>Posgrado</li> 
    <li>Maestría</li> 
    <li>Calendario</li> 
</ul> 

CSS 여기

.sideBar { 
    position: absolute; 
    top: 0; 
    left: 0; 
    background: black; 
    color: #fff; 
    width: 200px; 
} 

.sideBar ul { 
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
} 

.sideBar ul li { 
    height: 20%; 
    width: 180px; 
    padding: 10px 0 10px 20px; 
    border-top: 1px solid #fff; 
    border-bottom: 1px solid #fff; 
} 

.tri { 
    content: ""; 
    border-top: 19px solid transparent; 
    border-bottom: 19px solid transparent; 
    border-left: 10px solid red; 
    position: absolute; 
    width: 0; 
    height: 0; 
    padding: 0; 
    margin: 0; 
    left: 100%; 
    top: 20%; 
    display: none; 
    z-index: 1000; 
} 

.tri:after { 
    height: 38px; 
    left: 100%; 
    top: 0; 
    content: ""; 
    position: absolute; 
    width: 10px; 
    display: block; 
} 

.sideBar ul li:hover .tri { 
    display: block; 
} 

.sideBar ul li:hover { 
    background: red; 
} 

.sideBar ul li ul { 
    display: none; 
    position: absolute; 
    top: 30%; 
    left: 100%; 
} 

.sideBar ul li ul li { 
    background: #7b7b7b; 
    border: none; 
    padding-left: 20px; 
    width: 260px; 
} 

.sideBar ul li ul li:hover { 
    background: black; 
} 

.sideBar ul li:hover ul { 
    display: block; 
} 

는 시각적 참조를 위해 사용할 수있는 바이올린입니다.

jsfiddle

도움이 더 필요한 경우 알려주세요.