Exercise: Horizontal menu using styles

This exercise is provided to allow potential course delegates to choose the correct Wise Owl Microsoft training course, and may not be reproduced in whole or in part in any format without the prior written consent of Wise Owl.

The answer to the exercise will be included and explained if you attend the Wise Owl course listed below!

Category ==> ASP.NET webforms - VB  (27 exercises)
Topic ==> CSS Styles and Style Sheets  (1 exercise)
Level ==> Harder than average
Course ==> ASP.NET WebForms - VB
Before you can do this exercise, you'll need to download and unzip this file (if you have any problems doing this, click here for help).

You need a minimum screen resolution of about 700 pixels width to see our exercises. This is because they contain diagrams and tables which would not be viewable easily on a mobile phone or small laptop. Please use a larger tablet, notebook or desktop computer, or change your screen resolution settings.

If you've got the previous exercise working, see if you can add a horizontal menu to it.  The menu should look like this:

ASP.NET 4.0 - Visual Basic exercise - CSS Styles and Style Sheets (image 1)

Hovering over a menu option changes its colour

Here is the HTML that you should use:

ASP.NET 4.0 - Visual Basic exercise - CSS Styles and Style Sheets (image 2)

A suggestion for what your menu might look like in HTML

The secret, of course, is to create the following styles:

  • #TopMenu to control how the menu itself appears
  • #TopMenu ul to control how unordered lists appear within this
  • #TopMenu ul li to control how list items appear
  • #TopMenu ul li a to control how hyperlinks appear within list items

You'll need to set the float style of the list items to left, and the list-style-type to none to suppress bullets.

Save and close your website.

This page has 0 threads Add post