너비가 자동이고 높이가 자동 인 마우스 오버 래퍼를 펼치십시오.

Question

"menu_unidades"라는 id를 가진 메뉴를 가지고 작업하고 있습니다. div가 마우스 위로 펼쳐지면이 div에서 크기를 조정하기를 원합니다. 여기

내가 당신의 래퍼에 사용자 정의 모양을 제공하려면 제대로 이해하고 superfish 수정 CSS

CSS

/*** ESSENTIAL STYLES ***/ 
body { 
font-family: Arial,Helvetica,sans-serif; 
font-size: 11px; 
} 

#menu_unidades { 
    width: auto; 
    height: auto; 
    position: relative; 
    float: left; 
padding: 10px 15px 10px 10px; 
box-shadow: 0px 2px 2px rgb(102, 102, 102); 
    left: 50px; 
    margin-top: 10px; 
    margin-bottom: 20px; 
background-color: rgba(0,53,146,0.7); 
} 

.sf-menu, .sf-menu * { 
    margin: 0; 
    padding: 0; 
list-style: none; 
} 
.sf-menu li { 
position: relative; 
} 
    .sf-menu ul { 
    position: absolute; 
    display: none; 
    top: 100%; 
    left: 0; 
z-index: 99; 
} 
.sf-menu > li { 
float: left; 
} 
.sf-menu li:hover > ul, 
.sf-menu li.sfHover > ul { 
display: block; 
} 

.sf-menu a { 
display: block; 
position: relative; 
} 
.sf-menu ul ul { 
top: 0; 
left: 100%; 
} 

.sf-menu li ul { 
padding: 10px 15px 10px 10px; 
background-color: rgba(0,53,146,0.7); 
} 

.sf-menu li li { 
    padding-left:10px; 
    padding-right:10px; 
    padding-top:1px; 
padding-bottom:1px; 
} 

.sf-menu li ul a{ 
    padding:2px; 
    font-size: 12px; 
text-transform:none; 
} 

/*** DEMO SKIN ***/ 
.sf-menu { 
    /*float: left;*/ 
margin-bottom: 1em; 
} 
.sf-menu ul { 
box-shadow: 2px 2px 6px rgba(0,43,146,0.7); 
min-width: 12em; /* allow long menu items to determine submenu width */ 
*width: 12em; /* no auto sub width for IE7, see white-space comment below */ 
} 

.sf-menu li { 
border-bottom:1px solid #fff; 
white-space: nowrap; /* no need for Supersubs plugin */ 
*white-space: normal; /* ...unless you support IE7 (let it wrap) */ 
-webkit-transition: background .2s; 
transition: background .2s; 
} 
.sf-menu ul li { 
} 
.sf-menu ul ul li { 
} 
.sf-menu li:hover, 
.sf-menu li.sfHover { 
background-color: rgba(0,53,146,0.7); 
/* only transition out, not in */ 
-webkit-transition: none; 
transition: none; 
} 

/*** arrows (for all except IE7) **/ 
.sf-arrows .sf-with-ul { 
padding-right: 2.5em; 
*padding-right: 1em; /* no CSS arrows for IE7 (lack pseudo-elements) */ 
} 
/* styling for both css and generated arrows */ 
    .sf-arrows .sf-with-ul:after { 
    content: ''; 
    position: absolute; 
    top: 50%; 
    right: 1em; 
    margin-top: -3px; 
    height: 0; 
width: 0; 
/* order of following 3 rules important for fallbacks to work */ 
border: 5px solid transparent; 
border-top-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ 
border-top-color: rgba(255,255,255,.5); 
} 
.sf-arrows > li > .sf-with-ul:focus:after, 
.sf-arrows > li:hover > .sf-with-ul:after, 
.sf-arrows > .sfHover > .sf-with-ul:after { 
border-top-color: white; /* IE8 fallback colour */ 
} 
/* styling for right-facing arrows */ 
.sf-arrows ul .sf-with-ul:after { 
margin-top: -5px; 
margin-right: -3px; 
border-color: transparent; 
border-left-color: #dFeEFF; /* edit this to suit design (no rgba in IE8) */ 
border-left-color: rgba(255,255,255,.5); 
} 
.sf-arrows ul li > .sf-with-ul:focus:after, 
.sf-arrows ul li:hover > .sf-with-ul:after, 
.sf-arrows ul .sfHover > .sf-with-ul:after { 
border-left-color: white; 
} 

HTML

Answer 1

에서 볼 수 있습니다 당신은 처음에 나는 그것이 ul의의 모든 absolute를 추가했다는 인상이었다이 css 선택, .sf-menu ul했다.

그런 다음 .sf-menu > ul으로 변경하여 .sf-menu의 내부에있는 ul을 구체적으로 타겟팅합니다. 그것은 정확히 고정 이유

.sf-menu > ul { 
    position: absolute; 
    top: 100%; 
    left: 0; 
    z-index: 99; 
} 

css의 모든 이상 찾고 후 나는 100% 확실하지 않다. 당신은 귀하의 css에 수업 등을 중복해서 가지고 있습니다.

이유가 정확히 이 아니고이 확장되지 않은 이유는 position: absolute이라는 사실 때문입니다. 그것들은 마치 거기에 떠 다니는 것처럼 전혀 빠져 나가지 않는 것처럼 요소의 바깥으로 옮겨집니다.

>이 없으면 .sf-menu에 position: absolute을 적용한 것이 가장 좋을 것으로 추측됩니다. 이렇게하면 전체 탐색을 워크 플로에서 제거하고 부모를 콘텐츠로 확장하지 않습니다.

이제 절대 div는 .sf-menu의 li과 관련이 있으며 li이 상대적으로 배치되어 있으므로 부모가 채울 수 있습니다.

여기에이 있습니다.

Answer 2

작업을하고있는 FIDDLE

입니다 마우스 오버를 기반으로합니까? 그렇다면 당신은 mouseenter와하는 MouseLeave에에 사용자 정의 클래스를 추가 할 수 있습니다

$('div#menu_unidades').hover(function() { 
    $(this).toggleClass('test-class'); 
}); 

당신이 테스트 수준의 CSS와 프레스토에 원하는대로 추가! 당신은 JQuery awesomeness를 가졌다. 현재 활동 http://jsfiddle.net/qLu62/1/