2013-02-13 200 views
0

将子菜单项与子菜单项一起展开...我在菜单栏中保留了我的菜单栏...当我在菜单项上滚动时,列表出现..但我想整个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>* 
+0

你是什么意思,你想div与子菜单扩大? – iConnor 2013-02-13 12:21:31

回答

0

我觉得你可以确保子菜单的长度是与主菜单标签相同,方法是在主菜单标签上强制固定宽度,如下所示:

nav ul li { width: 170px; } 

我已创建一个live snippet here。但是,请注意,这样做会导致较长的标签被卷入第二行。