如何阻止主菜單在光標懸停時延長

Question

我正在玩這個導航欄，並且無論何時您將鼠標懸停在其上方，「關於和投資組合」菜單都會不斷向前延伸。 我想阻止它擴展。 您可以從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>

嘗試砍倒它只是用戶界面設計，它不會擴展儘可能多，如果您防止導航欄擴展，那麼文本將被截斷，那是您的意圖嗎？你期望的結果有點不清楚。並且，感謝您對您的問題進行改進