CSS Hover Menu

Today I want to show a stylish way using CSS to create a hover drop down menu.

The HTML

<div id="navbarMain" class="navbar">
    <ul> 
       <li><a href="#">first level link</a>
          <ul>
            <li><a href="#">second level link</a>
               <ul>
                  <li><a href="#">third level link</a></li>
                  <li><a href="#">third level link</a></li>
                  <li><a href="#">third level link</a></li>
                  <li><a href="#">third level link</a></li>
               </ul>
            </li>
            <li><a href="#">second level link</a></li>
            <li><a href="#">second level link</a></li>
            <li><a href="#">second level link</a></li>
            <li><a href="#">second level link</a></li>
            <li><a href="#">second level link</a> 
                <ul>
                  <li><a href="#">third level link</a></li>
                  <li><a href="#">third level link</a></li>
                </ul>    
            </li>
            <li><a href="#">second level link</a></li>
            <li><a href="#">second level link</a></li>
           </ul>
        </li>
        <li><a href="#">first level link</a>
            <ul>
               <li><a href="#">second level link</a></li>
               <li><a href="#">second level link</a></li>
             </ul>
        </li>
        <li><a href="#">first level link</a>
           <ul>
             <li><a href="#">second level link</a></li>
           </ul>
        </li>
        <li><a href="#">first level link</a></li>   
    </ul>
</div><!-- /navbarMain -->

The CSS

.navbar{
 position: relative;
 width: 100%;
 opacity: 0.75;
}

.navbar ul{
 position: relative;
 padding: 0px; 
 margin: 0px;
}

.navbar ul li{
 position: relative;
 float: left;
 list-style-type: none;
 width: 25%;
}

.navbar ul li a{
 text-decoration: none;
 display: block;
 height: 35px; 
 line-height: 35px; /*centers the text vertically*/
 text-align: center;
 border: 1px solid #111;
 background: #333;
 font-weight: bold;
 color:  #fff !important;
 text-shadow: 0 /*shadow-x*/ 1px /*shadow-y*/ 1px /*shadow-radius*/ #111 /*shadow-color*/;
 background-image: -webkit-gradient(linear, left top, left bottom, from( #444444 /*background-start*/), to( #2d2d2d /*background-end*/)); /* Saf4+, Chrome */
 background-image: -webkit-linear-gradient( #444444 /*background-start*/, #2d2d2d /*background-end*/); /* Chrome 10+, Saf5.1+ */
 background-image: -moz-linear-gradient( #444444 /*background-start*/, #2d2d2d /*background-end*/); /* FF3.6 */
 background-image: -ms-linear-gradient( #444444 /*background-start*/, #2d2d2d /*background-end*/); /* IE10 */
 background-image: -o-linear-gradient( #444444 /*background-start*/, #2d2d2d /*background-end*/); /* Opera 11.10+ */
 background-image: linear-gradient( #444444 /*background-start*/, #2d2d2d /*background-end*/);
 text-overflow: ellipsis;
 overflow: hidden;
}

.navbar ul li a:hover{
 border: 1px solid #000;
 background: #444444;
 font-weight: bold;
 color:  #fff !important;
 text-shadow: 0 /*shadow-x*/ 1px /*shadow-y*/ 1px /*shadow-radius*/ #111 /*shadow-color*/;
 background-image: -webkit-gradient(linear, left top, left bottom, from( #555555 /*background-start*/), to( #383838 /*background-end*/)); /* Saf4+, Chrome */
 background-image: -webkit-linear-gradient( #555555 /*background-start*/, #383838 /*background-end*/); /* Chrome 10+, Saf5.1+ */
 background-image: -moz-linear-gradient( #555555 /*background-start*/, #383838 /*background-end*/); /* FF3.6 */
 background-image: -ms-linear-gradient( #555555 /*background-start*/, #383838 /*background-end*/); /* IE10 */
 background-image: -o-linear-gradient( #555555 /*background-start*/, #383838 /*background-end*/); /* Opera 11.10+ */
 background-image: linear-gradient( #555555 /*background-start*/, #383838 /*background-end*/);
}

.navbar ul li a:active{
 border: 1px solid #000;
 background: #222;
 font-weight: bold;
 color:  #fff !important;
 text-shadow: 0 /*shadow-x*/ 1px /*shadow-y*/ 1px /*shadow-radius*/ #111 /*shadow-color*/;
 background-image: -webkit-gradient(linear, left top, left bottom, from( #202020 /*background-start*/), to( #2c2c2c /*background-end*/)); /* Saf4+, Chrome */
 background-image: -webkit-linear-gradient( #202020 /*background-start*/, #2c2c2c /*background-end*/); /* Chrome 10+, Saf5.1+ */
 background-image: -moz-linear-gradient( #202020 /*background-start*/, #2c2c2c /*background-end*/); /* FF3.6 */
 background-image: -ms-linear-gradient( #202020 /*background-start*/, #2c2c2c /*background-end*/); /* IE10 */
 background-image: -o-linear-gradient( #202020 /*background-start*/, #2c2c2c /*background-end*/); /* Opera 11.10+ */
 background-image: linear-gradient( #202020 /*background-start*/, #2c2c2c /*background-end*/);
}

.navbar ul li ul{
 position: absolute;
 width: 100%;
 left: -99999em;
}

.navbar ul li:hover ul{
 left: 0px;
}

.navbar ul li ul li, .navbar ul li ul li:hover ul li{
 width: 100%;
}

.navbar ul li ul li ul, .navbar ul li:hover ul li ul{
 position: absolute;
 width: 100%;
 left: -99999em;
 top: 0px;
}

.navbar ul li ul li:hover ul{
 left: 100%;
}

To see a working demo of the code follow this link.

Adding Time

Today I thought I would add a quick note about how to utilize the strtotime() function in PHP to add time and still keep it in the desired format. The trick is to pass the strtotime() function to the date() function in order to keep the formatting.

$end_time = date('H:i:s', strtotime($start_time)+5);
// 5 represents time to be added in seconds. 

HTML5 Video

A very beautiful yet frustrating improvement in HTML5 is the browser support of native video without any third party plugin with the use of the video tag.

<video controls="controls" width="352" height="288" poster="poster.jpg">
     <source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
     <source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'>
     <track kind="captions" src="captions.vtt" srclang=en label=English />
</video>

The controls tells the browser to use its default controls with the video. The poster is the image that should be shown while the video is being downloaded or until the user pushes the play button. I include two different source files with the video because not all browser play nicely together. Browsers like Firefox require the open video file type ogv while browser like IE 9 and Safari want the mp4 file type. The track is used to display text for captions/subtitles on the video.

There are a few problems that can keep your video from playing and the biggest ones I have run into are incorrect encoding and incorrect MIME type. Internet Explorer is the most unforgiving in both of these regards. The video needs to be encoded with H.264. I like to use ffmpeg to do this with the following command:

ffmpeg -i input.mpeg -s 352x288 -vcodec -libx264 -preset slow output.mp4

Here are two samples for webm and ogv file types.

ffmpeg -i input.mpeg -vcodec libvpx -acodec libvorbis -f webm output.webm

ffmpeg -i input.mpeg -vcodec libtheora -acodec libvorbis output.ogv

Another great utility is Miro.

Your server needs to be set up to send the correct MIME type to the browser. In apache you need to add the following to the httpd.conf file. Remember to reboot the server after doing so.

AddType video/mp4 .mp4 .m4v
AddType video/ogg .ogv
AddType video/webm .webm

I hope this is enough to get you started in the right direction. If you still have questions here are some good links to check out ffmpeg commands, trouble shooting IE9. Good luck!