jQuery « Как можно сделать вертикальное подменю всплывающим над основным меню?

Добрый вечер, как можно сделать вертикальное подменю всплывающим над основным меню? Смысл такой, вертикальное меню не должно изменять высоту (1111), подменю (2222) должно всплывать при навидение поверх меню (1111)

Cсылка на http://jsfiddle.net для примера

/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .html4strict.geshi_code {font-family:monospace;} .html4strict.geshi_code .imp {font-weight: bold; color: red;} .html4strict.geshi_code .kw2 {color: #000000; font-weight: bold;} .html4strict.geshi_code .kw3 {color: #000066;} .html4strict.geshi_code .es0 {color: #000099; font-weight: bold;} .html4strict.geshi_code .br0 {color: #66cc66;} .html4strict.geshi_code .sy0 {color: #66cc66;} .html4strict.geshi_code .st0 {color: #ff0000;} .html4strict.geshi_code .nu0 {color: #cc66cc;} .html4strict.geshi_code .sc-1 {color: #808080; font-style: italic;} .html4strict.geshi_code .sc0 {color: #00bbdd;} .html4strict.geshi_code .sc1 {color: #ddbb00;} .html4strict.geshi_code .sc2 {color: #009900;} .html4strict.geshi_code span.xtra { display:block; }
<div id="menu_left" class="grad">    
    <ul class="first_level">                
        <li class="item_menu"><span class="line_menu"></span><a href="#" class="f_level_link">1111111111</a>                        
            <ul class="second_level" style="">                                
                <li class="sub_item_menu"><a href="#">2222222</a></li>
                <li class="sub_item_menu"><a href="#">2222222</a></li>        
                <li class="sub_item_menu"><a href="#">2222222</a></li>            
            </ul>
        </li>  
        <li class="item_menu"><span class="line_menu"></span><a href="#" class="f_level_link">1111111111</a>                        
            <ul class="second_level" style="">                                
                <li class="sub_item_menu"><a href="#">2222222</a></li>
                <li class="sub_item_menu"><a href="#">2222222</a></li>        
                <li class="sub_item_menu"><a href="#">2222222</a></li>            
            </ul>
        </li>  
        <li class="item_menu"><span class="line_menu"></span><a href="#" class="f_level_link">1111111111</a>                        
            <ul class="second_level" style="">                                
                <li class="sub_item_menu"><a href="#">2222222</a></li>
                <li class="sub_item_menu"><a href="#">2222222</a></li>        
                <li class="sub_item_menu"><a href="#">2222222</a></li>            
            </ul>
        </li>  
    </ul>
</div>


/** * GeSHi (C) 2004 - 2007 Nigel McNie, 2007 - 2008 Benny Baumann * (http://qbnz.com/highlighter/ and http://geshi.org/) */ .css.geshi_code {font-family:monospace;} .css.geshi_code .imp {font-weight: bold; color: red;} .css.geshi_code .kw1 {color: #000000; font-weight: bold;} .css.geshi_code .kw2 {color: #993333;} .css.geshi_code .co1 {color: #a1a100;} .css.geshi_code .co2 {color: #ff0000; font-style: italic;} .css.geshi_code .coMULTI {color: #808080; font-style: italic;} .css.geshi_code .es0 {color: #000099; font-weight: bold;} .css.geshi_code .br0 {color: #00AA00;} .css.geshi_code .sy0 {color: #00AA00;} .css.geshi_code .st0 {color: #ff0000;} .css.geshi_code .nu0 {color: #cc66cc;} .css.geshi_code .re0 {color: #cc00cc;} .css.geshi_code .re1 {color: #6666ff;} .css.geshi_code .re2 {color: #3333ff;} .css.geshi_code .re3 {color: #933;} .css.geshi_code span.xtra { display:block; }
#menu_left {width:250px; display: block; float: left; position: relative;  margin-bottom: 10px;  padding: 5px 0;}
#menu_left li a {text-decoration:none; text-transform: uppercase; position: relative;}
#menu_left ul li a :hover {font-color:#007080;}
#menu_left .item_menu:first-child .line_menu{border-top:none;}
#menu_left .item_menu>a {font: 15px  Arial, Verdana, sans-serif; color:black;font-weight: 700; padding-left: 24px; line-height:40px; display: block;zoom:1;}  
#menu_left .item_menu a:hover{color: #f9648e;}
#menu_left .second_level { margin: 0; padding-left: 23px;background: #F8F8F8; background: -webkit-gradient(linear, 0 0, 0 bottom, from(#F8F8F8), to(#e6e6e6)); background: -webkit-linear-gradient(#F8F8F8, #e6e6e6); background: -moz-linear-gradient(#F8F8F8, #e6e6e6); background: -ms-linear-gradient(#F8F8F8, #e6e6e6); background: -o-linear-gradient(#F8F8F8, #e6e6e6); background: linear-gradient(#F8F8F8, #e6e6e6); -pie-background: linear-gradient(#F8F8F8, #e6e6e6);}
#menu_left .sub_item_menu  { border: none;text-indent: -0.1em; *text-indent: -0.1em;padding: 3px 10px 3px 12px;position: relative;}
#menu_left .sub_item_menu a { color: #000; font-size:13px;text-transform: none; text-decoration: none;border-bottom: 1px solid #f9648e;
line-height: 19px;}
#menu_left .sub_item_menu a:hover {font-size:13px; border-bottom: none;}

 /*#menu_left .sub_item_menu {display: none;}   подменю  */​
0
css jquery

1 ответов

.item_menu ul {display:none;}
.item_menu:hover{position:relative;}
.item_menu:hover ul{position:absolute;left:0;top:0;display:block;}

ну а далее как угодно дорабатываете. можно еще z-index указать, чтобы всплывающее текущее (1111) меню не перекрывало всплывающее (2222)
2

Вот еще отличное выпадающее вертикальное меню с бесконечным уровнем вложенности http://masscode.ru/index.php/k2/item/35-limenuvert

1