Published on: 03 August, 2013

How to create vertical flyout menu using CSS

Posted by andy | 58375 views 13 likes 7 favourites 28 comments
Tumblr Digg Google Plus

This tutorial will show you how you can create your web design menu in css vertical layout step by step. See the demo below:

Firstly create a html file named it css_flyoutverticalmenu.html and copy the following code.

<link href="css_flyoutverticalmenu.css" type="text/css" rel="Stylesheet" />
<div id="menuwrapper">
        <li><a href="#">Home</a></li>
        <li><a href="#">Products</a>
                <li><a href="#">Product 1</a>
                        <li><a href="#">Sub Product 1</a></li>
                        <li><a href="#">Sub Product 2</a></li>
                        <li><a href="#">Sub Product 3</a></li>
                <li><a href="#">Product 2</a></li>
                <li><a href="#">Product 3</a></li>
        <li><a href="#">About Us</a>
                <li><a href="#">Faqs</a></li>
                <li><a href="#">Contact Us</a></li>
                <li><a href="#">Where are we?</a></li>
        <li><a href="#">Help</a>

Second step is to create a css file and named it as css_flyoutverticalmenu.css, please place this file on the same folder of the html file you created above.

/* Define the body style */
body {

/* We remove the margin, padding, and list style of UL and LI components */
#menuwrapper ul, #menuwrapper ul li{

/* We apply background color and border bottom white and width to 150px */
#menuwrapper ul li{
    border-bottom:solid 1px white;

/* We apply the background hover color when user hover the mouse over of the li component */
#menuwrapper ul li:hover{

/* We apply the link style */
#menuwrapper ul li a{
    padding:5px 15px;

/* We make the position to absolute for flyout menu and hidden the ul until the user hover the parent li item */
#menuwrapper ul li ul{

/* When user has hovered the li item, we show the ul list by applying display:block, note: 150px is the individual menu width.  */
#menuwrapper ul li:hover ul{

/* we apply different background color to 2nd level menu items*/
#menuwrapper ul li ul li{

/* We change the background color for the level 2 submenu when hovering the menu */
#menuwrapper ul li:hover ul li:hover{

/* We style the color of level 2 links */
#menuwrapper ul li ul li a{

/**** THIRD LEVEL MENU ****/
/* We need to hide the 3rd menu, when hovering the first level menu */
#menuwrapper ul li:hover ul li ul{

/* We show the third level menu only when they hover the second level menu parent */
#menuwrapper ul li:hover ul li:hover ul{

/* We change the background color for the level 3 submenu*/
#menuwrapper ul li:hover ul li:hover ul li{

/* We change the background color for the level 3 submenu when hovering the menu */

#menuwrapper ul li:hover ul li:hover ul li:hover{

/* We change the level 3 link color */
#menuwrapper ul li:hover ul li:hover ul li a{

/* Clear float */

Issue for Internet Explorer under version 9

If you are using IE under version 9, it might not work for you because the browser doesnt support the hover function in LI list. I have included a javascript example in the demo file, so you can check it out how it works in Internet Explorer.

Download Demo Files

Download Flyout Vertical Menu Files

We will create more free navigation menu design for you to use. You can downloads free of navigation menu templates on this link.

Thanks to George that had contribute a demo zip file using Bootstrap 4. If you are interested to see his demo file, please click here to download the css menu flyout using bootstrap 4.

Commented on: 17 Feb, 2016 11:42:04 AM
Pls what type of navigation is used in this website. I want something like this but don't know the name
Commented on: 17 Feb, 2016 03:15:33 PM
It uses the default bootstrap menu skin. So you may want to check it out the css of bootstrap. Just wonder do you have any experience on CSS?
Commented on: 03 May, 2016 11:28:35 PM
The javascript codes is actually on the html file page. It is only used to support old IE browser. Dont think you need it anymore as most of the browsers are now up to date and support hover function on LI tags.
Commented on: 29 Apr, 2016 06:54:33 AM
I do not see the Javascript example in the demo files, only CSS.
Commented on: 29 Apr, 2016 05:22:34 PM
This is awesome . It solved my problems . thanks
Commented on: 11 Aug, 2016 06:58:16 AM
Can I ask why I have two machines with Win7 64 with IE11 up-to-date on same KB. And on one the fly out (I set it to slightly overlap the first LI level, that the level there seems to be ignoring the z- index that is set to 100, (borrowed flyout menu code, and the third flyout doesn't underlap) So that its flying out but BEHIND the first level. Works great on one and not the other.. all default IE 11 settings, same windows version.
Commented on: 12 Aug, 2016 09:52:23 AM
Do you have an url so I can actually see it?
Commented on: 17 Aug, 2016 09:06:34 AM
Look for the following code: #menuwrapper ul li:hover ul and change the left:150px to left:-150px; The negative will force the position of the open menu to the left.
Commented on: 16 Aug, 2016 11:56:50 PM
Please tell me how to get it to open to the left instead of the right. Thank you.
Commented on: 17 Aug, 2016 11:26:42 PM
Thanks for the quick response to opening to the left. It also needs to be changed on: #menuwrapper ul li:hover ul li:hover ul, #menuwrapper ul li.iehover ul li.iehover ul{ display:block; left: -150px; /*** remove minus sign to get the navbar to open to the right ***/ top:0; } to get the third level to open to the left. I'm using this in the bootstrap framework, but can't figure out how to get it to, for lack of better terminology, convert to a single column dropdown on small screens. Any suggestions?
Commented on: 18 Aug, 2016 01:39:29 PM
Thanks for adding it up George ;-). Regarding with smaller screen issue you have. In order to make it work, firstly you have to add a media query css target for smaller screen. Reference: what you need to do is to remove all the styles when it is on the smaller screen. This including removing the float to left or right. so it stays in one drop down line. If you want, you can see the sample responsive framework i created in here: and you can check the demo in here: Let me know if you need further help.
Commented on: 18 Aug, 2016 11:21:34 PM
Thanks, Andy. This is probably over my head, but I'll give it a shot.
Commented on: 29 Aug, 2016 08:58:18 AM
Thanks again for your help. I've been successful in getting your Vertical Flyout Menu to be responsive and added a fourth level. If you're interested, I'll be glad to send you the files. Just tell me where to send them.
Commented on: 29 Aug, 2016 10:12:20 AM
Thanks George. If you want to contribute, you can send your files to and I will put it at the end of the article with your files and name. Let me know if you want to post your email as well. otherwise i will just put your name.
Commented on: 23 Aug, 2016 11:24:15 PM
When you say click to the right nothing happens. Do you want to add some link in here? If you do just remove the hash tag # and replace with the url. Not quite sure what you mean by entire box active. Does it mean you want the sub menus to be active all?
Commented on: 19 Aug, 2016 01:55:21 AM
When I hover over the link, the flyout appears as it should, but only the left side inside the selection is active. If I click to the right, nothing happens. How do I make the entire box active?
Commented on: 24 Aug, 2016 01:02:56 AM
how can you get the outer layer (menuwrapper in your example, div_content_left in mine) to only be 150px when no flyover is active, and 100% the rest of the time? (if i make it 100% all the time, it prevents click through to items underneath) it's not going to be possible to put my content in the same div, so i need a way of having the menu visible, and working, but not blocking clicks to the page underneath. note - the css in the fiddle is auto generated, however what you see there is cut and paste from dev tools, minus a few graphics and event clicks. i can edit the script that generates the css.
Commented on: 28 Aug, 2016 12:27:06 AM
Hi Jonathan, thanks for sharing your thought. One of the reason why the underneath is blocked by the menu because you specified the menu position using absolute. I am not quite sure why you need to specify absolute position. It might be you need it in specific location. One thing you can fix this problem is by adjusting the z-index. At the moment it was 100. Try reduce to 1 if you can or simply remove this. To be honest the easy way probably not to use position absolute for the menu. On the other hand the option you have applied worked as well.
Commented on: 24 Aug, 2016 07:05:16 AM
I had an issue with the outer div blocking underlying content (i had posted a js-fiddle asking how to solve it, but have since figured it out) if anyone else has the same issue, i solved it using information found here: tldr; add pointer-events: none; to menuwrapper add pointer-events: auto to each child case (you might want to update your css after you have evaluated it's efficacy)
Commented on: 22 Dec, 2016 03:40:42 AM
I have a responsive side menu that changes width when page is resized. How do I make sure flyout is in the right position always.
Commented on: 23 May, 2017 01:11:07 AM
My problem is that the width of the wrapper is 250px so the submenu goes under the wrapper.
Commented on: 23 May, 2017 09:09:06 AM
What you can do is to use media queries, so you can adjust the width of the wrapper according to the screen width you prefer. You can change the css from width:250px to max-width:250px; You may have to include a min-width css style.
Denk Michael
Commented on: 07 Jun, 2017 04:57:34 PM
Really great job i love this Navbar can youplease make a package with responsive CSS Thank you a lot of Michael Denk
Commented on: 29 Jun, 2017 07:31:00 AM
Does this code work for a custom Tumblr theme? I plan on having a fixed vertical menu with sub menu on the bottom right side of a sidebar.
Commented on: 28 Jul, 2017 12:01:22 PM
Well, I havent tested it yet. But you can just simply copy and paste the html and css. it should work by default, but may need a bit of tweak.
Commented on: 23 Oct, 2017 08:19:45 AM
Thank you very much indeed. I've been working on converting my drop-down menu into a fly-out one and I've not been lucky in finding a solution during the last two days. Right now I found your clear example and voila my fly-out menu works like a charm. You are very smart and clear in your coding. Many thanks.
Commented on: 23 Oct, 2017 05:43:09 PM
Great job. thx buddy
Commented on: 08 Mar, 2018 10:29:13 PM
my menu structure is same as like this, but my issue is the main menu is lengthy(up to it reaches the footer), on that time the submenu list is hide, i search for scroll-able main menu but that are all don't have the option the submenu placed under the main menu vertically, but i need the above structure with vertical scroll is it possible...
Commented on: 09 Mar, 2018 08:40:23 AM
Hi Kanagarathinam, try this in your menu wrapper. Let says it based on my example above. You can force to have a vertical scroll with fixed height.
    overflow-y: scroll;
Write Comment
0 characters entered. Maximum characters allowed are 1000 characters.
Share your article with us and add your own google adsense account to earn extra money. Plus, you can promote a link back to your site.
Related Articles
Published on: 20 May, 2016
Do you need to create a beautiful, simple and elegant pagination links with css? Simply follow our easy and quick tutorial on how to create the pagination links easily with CSS.
Published on: 31 January, 2016
The easy way to optimize your site for printing is to create a separated external css targeting a media to print only. When a printing action is being executed, the browser will send over the information from your page to the printer. It will also check if there is any specific style sheet that will be used for printing mode only. If there is, it will then render the page content using the media print css file. Therefore the page you see in the printer paper may completely looks different with the one you see in a page. The idea of optimizing in here is to hide unnecessary content.
Related Tutorials
Published on: 10 August, 2013
z-index is a css property that allows to position an object/element in front/behind of other elements.