Advanced Search

Return to Snippet

Revision: 64186
at July 12, 2013 04:19 by COBOLdinosaur
Initial Code 
Markup:
<div id="menudiv">
    <section class="menusection">Level 1 XXX
            <nav class="submenu">
                <a href="xxx.php" title="Tooltip">Sub 1 XXX  1</a>
                <a href="xxx.php" title="Tooltip">Sub 1 XXX  2</a>
                <a href="xxx.php" title="Tooltip">Sub 1 XXX  3</a>
                <a href="xxx.php" title="Tooltip">Sub 1 XXX  4</a>
                <a href="xxx.php" title="Tooltip">Sub 1 XXX  5</a>
            </nav>
   </section>
    <section class="menusection">Level 1 YYY
            <nav class="submenu"> ... etc ...
        REPEAT for the number sections required
</div>    

CSS:
.menusection, .menusection2 {
                position:relative;
                width:15vw; 
                float:left;
                border:1px solid black; 
                z-index:10;
                height:1em;
                background-color:magenta;
                padding:3vh;
                border-radius:10px;
            }
.menusection:hover  {
                                    background-color:orange;
                                    transition-property:background-color;
                                    transition-duration:2s;
                                    transition-timing-function:ease-out;
                                }
Initial URL 
http://coboldinosaur.com/pages/drop-down-menu.html
Initial Description 
The first thing you might notice is that I am not using nested lists to layout the menu. That is an old XHTML layout technique. I am using the more semantically correct HTML5 <nav> tag. Menus are not lists, they are navigation so using the more modern tag makes sense, and it turns out to be easier to work with.
Initial Title 
Drop down menu with fade in no scripting
Initial Tags 
css, html5
Initial Language 
CSS