커서가 움직일 때 메인 메뉴가 확장되는 것을 멈추는 방법

Question

나는이 Navbar를 가지고 놀고 있는데, 'About and Portfolio'메뉴는 당신이 위에 올 때마다 옆으로 뻗어 나간다. 확장을 막고 싶습니다. JSFiddle에서 코드를 확인할 수 있습니다. 미리 감사드립니다.

https://jsfiddle.net/JustCraze/gdc56899/1/#

HTML

<ul id="main-nav"> 
        <li> 
         <a href="#">Home</a> 
        </li> 
        <li> 
         <a href="#">About ￬</a> 
         <ul class="hidden"> 
          <li> 
           <a href="#">Who We Are</a> 
          </li> 
          <li> 
           <a href="#">What We Do</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">Portfolio ￬</a> 
         <ul class="hidden"> 
          <li> 
           <a href="#">Photography</a> 
          </li> 
          <li> 
           <a href="#">Web & User Interface Design</a> 
          </li> 
          <li> 
           <a href="#">Illustration</a> 
          </li> 
         </ul> 
        </li> 
        <li> 
         <a href="#">News</a> 
        </li> 
        <li> 
         <a href="#">Contact</a> 
        </li> 
       </ul> 

CSS

#wrap-nav { 
    display: block; 
    margin:2rem; 
    z-index: 900; 
    padding: 5rem; 
} 
#main-nav { 
    display: block; 
    z-index: 950; 
    padding: 1rem; 
    float: right; 
} 
/*Strip the ul of padding and list styling*/ 
ul { 
    list-style-type:none; 
    margin:0; 
    padding:.1rem; 
} 

/*Create a horizontal list with spacing*/ 
li { 
    display:inline-block; 
    float: left; 
    margin-right: 1px; 
} 

/*Style for menu links*/ 
li a { 
    display:block; 
    min-width:140px; 
    height: 50px; 
    text-align: center; 
    line-height: 50px; 
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
    color: #fff; 
    background: #2f3036; 
    text-decoration: none; 
} 

/*Hover state for top level links*/ 
li:hover a { 
    background: #19c589; 
    z-index: 980; 
} 

/*Style for dropdown links*/ 
li:hover ul a { 
    background: #f3f3f3; 
    color: #2f3036; 
    height: 40px; 
    line-height: 40px; 
    z-index: 980; 
} 

/*Hover state for dropdown links*/ 
li:hover ul a:hover { 
    background: #19c589; 
    color: #fff; 
    z-index: 980; 
} 

/*Hide dropdown links until they are needed*/ 
li ul { 
    display: none; 
} 

/*Make dropdown links vertical*/ 
li ul li { 
    display: block; 
    float: none; 
} 

/*Prevent text wrapping*/ 
li ul li a { 
    width: auto; 
    min-width: 100px; 
    padding: 0 20px; 
} 

/*Display the dropdown on hover*/ 
ul li a:hover + .hidden, .hidden:hover { 
    display: block; 
} 

/*Responsive Styles*/ 

@media screen and (max-width : 250px){ 
    /*Make dropdown links appear inline*/ 
    ul { 
     position: static; 
     display: none; 
    } 
    /*Create vertical spacing*/ 
    li { 
     margin-bottom: 1px; 
    } 
    /*Make all menu links full width*/ 
    ul li, li a { 
     width: 100%; 
    } 

Answer 1

트릭들이 늘 방을하므로 절대, li ul 위치를 확인하는 것입니다.

#wrap-nav { 
 
    display: block; 
 
    margin:2rem; 
 
    z-index: 900; 
 
    padding: 5rem; 
 
} 
 
#main-nav { 
 
    display: block; 
 
    z-index: 950; 
 
    padding: 1rem; 
 
    float: right; 
 
} 
 
/*Strip the ul of padding and list styling*/ 
 
ul { 
 
\t list-style-type:none; 
 
\t margin:0; 
 
\t padding:.1rem; 
 
} 
 

 
/*Create a horizontal list with spacing*/ 
 
li { 
 
\t display:inline-block; 
 
\t float: left; 
 
\t margin-right: 1px; 
 
} 
 

 
/*Style for menu links*/ 
 
li a { 
 
\t display:block; 
 
\t min-width:140px; 
 
\t height: 50px; 
 
\t text-align: center; 
 
\t line-height: 50px; 
 
\t font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; 
 
\t color: #fff; 
 
\t background: #2f3036; 
 
\t text-decoration: none; 
 
} 
 

 
/*Hover state for top level links*/ 
 
li:hover a { 
 
\t background: #19c589; 
 
    z-index: 980; 
 
} 
 

 
/*Style for dropdown links*/ 
 
li:hover ul a { 
 
\t background: #f3f3f3; 
 
\t color: #2f3036; 
 
\t height: 40px; 
 
\t line-height: 40px; 
 
    z-index: 980; 
 
} 
 

 
/*Hover state for dropdown links*/ 
 
li:hover ul a:hover { 
 
\t background: #19c589; 
 
\t color: #fff; 
 
    z-index: 980; 
 
} 
 

 
/*Hide dropdown links until they are needed*/ 
 
li ul { 
 
\t display: none; 
 
    /*this is the trick*/ 
 
    position:absolute; 
 
} 
 

 
/*Make dropdown links vertical*/ 
 
li ul li { 
 
\t display: block; 
 
\t float: none; 
 
} 
 

 
/*Prevent text wrapping*/ 
 
li ul li a { 
 
\t width: auto; 
 
\t min-width: 100px; 
 
\t padding: 0 20px; 
 
} 
 

 
/*Display the dropdown on hover*/ 
 
ul li a:hover + .hidden, .hidden:hover { 
 
\t display: block; 
 
} 
 

 
/*Responsive Styles*/ 
 

 
@media screen and (max-width : 250px){ 
 
\t /*Make dropdown links appear inline*/ 
 
\t ul { 
 
\t \t position: static; 
 
\t \t display: none; 
 
\t } 
 
\t /*Create vertical spacing*/ 
 
\t li { 
 
\t \t margin-bottom: 1px; 
 
\t } 
 
\t /*Make all menu links full width*/ 
 
\t ul li, li a { 
 
\t \t width: 100%; 
 
\t }

<ul id="main-nav"> 
 
        <li> 
 
         <a href="#">Home</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">About ￬</a> 
 
         <ul class="hidden"> 
 
          <li> 
 
           <a href="#">Who We Are</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">What We Do</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#">Portfolio ￬</a> 
 
         <ul class="hidden"> 
 
          <li> 
 
           <a href="#">Photography</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">Web & User Interface Design</a> 
 
          </li> 
 
          <li> 
 
           <a href="#">Illustration</a> 
 
          </li> 
 
         </ul> 
 
        </li> 
 
        <li> 
 
         <a href="#">News</a> 
 
        </li> 
 
        <li> 
 
         <a href="#">Contact</a> 
 
        </li> 
 
       </ul>

Answer 2

당신이 겪고있는 문제는 나열된 항목 중 하나의 결과입니다

<li><a href="#">Web & User Interface Design</a></li>

그냥 사용자 인터페이스 디자인을 삭감 시도는하지 않습니다 너가 연장에서 nav 막대기를 그만두는 경우에, 텍스트가 잘릴 것입니다만큼, 너의 의지? 원하는 결과가 약간 분명하지 않습니다. 그리고 귀하의 질문에 대한 개선을 해주셔서 감사합니다.