מה המצב
אני כבר כל הערב מנסה לעשות משהו פשוט ולא הולך לי
אני בנה כרגע את האלמנטים לייצירת מוצר

מה שאני עובד עליו כרגע זה המחלקות של המוצרים

למחלקות יש שלוש רמות

יש לי כפתור ראשי שמתי שהעכבר עובר עליו נגלל למטה הרמה הראשונה
ומתי שהעכבר עולה על הרמה הראשונה אז הרמה השניה נפתחת בצד
כנ"ל בשניה ובשלישית.

הבעיה שלי היא שמתי שהאלמנטים absolute זה לא עובד לי

לפי מה שהבנתי jquery לא יודע לעבוד עם אלמנטים אבסולוטים עם position אז ניסיתי את זה

תודה

זה הקוד

קוד PHP:

 <link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>css/cms/general/menu/verticalMenu.css" media="screen"  />
<script type="text/javascript" src="<?php echo base_url(); ?>js/cms/general/menu/vrticalMenu.js"></script>
<div class="vertical_mainMenu select_line pointer">
    <?php echo $this->lang->line('main_menu'); ?>
    <input type="hidden" name="selected_id" value="0" />
    <input type="hidden" name="selected_parents" value="0" />
</div>
<div class="verticalMenu">
    <?php if(isset($categories) && !empty($categories)): ?>
        <?php foreach ($categories[0] as $menu): ?>
            <div class="verticalMenu_level_1 select_line pointer">
                <?php echo $menu['title']; ?>
                <input type="hidden" name="selected_id" value="<?php echo $menu['id']; ?>" />
                <input type="hidden" name="selected_parents" value="<?php echo $menu['all_parents'].' '.$menu['id']; ?>" />
            </div>
            <div class="vertical_subMenuBox">
                <?php if(isset($categories[$menu['id']]) && !empty($categories[$menu['id']])): ?>
                    <?php foreach ($categories[$menu['id']] as $subMenu): ?>
                        <div class="verticalMenu_level_2 select_line pointer">
                            <?php echo $subMenu['title']; ?>
                            <input type="hidden" name="selected_id" value="<?php echo $subMenu['id']; ?>" />
                            <input type="hidden" name="selected_parents" value="<?php echo $subMenu['all_parents'].' '.$subMenu['id']; ?>" />
                        </div>
                        <div class="vertical_subLastMenuBox">
                            <?php if(isset($categories[$subMenu['id']]) && !empty($categories[$subMenu['id']])): ?>
                                <?php foreach ($categories[$subMenu['id']] as $subLastMenu): ?>
                                    <div class="verticalMenu_level_3 select_line pointer">
                                        <?php echo $subLastMenu['title']; ?>
                                        <input type="hidden" name="selected_id" value="<?php echo $subLastMenu['id']; ?>" />
                                        <input type="hidden" name="selected_parents" value="<?php echo $subLastMenu['all_parents'].' '.$subLastMenu['id']; ?>" />
                                    </div>
                                <?php endforeach; ?>
                            <?php endif; ?>
                        </div>
                    <?php endforeach; ?>
                <?php endif; ?>
            </div>
        <?php endforeach; ?>
    <?php endif; ?>
</div> 


CSS

קוד PHP:

 .vertical_mainMenu {
    border: 1px solid gray;
    padding: 5px;
    background-color: white;
    width: 150px;
    min-height: 10px;
    overflow-y: auto;
    overflow-x: hidden;
    margin-bottom: 5px;
}
.verticalMenu {
    position: absolute;
    width: 165px;
    min-height: 10px;
    overflow-x: hidden;
    overflow-y: auto;
    display: none;
    z-index: 101;
    background-color: blue;
}
.verticalMenu_level_1 {
    width: 150px;
    min-height: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 5px;
    background-color: white;
}
.verticalMenu_level_2 {
    width: 150px;
    min-height: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 5px;
    background-color: white;
}
.verticalMenu_level_3 {
    width: 150px;
    min-height: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    border: 1px solid gray;
    padding: 5px;
    margin-bottom: 5px;
    background-color: white;
}
.vertical_subMenuBox {
    width: 165px;
    overflow-x: hidden;
    position: absolute;
    min-height: 10px;
    overflow-y: auto;
    z-index: 102;
    display: none;
    background-color: yellow;
}
.vertical_subLastMenuBox {
    background-color: red;
    position: absolute;
    min-width: 165px;
    overflow-x: hidden;
    min-height: 10px;
    overflow-y: auto;
    z-index: 103;
    display: none;
} 


JS

קוד PHP:

 $(document).ready(function(){
    $('.vertical_mainMenu').hover(function(){
        $(this).next().show();
    }, function(){});
    $('.verticalMenu').hover(function(){}, function(){
        $('.verticalMenu').hide();
        $('.vertical_subMenuBox').hide();
        $('.vertical_subLastMenuBox').hide();
    });
    $('.select_line').click(function(){
        var id = $(this).find('input[name=selected_id]:hidden').val();
        var all_parents = $(this).find('input[name=selected_parents]:hidden').val();
        $('#parentCat').val(id);
        $('#AllParentCat').val(all_parents);alert(all_pare  nts);
    });
    $('.verticalMenu_level_1').hover(function(){
        var dir = $('body').find('input[name=langDir]:hidden').val();
        var pos = $(this).position();
        var height = $(this).height();
        var width = $(this).width();
        var el_absulote = getOffsetX($(this));
        var el_left = 0;
        var element = $(this).next();
        element.show();
        switch(dir)
        {
            case 'rtl':
                el_left = el_absulote.left - width - 17;
                break;
            default:
                el_left = el_absulote.left + width + 17;                
            break;
        }
        var left = el_left;
        var top = pos.top;
        element.offset({'top':top, 'left':left});
    }, function(){});
    $('.verticalMenu_level_2').hover(function(){
        var dir = $('body').find('input[name=langDir]:hidden').val();
        var pos = $(this).position();
        var height = $(this).height();
        var width = $(this).width();
        var el_absulote = getOffsetX($(this));
        var el_left = 0;
        var element = $(this).next();
        element.show();
        switch(dir)
        {
            case 'rtl':
                el_left = el_absulote.left - width - 17;
                break;
            default:
                el_left = el_absulote.left + width + 17;                
            break;
        }
        var left = el_left;
        var top = pos.top;
        element.offset({'top':top, 'left':left});
    }, function(){});
});
function getOffsetX (obj) 
{
    while (obj.offset().left == 0) {
        obj = obj.parent();
    }
    return obj.offset();
} 


אפשר לסגור יש לי טעות