delete

by Vladislav Altyncev

HTML

<div class="menu">
   <ul>
       <li><a href="#" class="active_page">Первый пункт</a> <span>+</span>
           <div>text</div></li>
   <li><a href="#">Второй пункт</a></li>
   <li><a href="#">Третий пункт</a></li>
   <li><a href="#">Четвертый пункт</a></li>
   </ul>
   </div>

CSS

.menu ul {
   margin: 0;
   padding: 0;
   width:133px;
   list-style-type: none;
}

.menu ul li a {
   text-decoration: none;
   color: #A08A50;
   padding: 3px 5px;
   background-color: white;
   display:block;
}

.menu ul li a:visited {
   color: #A08A50;
}

.menu ul li a:hover, .menu ul li .current {
   color: #A08A50;
   background-color: #E3DCCC;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
.menu ul li .active_page {
   background-color: #E3DCCC;
   -moz-border-radius: 3px;
   border-radius: 3px;
}
.menu ul li {position: relative;}
.menu ul li > span {
    display: inline-block;
    position: absolute;
    right: 0;
    top: 0;
    background: #000;
    color: #fff;
    border-radius: 3px;
    padding: 0 5px;
    /*display: none;*/
}
.menu ul li > div {
    display: none;
    position: absolute;
    top: 10px;
    left: 100%;
    padding: 20px;
    background: #aaa;
}
.menu ul li:hover > span {
    display: inline-block;
}
.menu ul li > div.active {
    display: block;
}

JavaScript

$(".menu ul li > span").click(function(e) {
    $(".menu ul li > div").addClass("active");
   e.preventDefault();
});