Main menu styling

Create images folder and save the following 5 images in the images folder.

  1. bull_circle.gif
  2. attach.png
  3. ci.gif
  4. circle.gif
  5. arrow.gif

Open index.html.
Add the following to #main-menu in index.html.

<div id="main-menu">

	<ul id="nav">
		<li><a href="#">Java</a></li>
		<li><a href="#">JDBC</a></li>
		<li><a href="#">JSP</a></li>
		<li><a href="#">CSS Layout</a></li>
		<li><a href="#">JSP Project</a></li>
		<li><a href="#">Spring</a></li>
		<li><a href="#">JavaScript</a></li>
	</ul>
	
</div>	

#main-menu Styling

Add the following to #main-menu in stylesheets.
(Remove #main-menu in /*** Just for Looks ***/)

#main-menu {
	width: 1000px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;	
}

Example Screeen 1

ul#nav

To remove default margin and padding of ul and li,
Add the following in /*** The Essential Code ***/.

ul#nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
}	

Example Screeen 2

ul#nav li

To list the menus horizontally, Add the following to /*** The Essential Code ***/.

ul#nav li {
	float: left;
}

Example Screeen 3

To add padding between menus, Add the following:

ul#nav li {
	float: left;
	padding: 0 17px 0 8px;
}

Example Screeen 4

Positioning ul#nav

The menus position is too upwards.
To move menus to middle while not changing the height of #main-menu,
Modify ul#nav as shown below.

ul#nav {
	margin: 0;
	padding: 0;
	list-style-type: none;
	position: relative;
	top: 9px;
	left: 17px;
}

Example Screeen 5

Main Menu Link Style

Add a background color to the #main-menu.

#main-menu {
	width: 1000px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;
	background: #92B91C;
}

To remove the link's default underscore and set the underline to appear when the mouse hovers,
Add the following to /*** The Essential Code ***/.

ul#nav > li > a {
	text-decoration: none;
	color: #FFF;
}
ul#nav > li > a:hover {
	text-decoration: underline;
	background: none;
	color: #FFF;
}

Example Screeen 6

Using an image instead of default list style

If you add list-style-type: none to ul, the default list style disappears.
If you put a background image in front of li instead of the default list style, you can express the list more elegantly.
Add the following to ul#nav li.

ul#nav li {
	float: left;
	padding: 0 17px 0 8px;
	background: url('../images/bull_circle.gif') no-repeat 0 50%;
}

The image path should be relative to the CSS file location.

Add a border style to the main menu box as shown below.

#main-menu {
	margin: 15px 0;
	width: 996px;
	height: 35px;
	font-family: Verdana, sans-serif;
	font-weight: bold;
	font-size: 12px;	
	background: #92B91C;
	border: 2px solid #DAEAAA;
}

Example Screeen 8

References