推子子菜單進行進一步

我的子子菜單出現重疊子菜單這是很好的，但我想將其推出的權利只是多了一些，以便使子菜單文本沒有被切斷。

這裏是發生了什麼事的圖片：

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

推子子菜單進行進一步

回答

相關問題