Main menu styling

Create a foider named images and save the following five images in the images folder.

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

Open index.html and 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>

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

Add padding between menus like below. 

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 like 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 #main-menu. 

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

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

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. You can express lists more elegantly if you put a background image in front of li instead of the default list style.

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 location of the stylesheets.

Add a border to #main menu box like 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