當鼠標懸停在菜單上

將子菜單項與子菜單項一起展開...我在菜單欄中保留了我的菜單欄...當我在菜單項上滾動時，列表出現..但我想整個div移動與子菜單列表擴展沿....請任何一個可以幫助... 這是我的完整代碼..當鼠標懸停在菜單上

*<doctype! html> 
<html> 
<head> 
<style> 
nav ul ul { 
    display: none; 
} 
    nav ul li:hover > ul { 
     display: block; 
    } 

    nav ul { 
    background: #efefef; 
    background: linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%); 
    background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%); 
    box-shadow: 0px 0px 9px rgba(0,0,0,0.15); 
    padding: 0 20px; 
    border-radius: 10px; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
} 
    nav ul:after { 
     content: ""; clear: both; display: block; 
    } 
    nav ul li { 
    float: left; 
} 
    nav ul li:hover { 
     background: #4b545f; 

    } 
     nav ul li:hover a { 
      color: #fff; 
     } 

    nav ul li a { 
     display: block; padding: 25px 40px; 
     color: #757575; text-decoration: none; 
    } 
    nav ul ul { 
    background: #5f6975; border-radius: 0px; padding: 0; 
    position: absolute; top: 100%; 
} 
    nav ul ul li { 
     float: none; 
     border-top: 1px solid #6b727c; 
     border-bottom: 1px solid #575f6a; 
     position: relative; 
    } 
     nav ul ul li a { 
      padding: 15px 40px; 
      color: #fff; 
     } 
      nav ul ul li a:hover { 
       background: #4b545f; 
      } 
</style> 
</head> 
<body> 
<div style="width:100%;background:blue;"> 
<nav> 
    <ul> 
     <li><a href="#">Home</a></li> 
     <li><a href="#">Tutorials</a> 
      <ul> 
       <li><a href="#">Photoshop</a></li> 
       <li><a href="#">Illustrator</a></li> 
       <li><a href="#">Web Design</a> 
        <ul> 
         <li><a href="#">HTML</a></li> 
         <li><a href="#">CSS</a></li> 
        </ul> 
       </li> 
      </ul> 
     </li> 
     <li><a href="#">Articles</a> 
      <ul> 
       <li><a href="#">Web Design</a></li> 
       <li><a href="#">User Experience</a></li> 
      </ul> 
     </li> 
     <li><a href="#">Inspiration</a></li> 
    </ul> 
</nav> 
</div> 
</body> 
</html>*

來源

2013-02-13 Vijay Rahul

你是什麼意思，你想div與子菜單擴大？ – iConnor 2013-02-13 12:21:31

我覺得你可以確保子菜單的長度是與主菜單標籤相同，方法是在主菜單標籤上強制固定寬度，如下所示：

nav ul li { width: 170px; }

我已創建一個live snippet here。但是，請注意，這樣做會導致較長的標籤被捲入第二行。

來源

2013-02-13 15:02:44 Angela

當鼠標懸停在菜單上

回答

相關問題