I have created a css only vertical flyout menu. Can be seen at http://test.benwebdeveloper.com/dashboard.php

The main issue is that there is a small gap between the parent menu item and its flyout menu, therefore when you move slowly from the parent item to the flyout menu it disappears, can anybody help me?

CSS Code:

/*
    Menu Layout
*/
#menu {
    height: 100%;
    width: 175px;
    margin:15px 5px 15px -160px;
    z-index: 9999;
}

#menu a {
    color: #777777;
    width: 100%;
    display: block;
}

#menu a img {
    padding: 6px 0;
    float: right;
}

#menu .menu-holder, #menu .menu-submenu {
    background-color: #FFFFFF;
    border: 1px solid #AAAAAA;
}

#menu .menu-holder-inner {
    padding: 5px;    
}

#menu .menu-title {
    padding: 5px;
    display: block;
    background-color: #F5F5F5;
    border-bottom: 1px solid #AAAAAA;
    /* background-color: #F5F5F5;
    border: 1px solid #E3E3E3; */
}
#menu li ul li {
    padding: 1px 5px 3px 12px;
    border: 1px solid #FFFFFF;
    display: block;
}

#menu .menu-has-submenu {
    background: #FFFFFF url(../../images/gray-arrow-right.png) no-repeat scroll 145px center;
}
#menu li ul li:hover {
    background-color: #F5F5F5;
    border: 1px solid #E3E3E3;
}

#menu li ul li:hover .menu-submenu {
    display: block;
    margin-left: 155px;    
    margin-top: -20px;
}

#menu .menu-submenu {
    width: 175px;
    position: absolute;
    display: none;
}

HTML Code:

                <ul id="menu">
                
                    <li class="menu-holder">
                    
                    <div class="menu-title">Navigation</div>
                    
                        <div class="menu-holder-inner"><!-- Start Menu Inner -->

                            <ul>
                            
                                <li class="menu-has-submenu">
                                
                                    <a href="../../index.php" title="Home">Home</a>
                                    
                                    <div class="menu-submenu">
                                    
                                        <div class="menu-holder-inner">
                                    
                                            <ul>
                                            
                                                <li>
                                                
                                                <a href="../../index.php" title="Home">Home</a>
                                                
                                                </li>
                                            
                                            </ul>
                                            
                                        </div>
                                    
                                    </div>
                                    
                                </li>
    
                                <li class="menu-has-submenu">
                                
                                    <a href="../../index.php" class="menu-submenu-link" title="Home">Home</a>
                                    
                                    <div class="menu-submenu">
                                    
                                        <div class="menu-holder-inner">
                                    
                                            <ul>
                                            
                                                <li>
                                                
                                                <a href="../../index.php" title="Home">Home</a>
                                                
                                                </li>
                                            
                                            </ul>
                                            
                                        </div>
                                    
                                    </div>
                                    
                                </li>
                                
                            </ul>
                            
                        </div><!-- End Menu Inner -->
                        
                    </li>
            
                </ul>

Originally Posted by evans123

I have created a css only vertical flyout menu. Can be seen at http://test.benwebdeveloper.com/dashbaord.php
[/HTML]

link is not working for me

Fixed now, mispelt it sorry.

here is ur solution

#menu li ul li:hover .menu-submenu {
display: block;
margin-left: 155px;
margin-top: -20px;
}

decrease the margin-left:155px by 2px that is 153px

Theres still a tiny gap and the flyout menu is now overlapping the main navigation box. I want the flyout to be inline with the main navigation box.

In css

#menu a {
color: #777777;
width: 100%;
display: block;
}

change the width 100% to width:160px

it will solve ur prob this time i have checked it

Thanks for helping, Its solved now.

I think that's the best its going to get, if u hover over the bit inbetween it still shows the menu when it shouldnt!

Originally Posted by evans123

Thanks for helping, Its solved now.

I think that's the best its going to get, if u hover over the bit inbetween it still shows the menu when it shouldnt!

I suggest you to change the width from 160px to 154.8px
whatever below this will result in same old problem.

Ok thanks.

There is another helping link of http://www.cssplay.co.uk/menus/flyoutt.html for these kind of problems. Just check out yourself and share your review.