Recently I hop around quite a bit of website. Some nicely designed, some great functional, some… Mistake.
Multilevel dropdown menu, one term that may not be too unfamiliar for most of us, be it a web designer or not. However, the problem lies on the way it coded. Back in 1999, this is not that easy to create a multilevel dropdown, and I always refer to Dynamic Drive for all the fancy thing.
Nowadays, to make a web more accessible, we use unordered list <ul> … </ul> to create menu, hence, it is a little tricking than using <table> … </table> like what I did back in 1999.
Bascially,
The first level is covered with one <ul> … </ul> then another list inside the first level <li> … </li>. Take attention to the gap between the first level <li> … </li> and second level <ul> … </ul>. They are closed.
The gap will, however, disallow a mouse cursor to point on it when moving down from the first level.
To understand the whole second level work, the appearance of second level is all depend on the selection of first level link. So, wherever the cursor be, it should be within a clickable area.
Most of the time, we would want to have some space in between each link. The correct way of doing it is to set padding on the link itself and not the list. The mistake one may make is to set padding on the list…
Take a look at the demo I created to find out what I mean by, not linking and doesn’t allow a cursor to go through the second level menu.
Costing a few hundred.
