推子子菜单进行进一步

我的子子菜单出现重叠子菜单这是很好的，但我想将其推出的权利只是多了一些，以便使子菜单文本没有被切断。

这里是发生了什么事的图片：

enter image description here

这是我的HTML和CSS标记：

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<title>List of Frequently Used Templates for Road Safety</title> 
<style type="text/css"> 
#navigation { 
    width: 150px; 
    font-size: 0.75em; 
} 
#navigation ul { 
    margin: 0px; 
    padding: 0px; 
} 

ul.top-level { 
    background: #666; 
} 

#navigation li { 
    list-style: none; 
} 
ul.top-level li { 
    border-bottom: #fff solid; 
    border-top: #fff solid; 
    border-width: 1px; 
} 

#navigation a { 
    color: #fff; 
    cursor: pointer; 
    display:block; 
    height:25px; 
    line-height: 25px; 
    text-indent: 10px;     
    text-decoration:none; 
    width:100%; 
} 
#navigation a:hover{ 
    text-decoration:underline; 
} 
#navigation li:hover { 
    background: #f90; 
    position: relative; 
} 
ul.sub-level { 
    display: none; 
} 
li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 75px; 
    top: 5px; 
} 
ul.sub-level li { 
    border: none; 
    float:left; 
    width:150px; 
} 

#navigation .sub-level { 
    background: #999; 
} 
#navigation .sub-level .sub-level { 
    background: #09C; 
} 

li:hover .sub-level .sub-level { 
    display:none; 
} 

.sub-level li:hover .sub-level { 
    display:block; 
} 
</style> 
</head> 
    <body> 
     <div id="navigation"> 
      <ul class="top-level"> 
       <li><a href="#">Home</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a> 
         </li> 
         <li> 
          <a href="#">Sub Menu Item 2</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
       <li><a href="#">About</a></li> 
       <li><a href="#">Contact</a></li> 
       <li> 
        <a href="#">FAQ</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a></li> 
         <li> 
          <a href="#">Sub Menu Item 3</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li> 
        <a href="#">News</a> 
        <ul class="sub-level"> 
         <li><a href="#">Sub Menu Item 1</a> 
          <ul class="sub-level"> 
           <li><a href="#">Sub Sub Menu Item 1</a></li> 
           <li><a href="#">Sub Sub Menu Item 2</a></li> 
           <li><a href="#">Sub Sub Menu Item 3</a></li> 
           <li><a href="#">Sub Sub Menu Item 4</a></li> 
          </ul> 
         </li> 
         <li><a href="#">Sub Menu Item 2</a></li> 
         <li><a href="#">Sub Menu Item 3</a></li> 
        </ul> 
       </li> 
      </ul> 
     </div> 
    </body> 
</html>

来源

2013-08-29 John Smith

调整你的代码匹配下面。工作示例：http://codepen.io/BJack/full/Cflem

您的< li>的宽度为150px，因此在绝对定位时将左侧属性偏移150px。

li:hover .sub-level { 
    background: #999; 
    border: #fff solid; 
    border-width: 1px; 
    display: block; 
    position: absolute; 
    left: 150px; 
    top: 0px; 
} 

.sub-level li:hover .sub-level { 
    display:block; 
    position: absolute; 
    left: 150px; 
}

来源

2013-08-29 17:48:28 BJack

干净的意思！谢谢！ –

任何时候，很高兴我能帮忙。我把顶部：0px;以便在不离开触发区域的情况下将光标导航到子菜单上更容易。 :) – BJack

你可以尝试添加该

li:hover .sub-level li:hover .sub-level { 
    left: 175px; 
}

来源

2013-08-29 17:38:22

推子子菜单进行进一步

回答

相关问题