<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> #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;}​​ подменю */​​​​​​​

Good evening, how can you make a vertical submenu pop up above the main menu? The point is that the vertical menu should not change the height (1111), the submenu (2222) should pop up when you navigate over the menu (1111).

    2 answers 2

    If you can do only CSS-means does not work, then you can in this way

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