Responsive Menu

HTML

<div id="navigation"> 
    <ul id="navbar">
        <li><a href="index.php">Home</a></li>
        <li><a href="portfolio.php">Concrete Stairs</a>
            <ul>
                <li><a href="#">Traditional Stairs</a>
                    <ul>
                        <li><a href="17bedf.php">reinforced concrete stairs - covent garden</a></li>
                        <li><a href="5yeo.php">concrete staircases - knightsbridge</a></li>
                        <li><a href="12cur.php">concrete stairs - knightsbridge</a></li>
                        <li class="last"><a href="alb.php">non-slip concrete staircase - london bridge</a></li>
                    </ul>
                </li>
                <li><a href="#">Complex Stairs</a>
                    <ul>
                        <li><a href="96hsk.php">concrete spiral stairs - kensington</a></li>
                        <li><a href="12hon.php">helical concrete staircase - battersea</a></li>
                        <li><a href="62elswt.php">curved concrete stairs - st john\'s wood</a></li>
                        <li class="last"><a href="11lgm.php">reinforced concrete helical stairs - knightsbridge</a></li>
                    </ul>
                </li>
            </ul>
        </li>
        <li><a href="faq.php">FAQ's</a></li>
        <li><a href="contact us.php">Contact Us</a></li>
</ul>
</div>

CSS

body, html, ul { margin:0; padding:0; list-style:none;}
/* HIDE SUB-MENU AND SUB-SUB MENU */
#navbar ul, #navbar ul li ul li { display:none; }
/* GENERAL LIST STYLES */
#navbar li {  
    background:#1A1A1A; /* BLACK LIST BACKGROUND */
    text-align:center;    
    border-bottom:1px white solid; /* ADD BORDER UNDERNEATH EACH LIST ITEM */
}

#navbar li a {
    text-decoration:none; /* REMOVE UNDERLINE FROM LINKS */
    display:block;
    color:white; /* TEXT COLOR */
    padding:5px 0; /* ADD SOME SPACE TOP AND BOTTOM OF LI ITEMS */
}

/* SUB LIST STYLES */
#navbar ul li a {
    color:black;
    background: #eee;   /* LIGHT GREY */
    padding:5px 0;   
}

/* REMOVE BORDER FROM LAST SUB-LIST ELEMENT, <li class="last">... */
#navbar ul li.last {
     border-bottom:none;
}

/* SHOW SUB-MENU WHEN ABOUT IS HOVERED */
#navbar li:hover ul  { display:block; }

/* SHOW SUB-SUB MENU WHEN 'This will show another sub-menu' is hovered */
#navbar li ul li:hover ul li  {
  display:block;color:red
}

/* SUB-SUB MENU STYLE e.g. sub menu of Complex Stairs */
#navbar li ul li ul li a {
    background:lightblue;
}

/* HOVER OF ABOVE */
#navbar li ul li ul li a:hover {
   background: #eeeeee;
}

/* MEDIA QUERY TO CHANGE NAV WHEN SCREEN GOES ABOVE 480px. REDUCE WINDOW SIZE TO SEE NAV CHANGE */
@media all and (min-width: 480px) {
    /* SHOW NAV ACROSS FULL WIDTH OF SCREEN, GIVE 25% WIDTH TO EACH LIST ITEM (THERE's 4 IN TOTAL, SO DIVIDE 100% BY NUMBER OF LIST ITEMS  */
    #navbar li {
        width:25%;
        float:left;
    }
    
    /* TRADITIONAL STAIRS AND COMPLEX STAIRS */
    #navbar li ul li {       
        position:relative; 
        width:100%;         
    }
    
    /* SUB LEVEL OF TRADITIONAL STAIRS AND COMPLEX STAIRS */
    #navbar li ul li ul  {        
        position:absolute;
        left:100%;        
        width:200px;
        top:0;    
    }  
}