Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    Regular Coder
    Join Date
    Jan 2013
    Location
    Australia
    Posts
    118
    Thanks
    22
    Thanked 0 Times in 0 Posts

    Smile How to change Drop Down Menu To Fly Out CSS

    Hello I would like to know how to change my basic drop down menu to a 4 level fly out? I have done the html side but just don't know how to make it fly out 4 levels.

    Code:
    .box-category {
    	margin-top: -5px;
    	margin-left: 1px;
    }
    .box-category ul {
    	list-style: none;
    	margin: 0;
    	padding: 0;
    }
    .box-category > ul > li {
    	padding: 8px 8px 8px 0px;
    }
    .box-category > ul > li + li {
    	border-top: 1px solid #EEEEEE;
    }
    .box-category > ul > li > a {
    	text-decoration: none;
    	color: #333;
    }
    .box-category > ul > li ul {
    	display: none;
    }
    .box-category > ul > li a.active {
    	font-weight: bold;
    }
    .box-category > ul > li a.active + ul {
    	display: block;
    }
    .box-category > ul > li:hover a {
        color: #006600;
    }
    .box-category > ul > li ul > li {
    	padding: 5px 5px 0px 10px;
    }
    .box-category > ul > li ul > li > a {
    	text-decoration: none;
    	display: block;
    }
    .box-category > ul > li ul > li > a.active {
    	font-weight: bold;
    }

  • #2
    Regular Coder
    Join Date
    Sep 2011
    Posts
    339
    Thanks
    3
    Thanked 35 Times in 35 Posts
    I've never made a 4-level fly-out, but I do have a tutorial for you that describes how to make a 2-level: Make a Drop-Down/Fly-Out Menu with CSS.
    Frank

    How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •