How to style a simple block menu in HTML using CSS

Recently I wanted to create a block menu in my html pages. I want this block menu to have a header indicating the category of the menu and a set of menu items. There may be more than one way of doing this exercise. There may also be a better way of doing the same. But here is how I have done it and it seem to work well for now.

HTML menu code

(div class="menu")
(p class="header")Daily Reads(/p)
      (p)(a href="http://www.gotdotnet.com/team/dbox/")Don Box(/a)(/p)
      (p)(a href="http://today.java.net/pub/au/23")Daniel Steinberg(/a)(/p)
(/div)

For the sake of embedding html in html, I have used regular brackets in place of angular brackets. Hope this is not too much of an inconvenience. Now this is a simple menu with a header and two menu items.

How I have styled it

/*Setup the menu box*/
div.menu
{
	margin:0 0 2em 0;
	border: 1px solid;
	padding:0 0 0 0;
}

/*set the paragraphs with no margin, left justified*/
div.menu p
{
margin:0;
}

/*Set header background and foreground colors*/
div.menu p.header
{
	background-color:green;
	color:white;
}

/*As the mouse moves over, change color of the links*/
div.menu a:hover 
{
background-color:green;
color:orange;
}

Setting up the menu box

/*Setup the menu box*/
div.menu
{
	margin:0 0 2em 0;
	border: 1px solid;
	padding:0 0 0 0;
}

This is an example of a class selector where I am choosing a div that is classed as "menu". In a boxed CSS model the outer layer is the margin, followed by border and then padding. I have set the bottom margin to twice the size of the font. I have given it a solid border that is 1 pixel wide. I have set the padding to zero. Setting the padding to zero allows the containing paragraphs to line up right next to the border, a tighter styling.

Styling the paragraphs of the menu

 
div.menu p
{
margin:0;
}

This code sets up the menu items to left justify to the border line with out any space. With out this code, the paragraphs may have a margin inheriting from the other divs of which this menu div is a child.

Setting header background and foreground colors

div.menu p.header
{
	background-color:green;
	color:white;
}

This will nicely delineate the header line and gives a nice solid background color

Styling the hyperlink of the menu items

div.menu a:hover 
{
background-color:green;
color:orange;
}

This little touch seem to nicely provide feedback as the mouse is moved over the meny items. Setting the background and foreground colors will gurantee the visibility of the link

Disclaimer

I have just started looking into CSS. I am a quite a novice in this space. So use my notes accordingly.

For additional notes on CSS, Refer to my CSS Knowledge Folder