CSS Dropdown Menu

Let’s create a dropdown menu with CSS and HTML only. There are lots of fancy menus out there. This is just an experimental HTML-CSS based multi-level menu with room for improvements. Someone starting to learn CSS might find this helpful.

To quickly explain how it’s done, menu is contained within ul and each menu item is contained within individual li elements. Menu item with children has a class .children and that adds some extra styling for the child menu segment. The child segment is hidden by default and is only displayed on mouse over (:hover). There is a small arrow before the child segment. Style for that can be found in the :before segment for child ul. This arrow also ensures continuous mouse over presence on the parent li. If the arrow is removed, the space between the parent li and child ul will break the continuity of mouse over effect. That can be fixed using padding to the children.

The nav element wrapping the whole thing is just to create a container and set a width for demo purpose.

Here is the demo code on JSFiddle:

Advanced object selection using Mootools

Mootools’ “Selectors” utility has some really strong feature. It really saves a lot of time and sweat. Using this property, one can select a tag (any one can!), tag with specific name, id or any other attribute (huh!) and most amazingly part of a property value matching to some string…

Say you want to select all the div tags which has ID starting with ‘my’. How can you do that? Continue reading

Basic HTML – Part 2

This is the continuation of my previous post Basic HTML – Part 1. On this phase of the post, I’m going to explain the table and form tags.


Table is a very important tag and widely used for alignment management of web pages. It is defined by the <table> tag. Some hierarchy are needed to be maintained for tables. First the table, then row, then column and finally content of the column. Continue reading

Basic HTML – Part 1

Well.. I was supposed to take a short class for my developer group in a recent project. I thought I’d rather post the topics and some detail of that class here, which can help beginners.

First of all, we are going to learn some keywords and their use:

  • HTML – Hyper Text Markup Language.
    • Used to write web pages. Browsers understand this language. You have to talk with web browsers in this language.
  • Tags
    • Tags are used to distinguish different elements in a web page. As an example, we’d use the anchor tag (<a>) to define anchor or links.
  • CSS – Cascading Style Sheet
    • CSS is used to define style for a web page. We’d learn about CSS in a later session.
  • Scripts
    • Scripts are some programming language which helps to interact a web page with user and server. PHP, JavaScript etc. are commonly used scripts in web development.

Now I’m going to explain some rapidly used tags here. Continue reading