Как добавить подменю в меню slidedown

Question

Скрипки: http://jsfiddle.net/yjp2sner/

HTML:

<div class="dropdown"> 
    <a href="javascript:void(0);" class="userLink"><span id="CPHB_lblUser">ADMIN</span></a> 
    <div class="dvHolder"> 
    <ul id="ulDrop"> 
     <li><a class="ondrop reloadLink" href="Default.aspx" target="_self" title="Reload Page">Reload Page</a></li> 
     <li id="liLogout" onclick="logout();"> 
     <span class="ondrop logoutLink">Logout</span> 
     </li> 
     <li><a class="ondrop viewfolderLink" href="javascript:void(0);" title="Reports">Reports</a> 
     </li> 
    </ul> 
    </div> 
</div> 

То, что я ищу, чтобы сделать, это добавить подменю с тем же стилем для li. Так, например, для пункта Report списка, я хочу иметь вложенное меню, выдвигается слева, что-то вроде этого:

Как я могу изменить мой HTML/CSS, чтобы позволить этому случиться ,

Answer 1

$(document).ready(function(){ 
 
$(".top-level-menu li,.second-level-menu li").hover(
 
\t function(){ 
 
\t \t $(this).children('ul').hide(); 
 
\t \t $(this).children('ul').slideDown('fast'); 
 
\t }, 
 
\t function() { 
 
\t \t $('ul', this).slideUp('fast');    
 
\t }); 
 
});

