cssを使用してサブメニューを作成するにはどうすればよいですか？

Question

私はこのようなサブsubmenuをしよう：sub-menu上にマウスホバーは、それが ノートを表示しなければならないとき sub menu

：私はあなたができるスタイルシートで

.navUlLis { 
 
    position: relative; 
 
    text-align: right; 
 
    font-size: 15px; 
 
    list-style: none; 
 
} 
 
.navUl ul { 
 
    position: absolute; 
 
    top: 0; 
 
    float: left; 
 
    display: none; 
 
    right: 100%; 
 
    width: 100%; 
 
    background-color: white; 
 
} 
 
.ulhover li:hover ul { 
 
    display: block; 
 
    text-align: right; 
 
    font-size: 15px; 
 
    list-style: none; 
 
} 
 
.lishover :hover { 
 
    text-decoration: underline; 
 
} 
 
.navlis { 
 
    text-decoration: none; 
 
    color: navy; 
 
    font-weight: bold; 
 
}

<li class="list-group-item lishover"><a href="#">Orginal</a> 
 
    <span style="float:left; color:gray;" class="glyphicon glyphicon-chevron-left"></span> 
 
    <ul class=".ul-list navUlLis"> 
 

 
    <li class="list-group-item lishover"><a href="#">sub menu item </a> 
 
    </li> 
 
    <li class="list-group-item lishover"><a href="#">sub menu item </a> 
 
    </li> 
 
    <li class="list-group-item lishover"><a href="#">sub menu item </a> 
 
    </li> 
 
    </ul> 
 
</li>

をブートストラップ使用していますウェブサイト：Link

Answer 1

私はそれがあなたの問題を解決すると思うこれを試してください。

* { margin: 0; padding: 0; } 
 
body { background: #f1f1f1; margin: 50px; } 
 

 
#nav { margin: 0; padding: 0; float: left; } 
 
#nav li { list-style: none; background: #fff; width: 250px; border-bottom: 1px solid #666; } 
 
#nav li a { display: block; padding: 8px; border-left: 4px solid #444; text-decoration: none; box-shadow: 2px 2px 5px #ccc; color: #555; } 
 
#nav li a:hover { border-left: 4px solid #069; background: #f8f8f8; } 
 
#nav li ul { display: none; } 
 
#nav li:hover ul { display: block; } 
 
#nav li:hover ul li { background: #333; } 
 
#nav li:hover ul li a { color: #ccc; } 
 
#nav li:hover ul li a:hover { background: #222; border-left: 4px solid #900; }

\t <ul id="nav" > 
 
\t 
 
\t \t <li><a href="#">Home</a></li> 
 
\t \t <li><a href="#">Sobre Nós</a></li> 
 
\t \t <li><a href="#">Portfólio</a> 
 
\t \t 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">sub - 1</a></li> 
 
\t \t \t \t <li><a href="#">sub - 2</a></li> 
 
\t \t \t \t <li><a href="#">sub - 3</a></li> 
 
\t \t \t </ul> 
 
\t \t 
 
\t \t </li> 
 
\t \t <li><a href="#">Serviços</a> 
 
\t \t 
 
\t \t \t <ul> 
 
\t \t \t \t <li><a href="#">sub - 1</a></li> 
 
\t \t \t \t <li><a href="#">sub - 2</a></li> 
 
\t \t \t \t <li><a href="#">sub - 3</a></li> 
 
\t \t \t </ul> 
 
\t \t 
 
\t \t </li> 
 
\t \t <li><a href="#">Blog</a></li> 
 
\t \t <li><a href="#">Contato</a></li> 
 
\t 
 
\t </ul>