Создание подменю внутри подменю css

Question

Я создаю навигацию с подменю внутри подменю, но не работает должным образом. Я уже пробовал образцы из Интернета, но когда я его реализую. Я сталкиваюсь с некоторыми проблемами. Я не могу правильно настроить подменю. Я новичок в этом, и надеюсь, вы сможете мне помочь в этом.

#cssmenu { 
 
    font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, Sans-Serif; 
 
    font-size: 15px; 
 
    line-height: 30px; 
 
    text-align: left; 
 
    height:40px; 
 
    margin-left:100px; 
 
    margin-top:10px; 
 
} 
 
#cssmenu > ul { 
 
    width: auto; 
 
    list-style-type: none; 
 
    padding: 0; 
 
    margin: 0; 
 
    border: 1px solid #ece6e8; 
 
    border-bottom: 3px solid #d9ced2; 
 
    -webkit-border-radius: 10px; 
 
    -moz-border-radius: 10px; 
 
    -o-border-radius: 10px; 
 
    width:450px; 
 
    margin-left:930px; 
 
} 
 
#cssmenu > ul li#responsive-tab { 
 
    display: none; 
 
} 
 
#cssmenu > ul li { 
 
    display: inline-block; 
 
    *display: inline; 
 
    zoom: 1; 
 
} 
 
#cssmenu > ul li.right { 
 
    float: right; 
 
} 
 
#cssmenu > ul li.has-sub { 
 
    position: relative; 
 
} 
 
#cssmenu > ul li.has-sub:hover ul { 
 
    display: block; 
 
} 
 
/*border color*/ 
 
#cssmenu > ul li.has-sub ul { 
 
    display: none; 
 
    width: 250px; 
 
    position: absolute; 
 
    margin: 0; 
 
    padding: 0; 
 
    list-style-type: none; 
 
    background: #ffffff; 
 
    border: 1px solid #ece6e8; 
 
    border-bottom: 1px solid #d9ced2; 
 
    border-top: 0 none; 
 
} 
 
#cssmenu > ul li.has-sub ul li { 
 
    display: block; 
 
} 
 

 
#cssmenu > ul li.has-sub > a { 
 
    background-image: url('images/caret.png'); 
 
    background-repeat: no-repeat; 
 
    background-position: 90% -95%; 
 
} 
 
#cssmenu > ul li.has-sub > a.active, 
 
#cssmenu > ul li.has-sub > a:hover { 
 
    background: #d80041 url('images/caret.png') no-repeat; 
 
    background-position: 90% 195%; 
 
} 
 
#cssmenu > ul li a { 
 
    display: block; 
 
    padding: 12px 24px 11px 24px; 
 
    text-decoration: none; 
 
    color: #747474; 
 
    text-shadow: 0px 1px 0px #fff; 
 
    background: #8f1941; 
 
} 
 

 
#cssmenu > ul li a.active, 
 
#cssmenu > ul li a:hover { 
 
    background: #d80041; 
 
    color: #fff; 
 
    text-shadow: 0px 1px 0px #000; 
 
}

<div id='cssmenu'> 
 
    <ul> 
 
     <li class='has-sub'> 
 
      <a href="#xl_xr_page_profile" target="_self" onclick="return(xr_nn());"><span>profile</span></a> 
 
      <ul> 
 
       <li><a href="#xl_xr_page_departments" onclick="return(xr_nn());"><span>divisions</span></a></li> 
 
       <ul> 
 
        <li><a href='xl_xr_page_admin%20&amp;%20hr'><span>admin & hr</span></a></li> 
 
        <li><a href='#xl_xr_page_finance'><span>finance</span></a></li> 
 
        <li><a href='#xl_xr_page_sales%20&amp;%20marketing'><span>sales and marketing</span></a></li> 
 
        <li><a href='#xl_xr_page_i.t.'><span>i.t.</span></a></li> 
 
        <li><a href='#xl_xr_page_operations'><span>operations</span></a></li> 
 
        <li><a href='#xl_xr_page_research%20&amp;%20development'><span>research & development</span></a></li> 
 
        <li><a href='#xl_xr_page_creative%20&amp;%20technical'><span>creative & technical</span></a></li> 
 
        <li><a href='#xl_xr_page_project%20management'><span>project management</span></a></li> 
 
        <li><a href='#xl_xr_page_production'><span>production</span></a></li> 
 
        <li><a href='#xl_xr_page_logistic%20&amp;%20installation'><span>logistic & installation</span></a></li> 
 
       </ul> 
 
       <li><a href="#xl_xr_page_facility" onclick="return(xr_nn());"><span>facility</span></a></li> 
 
       <li><a href="#xl_xr_page_partners" onclick="return(xr_nn());"><span>partners</span></a></li> 
 
       <li><a href="#xl_xr_page_clients" onclick="return(xr_nn());"><span>clients</span></a></li> 
 
      </ul> 
 
     </li> 
 
     <li class='has-sub'> 
 
      <a href="#xl_xr_page_business%20units" onclick="return(xr_nn());"><span>business units</span></a> 
 
      <ul> 
 
       <li><a href="#xl_xr_page_signage%20&amp;%20display" onclick="return(xr_nn());"><span>signage & displays</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>traffic signs</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>large format digital printing</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>architectural detailing & fit-outs</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>awards & gifts</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>luxury & hospitality accessories</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>engraving & cutting services</span></a></li> 
 
       <li><a href="#" onclick="return(xr_nn());"><span>electroplating services</span></a></li> 
 
      </ul> 
 
     </li> 
 
     <li class='active' style="position: relative"><a href="#xl_xr_page_news" onclick="return(xr_nn());"><span>news</span></a></li> 
 
     <li class='last' style="position: relative"><a href="#xl_xr_page_contact%20us" onclick="return(xr_nn());"><span>contacts</span></a></li> 
 
    </ul> 
 
</div> 

мне действительно нужна помощь. Благодаря!

Answer 1

Вы можете ознакомиться по следующей ссылке.

Fiddle

#nav { 
width:800px; 
margin:30px 50px;; 
padding: 0; 
float:left; 
} 
#nav li { 
list-style: none; 
float: left; 
padding:0 10px; 
} 
//daf adf 
/*--temp--*/ 
#nav ul ul li { 
clear:left; 
} 
#nav ul ul { 
position:absolute; 
left:14em; 
top:0; 
} 
#nav ul ul li a { 
display:block; 
padding: 3px 15px; 
color: #242424; 
text-decoration: none; 
font-size:13px; 
font-family:"Lato" !important; 
} 
/*--end temp--*/ 
#nav li a { 
display: block; 
padding: 3px 15px; 
color: #242424; 
text-decoration: none; 
font-size:13px; 
font-family:"Lato" !important; 
} 
#nav a:hover { 
color:#367FB3; 
} 
#nav a:active { 
color:#367FB3; 
} 
#nav li ul { 
display: none; 
width: 14em; /* Width to help Opera out */ 
background-color:transparent; 
z-index:666; 
} 
#nav li:hover ul, #nav li.hover ul { 
display: block; 
position: absolute; 
margin:0px -10px; 
padding:0px; 
} 
#nav li:hover ul ul { 
    display:none; 
} 
#nav li ul li:hover ul { 
    display:block 
} 
#nav li:hover li, #nav li.hover li { 
float: none; 
line-height:30px; 
} 
#nav li:hover li a, #nav li.hover li a { 
background-color:#367FB3; 
color:#fff; 
font-size:13px; 
font-family:"Lato" !important; 
} 
#nav li li a:hover { 
background-color:#52baff; 
color:#fff; 
}