.third-level-menu 
 
    { 
 
     position: absolute; 
 
     top: 0; 
 
     right: -150px; 
 
     width: 150px; 
 
     list-style: none; 
 
     padding: 0; 
 
     margin: 0; 
 
     display: none; 
 
    } 
 

 
    .third-level-menu > li 
 
    { 
 
     height: 30px; 
 
     background: #999999; 
 
    } 
 
    .third-level-menu > li:hover { background: #CCCCCC; } 
 

 
    .second-level-menu 
 
    { 
 
     position: absolute; 
 
     top: 30px; 
 
     left: 0; 
 
     width: 150px; 
 
     list-style: none; 
 
     padding: 0; 
 
     margin: 0; 
 
     display: none; 
 
    } 
 

 
    .second-level-menu > li 
 
    { 
 
     position: relative; 
 
     height: 30px; 
 
     background: #999999; 
 
    } 
 
    .second-level-menu > li:hover { background: #CCCCCC; } 
 

 
    .top-level-menu 
 
    { 
 
     list-style: none; 
 
     padding: 0; 
 
     margin: 0; 
 
    } 
 

 
    .top-level-menu > li 
 
    { 
 
     position: relative; 
 
     float: left; 
 
     height: 30px; 
 
     width: 150px; 
 
     background: #999999; 
 
    } 
 
    .top-level-menu > li:hover { background: #CCCCCC; } 
 

 
    .top-level-menu li:hover > ul 
 
    { 
 
     /* On hover, display the next level's menu */ 
 
     display: inline; 
 
    } 
 

 

 
    /* Menu Link Styles */ 
 

 
    .top-level-menu a /* Apply to all links inside the multi-level menu */ 
 
    { 
 
     font: bold 14px Arial, Helvetica, sans-serif; 
 
     color: #FFFFFF; 
 
     text-decoration: none; 
 
     padding: 0 0 0 10px; 
 

 
     /* Make the link cover the entire list item-container */ 
 
     display: block; 
 
     line-height: 30px; 
 
    } 
 
    .top-level-menu a:hover { color: #000000; }

<ul class="top-level-menu"> 
 
    <li><a href="#">Home</a></li> 
 
    <li> 
 
     <a href="#">Offices</a> 
 
     <ul class="second-level-menu"> 
 
      <li><a href="#">Chicago</a></li> 
 
      <li><a href="#">Los Angeles</a></li> 
 
      <li> 
 
       <a href="#">New York</a> 
 
       <ul class="third-level-menu"> 
 
        <li><a href="#">Information</a></li> 
 
        <li><a href="#">Book a Meeting</a></li> 
 
        <li><a href="#">Testimonials</a></li> 
 
        <li><a href="#">Jobs</a></li> 
 
       </ul> 
 
      </li> 
 
      <li><a href="#">Seattle</a></li> 
 
     </ul> 
 
    </li> 
 
    <li><a href="#">Contact</a></li> 
 
</ul>

Answer 2

попробовать этот код jsfiddle

$('.sub-list').parent().click(function(){ 
 
    
 
    \t $('.sub-list').css("display", "block"); 
 
    }); 
 
$(".dropdown").hover(function() { 
 
    $(".dvHolder ul").slideToggle(); 
 
    
 
});

* { 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.dropdown { 
 
    position: relative; 
 
    height: 27px; 
 
    width: 230px; 
 
    background: #363d47; 
 
    border: 1px solid; 
 
    border-color: #272c33 #242930 #22272d; 
 
    border-radius: 3px; 
 
    display: inline-block; 
 
    vertical-align: baseline; 
 
    zoom: 1; 
 
    *display: inline; 
 
    *vertical-align: auto; 
 
    background-image: -webkit-linear-gradient(top, #4a5361, #363d47); 
 
    background-image: -moz-linear-gradient(top, #4a5361, #363d47); 
 
    background-image: -o-linear-gradient(top, #4a5361, #363d47); 
 
    background-image: linear-gradient(to bottom, #4a5361, #363d47); 
 
    -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 
 
    box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px 2px rgba(0, 0, 0, 0.15); 
 
} 
 

 
.dropdown a, 
 
.dropdown span { 
 
    font-size: 12px; 
 
    text-decoration: none; 
 
    text-shadow: 0 1px black; 
 
} 
 

 
.dropdown > a, 
 
.dropdown > span { 
 
    float: left; 
 
    position: relative; 
 
    height: 27px; 
 
    line-height: 26px; 
 
    padding: 0 25px; 
 
    color: #ecf0f1; 
 
    border-radius: 2px 0 0 2px; 
 
} 
 

 
.dropdown div.dvHolder { 
 
    float: right; 
 
    height: 27px; 
 
    width: 26px; 
 
    background: url("../theImages/icSettings.png") 9px 9px no-repeat; 
 
    border-left: 1px solid #292e36; 
 
    border-color: rgba(0, 0, 0, 0.4); 
 
    -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08); 
 
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.08); 
 
    cursor: pointer; 
 
} 
 

 
.dropdown div:hover { 
 
    -webkit-box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1); 
 
    box-shadow: inset 1px 0 rgba(255, 255, 255, 0.04), inset 26px 26px rgba(0, 0, 0, 0.1); 
 
} 
 

 

 
/*.dropdown div:hover ul 
 
\t \t { 
 
\t \t \t display: block; 
 
\t \t }*/ 
 

 
.dropdown ul { 
 
    display: none; 
 
    position: absolute; 
 
    top: 27px; 
 
    left: -1px; 
 
    right: -1px; 
 
    background: #272c33; 
 
    border: 1px solid #20242a; 
 
    border-radius: 0 0 3px 3px; 
 
    -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
 
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); 
 
} 
 

 
.dropdown ul li { 
 
    display: block; 
 
} 
 

 
.dropdown ul li:first-child { 
 
    height: 27px; 
 
    line-height: 26px; 
 
    color: #b2b8c4; 
 
} 
 

 
.dropdown ul li:nth-child(2) { 
 
    height: 27px; 
 
    line-height: 26px; 
 
} 
 

 
.dropdown ul li:last-child span { 
 
    border-radius: 0 0 3px 3px; 
 
} 
 

 
.dropdown ul .ondrop { 
 
    display: block; 
 
    line-height: 28px; 
 
    padding: 0 10px 1px; 
 
    color: #b2b8c4; 
 
    border-top: 1px solid transparent; 
 
} 
 

 
.dropdown ul .ondrop:hover { 
 
    color: white; 
 
    text-shadow: 0 1px rgba(0, 0, 0, 0.7); 
 
    border-color: #78aad5; 
 
    background: #426ebf; 
 
    background-image: -webkit-linear-gradient(top, #5e9ace, #416cb8); 
 
    background-image: -moz-linear-gradient(top, #5e9ace, #416cb8); 
 
    background-image: -o-linear-gradient(top, #5e9ace, #416cb8); 
 
    background-image: linear-gradient(to bottom, #5e9ace, #416cb8); 
 
} 
 

 
.dropdown ul li:nth-child(2):hover { 
 
    border-color: #78aad5; 
 
} 
 

 
.dropdown ul li:nth-child(3) { 
 
    
 
    position: relative; 
 
} 
 

 

 
/*.dvHolder ul li:nth-child(2) div:last-child 
 
\t \t { 
 
\t \t \t display: none; 
 
\t \t }*/ 
 

 
#ulDrop li:last-child, 
 
#ulDrop li:nth-child(3), 
 
#ulDrop li:nth-child(4), 
 
#ulDrop li:nth-child(5), 
 
#ulDrop li:nth-child(6), 
 
#ulDrop li:nth-child(7) { 
 
    background: url(../theImages/bordertop.png) repeat-x; 
 
    padding-top: 2px; 
 
} 
 

 
.sub-list{ 
 
    
 
    position: absolute; 
 
    right:-46px; 
 
    top:0px; 
 
    display: none; 
 
    background: #272C33 none repeat scroll 0% 0%; 
 
} 
 

 
.sub-list li{ 
 
    
 
    padding: 5px 10px; 
 
    color:#fff; 
 
}

<div class="dropdown"> 
 
    <a href="javascript:void(0);" class="userLink"><span id="CPHB_lblUser">ADMIN</span></a> 
 
    <div class="dvHolder"> 
 
    <ul id="ulDrop"> 
 
     <li><a class="ondrop reloadLink" href="Default.aspx" target="_self" title="Reload Page">Reload Page</a></li> 
 
     <li id="liLogout" onclick="logout();"> 
 
     <span class="ondrop logoutLink">Logout</span> 
 
     </li> 
 
     <li> 
 
     <a class="ondrop viewfolderLink" href="javascript:void(0);" title="Reports">Reports</a> 
 
     <ol class="sub-list"> 
 
      <li>text</li> 
 
      <li>text</li> 
 
      <li>text</li> 
 
     </ol> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Примечание: Я использовал <ol> вместо <ul>, потому что вы настраиваете некоторые стили для каждого ул внутри DIV dropdown.