CSS Navigation Bar

8/12/2019 CSS Navigation Bar

1/3


www.w3schools.com/css/css_navbar.asp 1/3

HOME HTML CSS JAVASCRIPT JQUERY XML ASP.NET PHP SQL MORE... REFERENCES | EXAMPLES | FORUM | ABOU

Get Certified

Study Web Technologiesand get a diplomaat w3schools.com

SHARE THIS PAGE

Like 76k

CSSBasic

CSS HOME

CSS Introduction

CSS Syntax

CSS Id & Class

CSS How To

CSSStyling

Styling Backgrounds

Styling Text

Styling Fonts

Styling Links

Styling Lists

Styling Tables

CSSBox Model

CSS Box Model

CSS Border

CSS Outline

CSS Margin

CSS Padding

CSSAdvanced

CSS Grouping/Nesting

CSS Dimension

CSSDisplay

CSS Pos itioning

CSS Floating

CSS Align

CSS Pseudo-class

CSS Pseudo-element

CSS Navigation Bar

CSS Image Gallery

CSS Image Opacity

CSS Image Sprites

CSS Media Types

CSS Attribute Selectors

CSS Summary

CSSExamples

CSS Examples

CSS Quiz

CSS Certificate

CSSReferences

CSS Reference

CSS Selectors

CSS Reference Aural

CSS Web Safe Fonts

CSS Units

CSS Colors

CSS Color Values

CSS Color Names

CSS Color HEX

Previous Next Chapter

HOME NEWS ARTICLES FORUM CONTACT ABOUT

CSS Navigation Bar

Demo: Navigation Bar

Navigation Bars

Having easy-to-use navigation is important for any web site.

With CSS you can transform boring HTML menusinto good-looking navigation bars.

Navigation Bar = List of Links

A navigation bar needs standard HTML as a base.

In our examples we will build the navigation bar from a standa rd HTML list.

A navigation bar is basically a list of links, so using the and elements makes pe rfect sense:

Example

Home

News

Contact

About

Try it yourself

Now let's remove the bullets and the margins and padding from the list:

Example

ul

{

list-style-type:none;

margin:0;

padding:0;

}

Try it yourself

Example explained:

list-style-type:none - Removes the bullets. A navigation bar does not need list markers

Setting margins and padding to 0 to remove browse r default settings

The code in the example above is the standard code used in bo th vertical, and horizontal navigation bars.

Vertical Navigation Bar

To build a vertical navigation bar we only need to style the elements, in addition to the code above:

Example

a

{

display:block;

width:60px;

}

Try it yourself

Example explained:

display:block - Displaying the links as block elements makes the whole link area clickable (not just the text),

and it allows us to s pecify the width

width:60px - Block elements take up the full width available by default. We want to specify a 60 px w idth

Tip:Also take a look at our fully styled vertical navigation ba r example.

Note:Always specify the w idth for elements in a vertical navigation bar. If you omit the w idth, IE6 can

produce unexpected results.

WEB HOSTING

Best Web Hosting

eUK Web Hosting

UK Reseller Hosting

Domain, Hosting & Emai

WEB BUILDING

Download XML Editor

FREE Website BUILDER

FREE Website C reator

Best Website Templates

STATISTICS

Browser Statistics

OS Statistics

Display Statistics

Search w3schools.com:

Select Language

Web Designing in 12 mthsLearn HT ML, Javascript & Flash Jo in course at Arena! www.Arena-Multimedia.com

3D Animation CoursesRegister Now! Get Info on Animation Colleges, Courses, & Studio Detail. HTCampus.Com/Animat ion+I i

Design logos & websites12-month course to work in media Join MAAC Multimedia course today! www.maacindia.com
http://www.w3schools.com/cssref/css_colorsfull.asphttp://www.w3schools.com/cssref/css_colors_legal.asphttp://www.w3schools.com/cssref/css_colors.asphttp://www.w3schools.com/cssref/css_selectors.asphttp://www.w3schools.com/cssref/css_selectors.asphttp://www.w3schools.com/css/css_exam.asphttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/css/css_attribute_selectors.asphttp://www.w3schools.com/css/css_image_gallery.asphttp://www.w3schools.com/css/css_image_gallery.asphttp://www.w3schools.com/css/css_pseudo_elements.asphttp://www.w3schools.com/css/css_align.asphttp://www.w3schools.com/css/css_positioning.asphttp://www.w3schools.com/css/css_dimension.asphttp://www.w3schools.com/css/css_padding.asphttp://www.w3schools.com/css/css_border.asphttp://www.w3schools.com/css/css_border.asphttp://www.w3schools.com/css/css_list.asphttp://www.w3schools.com/css/css_font.asphttp://www.w3schools.com/css/css_background.asphttp://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/default.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=B2a_Gf3P-UdjAE-OCiAfqwoHoCo_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBEXd3dy53M3NjaG9vbHMuY29tugEJZ2ZwX2ltYWdlyAEJ2gEraHR0cDovL3d3dy53M3NjaG9vbHMuY29tL2Nzcy9jc3NfbmF2YmFyLmFzcKkC6BjGZZyahj7AAgLgAgDqAhovMTY4MzMxNzUvVG9wTGVmdFJlY3RhbmdsZfgCgdIekAOaCJgDyAaoAwHQBJBO4AQBoAYW&num=0&sig=AOD64_3wzfBQhHt5ZiXpu0QnBLLhO5Hi_A&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://www.w3schools.com/http://www.w3schools.com/http://www.googleadservices.com/pagead/aclk?sa=L&ai=CxHvBf3P-UafHFMK9igeBo4DoBrfG3_ID94W-h2TAjbcBEAEg5-j6AVDc86jlAmDlwuSDpA6gAYHj_OADyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKQBT9Baey-IxPATtrO6eSKdD32umQ4JbkZkSZ_Ir6keBdTW2kJTTX450WPzI4eHVrA-bR_9mN3Kq6VCJSyQ5FNHCjcvIrL9hCuh1jOlRZGQSBdHR1rIWrgNkctaRq9g4tLoRovMsn_BOrrLKUxCcnZJwamzYaniDIdDB1_TKx5ZU8QxRdWMyw_sUuSnVbFR82yV98nIC5vdYs2sl-QG53H1bjWaqMzgBAGIBgGgBgKAB-ecgx8&num=1&cid=5Ghq8k5MVoKtiHT36doLD16H&sig=AOD64_0DySAptisH-ht4TPhBazmCeabgmQ&client=ca-pub-3440800076797949&adurl=http://tracking-in.sokrati.com/click%3Fclient_id%3D235%26tag%3Dg-m07l5h8a0t6i8lv_235%26svt%3D1%7Cpendrive%7C%7Cd%7Cwww.w3schools.com%7C26892468431%7Cnone%7C%26redirect_url%3Dhttp%253A%252F%252Fwww.shopclues.com%252Fcomputers%252Fmemory-devices.html%253Futm_source%253DGoogSokrati%2526utm_medium%253Dcpc%2526utm_term%253DBanner%2526utm_content%253DContentBanner%2526utm_campaign%253DPendrive%2528Banner%2529&nm=2http://www.googleadservices.com/pagead/aclk?sa=L&ai=CxHvBf3P-UafHFMK9igeBo4DoBrfG3_ID94W-h2TAjbcBEAEg5-j6AVDc86jlAmDlwuSDpA6gAYHj_OADyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKQBT9Baey-IxPATtrO6eSKdD32umQ4JbkZkSZ_Ir6keBdTW2kJTTX450WPzI4eHVrA-bR_9mN3Kq6VCJSyQ5FNHCjcvIrL9hCuh1jOlRZGQSBdHR1rIWrgNkctaRq9g4tLoRovMsn_BOrrLKUxCcnZJwamzYaniDIdDB1_TKx5ZU8QxRdWMyw_sUuSnVbFR82yV98nIC5vdYs2sl-QG53H1bjWaqMzgBAGIBgGgBgKAB-ecgx8&num=1&cid=5Ghq8k5MVoKtiHT36doLD16H&sig=AOD64_0DySAptisH-ht4TPhBazmCeabgmQ&client=ca-pub-3440800076797949&adurl=http://tracking-in.sokrati.com/click%3Fclient_id%3D235%26tag%3Dg-m07l5h8a0t6i8lv_235%26svt%3D1%7Cpendrive%7C%7Cd%7Cwww.w3schools.com%7C26892468431%7Cnone%7C%26redirect_url%3Dhttp%253A%252F%252Fwww.shopclues.com%252Fcomputers%252Fmemory-devices.html%253Futm_source%253DGoogSokrati%2526utm_medium%253Dcpc%2526utm_term%253DBanner%2526utm_content%253DContentBanner%2526utm_campaign%253DPendrive%2528Banner%2529&nm=2http://www.googleadservices.com/pagead/aclk?sa=L&ai=CxHvBf3P-UafHFMK9igeBo4DoBrfG3_ID94W-h2TAjbcBEAEg5-j6AVDc86jlAmDlwuSDpA6gAYHj_OADyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKQBT9Baey-IxPATtrO6eSKdD32umQ4JbkZkSZ_Ir6keBdTW2kJTTX450WPzI4eHVrA-bR_9mN3Kq6VCJSyQ5FNHCjcvIrL9hCuh1jOlRZGQSBdHR1rIWrgNkctaRq9g4tLoRovMsn_BOrrLKUxCcnZJwamzYaniDIdDB1_TKx5ZU8QxRdWMyw_sUuSnVbFR82yV98nIC5vdYs2sl-QG53H1bjWaqMzgBAGIBgGgBgKAB-ecgx8&num=1&cid=5Ghq8k5MVoKtiHT36doLD16H&sig=AOD64_0DySAptisH-ht4TPhBazmCeabgmQ&client=ca-pub-3440800076797949&adurl=http://tracking-in.sokrati.com/click%3Fclient_id%3D235%26tag%3Dg-m07l5h8a0t6i8lv_235%26svt%3D1%7Cpendrive%7C%7Cd%7Cwww.w3schools.com%7C26892468431%7Cnone%7C%26redirect_url%3Dhttp%253A%252F%252Fwww.shopclues.com%252Fcomputers%252Fmemory-devices.html%253Futm_source%253DGoogSokrati%2526utm_medium%253Dcpc%2526utm_term%253DBanner%2526utm_content%253DContentBanner%2526utm_campaign%253DPendrive%2528Banner%2529&nm=2http://www.googleadservices.com/pagead/aclk?sa=L&ai=CxHvBf3P-UafHFMK9igeBo4DoBrfG3_ID94W-h2TAjbcBEAEg5-j6AVDc86jlAmDlwuSDpA6gAYHj_OADyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKQBT9Baey-IxPATtrO6eSKdD32umQ4JbkZkSZ_Ir6keBdTW2kJTTX450WPzI4eHVrA-bR_9mN3Kq6VCJSyQ5FNHCjcvIrL9hCuh1jOlRZGQSBdHR1rIWrgNkctaRq9g4tLoRovMsn_BOrrLKUxCcnZJwamzYaniDIdDB1_TKx5ZU8QxRdWMyw_sUuSnVbFR82yV98nIC5vdYs2sl-QG53H1bjWaqMzgBAGIBgGgBgKAB-ecgx8&num=1&cid=5Ghq8k5MVoKtiHT36doLD16H&sig=AOD64_0DySAptisH-ht4TPhBazmCeabgmQ&client=ca-pub-3440800076797949&adurl=http://tracking-in.sokrati.com/click%3Fclient_id%3D235%26tag%3Dg-m07l5h8a0t6i8lv_235%26svt%3D1%7Cpendrive%7C%7Cd%7Cwww.w3schools.com%7C26892468431%7Cnone%7C%26redirect_url%3Dhttp%253A%252F%252Fwww.shopclues.com%252Fcomputers%252Fmemory-devices.html%253Futm_source%253DGoogSokrati%2526utm_medium%253Dcpc%2526utm_term%253DBanner%2526utm_content%253DContentBanner%2526utm_campaign%253DPendrive%2528Banner%2529&nm=2http://www.w3schools.com/browsers/browsers_os.asphttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.eukhost.com/http://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py%3Fcontact%3Dabg_afc%26url%3Dhttp://www.w3schools.com/css/css_navbar.asp%26gl%3DIN%26hl%3Den%26client%3Dca-pub-3440800076797949%26ai0%3DCjaaLf3P-UaXFFMbMigeO0YGQD9Sc2OQC5Lu02SfAjbcBEAEg5-j6ASgDUKTRmK4DYOXC5IOkDqAByJj69wPIAQGpArRS0fDRklE-4AIAqAMByAOfBKoEpAFP0ME0S_4XI9ZPNHIc9YBk6053VhCR-crqovDTngo8IY8dzIXiNkExYBpfNZJJRaJOLQaFjZC2lOxjNxMQdkXemUfo3E2T6P2aikapZ9MdRf71l1pj7DRFChPeLeSs9U1pyWxbrvZC4VhxtlyR7KSfAoYQjAQwWoTTKsIif0QbMorKhKqFFYjiPPvt4IZy1d7BCLcuyPQnqusaS59f4augJ5w3sOAEAYgGAYAHoOeFCA%26ai1%3DCIabUf3P-UaXFFMbMigeO0YGQD-CjrIkEqKfH6WfAjbcBEAIg5-j6ASgDUMLQ7If9_____wFg5cLkg6QOoAGA17XfA8gBAakCtFLR8NGSUT7gAgCoAwHIA58EqgSkAU_QwTYR-Rcg1k80chz1gGTrTndWEJH5yuqi8NOeCjwhjx3MheI2QTFgGl81kklFok4tBoWNkLaU7GM3ExB2Rd6ZR-jcTZPo_ZqKRqln0x1F_vWXWmPsNEUKE94t5NitLmvJbFuu9kLhWHG2XJHspJ8ChhCMBDBahNMqwiJ_RBsyisqEqoUViOI8--3ghnLV3sEIty7I9Ceq6xpLn1_hq6AblAeW4AQBiAYBgAfoqMog%26ai2%3DCSIFof3P-UaXFFMbMigeO0YGQD6HsqYMEuZn-3ELDzLqjMxADIOfo-gEoA1CT6bngB2DlwuSDpA6gAYHssOYDyAEBqQK0UtHw0ZJRPuACAKgDAcgDnwSqBKoBT9DxJjD5FyHWTzRyHPWAZOtOd1YQkfnK6qLw054KPCGPHcyF4jZBMWAaXzWSSUWiTi0GhY2QtpTsYzcTEHZF3plH6NxNk-j9mopGqWfTHUX-9ZdaY-w0RXIQ3mXkKf-7S-tsg3ZsWjNpW6hakvvazVrfacYoNVaY_SDCNH6mesfjIOPygGeD3Dzb6A1w19Y2ws23Lsj0J3rrGkufX_W-pbMul7PM-Xf2xG3gBAGIBgGAB-eTzxk&usg=AFQjCNFVeSMNVEt1S9lBglOQhUriVsqgLQhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=CxHvBf3P-UafHFMK9igeBo4DoBrfG3_ID94W-h2TAjbcBEAEg5-j6AVDc86jlAmDlwuSDpA6gAYHj_OADyAECqQK0UtHw0ZJRPuACAKgDAcgDnQSqBKQBT9Baey-IxPATtrO6eSKdD32umQ4JbkZkSZ_Ir6keBdTW2kJTTX450WPzI4eHVrA-bR_9mN3Kq6VCJSyQ5FNHCjcvIrL9hCuh1jOlRZGQSBdHR1rIWrgNkctaRq9g4tLoRovMsn_BOrrLKUxCcnZJwamzYaniDIdDB1_TKx5ZU8QxRdWMyw_sUuSnVbFR82yV98nIC5vdYs2sl-QG53H1bjWaqMzgBAGIBgGgBgKAB-ecgx8&num=1&cid=5Ghq8k5MVoKtiHT36doLD16H&sig=AOD64_0DySAptisH-ht4TPhBazmCeabgmQ&client=ca-pub-3440800076797949&adurl=http://tracking-in.sokrati.com/click%3Fclient_id%3D235%26tag%3Dg-m07l5h8a0t6i8lv_235%26svt%3D1%7Cpendrive%7C%7Cd%7Cwww.w3schools.com%7C26892468431%7Cnone%7C%26redirect_url%3Dhttp%253A%252F%252Fwww.shopclues.com%252Fcomputers%252Fmemory-devices.html%253Futm_source%253DGoogSokrati%2526utm_medium%253Dcpc%2526utm_term%253DBanner%2526utm_content%253DContentBanner%2526utm_campaign%253DPendrive%2528Banner%2529&nm=2http://www.google.com/url?ct=abg&q=https://www.google.com/adsense/support/bin/request.py%3Fcontact%3Dabg_afc%26url%3Dhttp://www.w3schools.com/css/css_navbar.asp%26gl%3DIN%26hl%3Den%26client%3Dca-pub-3440800076797949%26ai0%3DCjaaLf3P-UaXFFMbMigeO0YGQD9Sc2OQC5Lu02SfAjbcBEAEg5-j6ASgDUKTRmK4DYOXC5IOkDqAByJj69wPIAQGpArRS0fDRklE-4AIAqAMByAOfBKoEpAFP0ME0S_4XI9ZPNHIc9YBk6053VhCR-crqovDTngo8IY8dzIXiNkExYBpfNZJJRaJOLQaFjZC2lOxjNxMQdkXemUfo3E2T6P2aikapZ9MdRf71l1pj7DRFChPeLeSs9U1pyWxbrvZC4VhxtlyR7KSfAoYQjAQwWoTTKsIif0QbMorKhKqFFYjiPPvt4IZy1d7BCLcuyPQnqusaS59f4augJ5w3sOAEAYgGAYAHoOeFCA%26ai1%3DCIabUf3P-UaXFFMbMigeO0YGQD-CjrIkEqKfH6WfAjbcBEAIg5-j6ASgDUMLQ7If9_____wFg5cLkg6QOoAGA17XfA8gBAakCtFLR8NGSUT7gAgCoAwHIA58EqgSkAU_QwTYR-Rcg1k80chz1gGTrTndWEJH5yuqi8NOeCjwhjx3MheI2QTFgGl81kklFok4tBoWNkLaU7GM3ExB2Rd6ZR-jcTZPo_ZqKRqln0x1F_vWXWmPsNEUKE94t5NitLmvJbFuu9kLhWHG2XJHspJ8ChhCMBDBahNMqwiJ_RBsyisqEqoUViOI8--3ghnLV3sEIty7I9Ceq6xpLn1_hq6AblAeW4AQBiAYBgAfoqMog%26ai2%3DCSIFof3P-UaXFFMbMigeO0YGQD6HsqYMEuZn-3ELDzLqjMxADIOfo-gEoA1CT6bngB2DlwuSDpA6gAYHssOYDyAEBqQK0UtHw0ZJRPuACAKgDAcgDnwSqBKoBT9DxJjD5FyHWTzRyHPWAZOtOd1YQkfnK6qLw054KPCGPHcyF4jZBMWAaXzWSSUWiTi0GhY2QtpTsYzcTEHZF3plH6NxNk-j9mopGqWfTHUX-9ZdaY-w0RXIQ3mXkKf-7S-tsg3ZsWjNpW6hakvvazVrfacYoNVaY_SDCNH6mesfjIOPygGeD3Dzb6A1w19Y2ws23Lsj0J3rrGkufX_W-pbMul7PM-Xf2xG3gBAGIBgGAB-eTzxk&usg=AFQjCNFVeSMNVEt1S9lBglOQhUriVsqgLQhttp://www.googleadservices.com/pagead/aclk?sa=L&ai=CSIFof3P-UaXFFMbMigeO0YGQD6HsqYMEuZn-3ELDzLqjMxADIOfo-gEoA1CT6bngB2DlwuSDpA6gAYHssOYDyAEBqQK0UtHw0ZJRPuACAKgDAcgDnwSqBKoBT9DxJjD5FyHWTzRyHPWAZOtOd1YQkfnK6qLw054KPCGPHcyF4jZBMWAaXzWSSUWiTi0GhY2QtpTsYzcTEHZF3plH6NxNk-j9mopGqWfTHUX-9ZdaY-w0RXIQ3mXkKf-7S-tsg3ZsWjNpW6hakvvazVrfacYoNVaY_SDCNH6mesfjIOPygGeD3Dzb6A1w19Y2ws23Lsj0J3rrGkufX_W-pbMul7PM-Xf2xG3gBAGIBgGAB-eTzxk&num=3&cid=5Gg0uj2GZdOAMcBDXm8KHmhL&sig=AOD64_3svAVwKj25dohCcSKEbGFIjeaTiQ&client=ca-pub-3440800076797949&adurl=http://www.maacindia.com/Design-Courses/Graphic-Webdesign-Courses.aspx%3FSource%3DdcoSTC%26kwrd%3D&nm=1http://www.googleadservices.com/pagead/aclk?sa=L&ai=CIabUf3P-UaXFFMbMigeO0YGQD-CjrIkEqKfH6WfAjbcBEAIg5-j6ASgDUMLQ7If9_____wFg5cLkg6QOoAGA17XfA8gBAakCtFLR8NGSUT7gAgCoAwHIA58EqgSkAU_QwTYR-Rcg1k80chz1gGTrTndWEJH5yuqi8NOeCjwhjx3MheI2QTFgGl81kklFok4tBoWNkLaU7GM3ExB2Rd6ZR-jcTZPo_ZqKRqln0x1F_vWXWmPsNEUKE94t5NitLmvJbFuu9kLhWHG2XJHspJ8ChhCMBDBahNMqwiJ_RBsyisqEqoUViOI8--3ghnLV3sEIty7I9Ceq6xpLn1_hq6AblAeW4AQBiAYBgAfoqMog&num=2&cid=5Gg0uj2GZdOAMcBDXm8KHmhL&sig=AOD64_1dZs96p5Um1Li9gh2lpyX7Rtcknw&client=ca-pub-3440800076797949&adurl=http://www.htcampus.com/landingpage/Animation-Colleges/%3Fcampaign_vendorid%3D2400319http://www.googleadservices.com/pagead/aclk?sa=L&ai=CjaaLf3P-UaXFFMbMigeO0YGQD9Sc2OQC5Lu02SfAjbcBEAEg5-j6ASgDUKTRmK4DYOXC5IOkDqAByJj69wPIAQGpArRS0fDRklE-4AIAqAMByAOfBKoEpAFP0ME0S_4XI9ZPNHIc9YBk6053VhCR-crqovDTngo8IY8dzIXiNkExYBpfNZJJRaJOLQaFjZC2lOxjNxMQdkXemUfo3E2T6P2aikapZ9MdRf71l1pj7DRFChPeLeSs9U1pyWxbrvZC4VhxtlyR7KSfAoYQjAQwWoTTKsIif0QbMorKhKqFFYjiPPvt4IZy1d7BCLcuyPQnqusaS59f4augJ5w3sOAEAYgGAYAHoOeFCA&num=1&cid=5Gg0uj2GZdOAMcBDXm8KHmhL&sig=AOD64_0LMBSx3pOcjlCjspPb7D_M1XBfqg&client=ca-pub-3440800076797949&adurl=http://www.arena-multimedia.com/campaigns/variations/university-diplomas-form.aspx%3FSource%3DCTwebdesigndiphttp://void%280%29/http://www.w3schools.com/browsers/browsers_display.asphttp://www.w3schools.com/browsers/browsers_os.asphttp://www.w3schools.com/browsers/browsers_stats.asphttp://www.dreamtemplate.com/?ref=w3txtfreehttp://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink2_400http://www.wix.com/eteamhtml/400?utm_campaign=ma_w3schools.com&experiment_id=ma_w3schools.comlink1_400Html&embed_tags=camp&utm_camp=hOUdCO-AmAMQm__j8AMhttp://www.altova.com/ref/?s=w3s_text&q=xmlspyhttp://www.webhosting.uk.com/cpanel-hosting.phphttp://www.heartinternet.co.uk/http://www.eukhost.com/http://www.lunarpages.com/id/w3schools/goto/w3schoolshttp://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_vertical_advancedhttp://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_verticalhttp://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_csshttp://www.w3schools.com/css/tryit.asp?filename=trycss_navbar_basic_htmlhttp://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_navbar.asp#http://www.w3schools.com/css/css_image_gallery.asphttp://www.w3schools.com/css/css_pseudo_elements.asphttp://www.w3schools.com/cssref/css_colorsfull.asphttp://www.w3schools.com/cssref/css_colornames.asphttp://www.w3schools.com/cssref/css_colors_legal.asphttp://www.w3schools.com/cssref/css_colors.asphttp://www.w3schools.com/cssref/css_units.asphttp://www.w3schools.com/cssref/css_websafe_fonts.asphttp://www.w3schools.com/cssref/css_ref_aural.asphttp://www.w3schools.com/cssref/css_selectors.asphttp://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/css/css_exam.asphttp://www.w3schools.com/css/css_quiz.asphttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/css/css_summary.asphttp://www.w3schools.com/css/css_attribute_selectors.asphttp://www.w3schools.com/css/css_mediatypes.asphttp://www.w3schools.com/css/css_image_sprites.asphttp://www.w3schools.com/css/css_image_transparency.asphttp://www.w3schools.com/css/css_image_gallery.asphttp://www.w3schools.com/css/css_navbar.asphttp://www.w3schools.com/css/css_pseudo_elements.asphttp://www.w3schools.com/css/css_pseudo_classes.asphttp://www.w3schools.com/css/css_align.asphttp://www.w3schools.com/css/css_float.asphttp://www.w3schools.com/css/css_positioning.asphttp://www.w3schools.com/css/css_display_visibility.asphttp://www.w3schools.com/css/css_dimension.asphttp://www.w3schools.com/css/css_grouping_nesting.asphttp://www.w3schools.com/css/css_padding.asphttp://www.w3schools.com/css/css_margin.asphttp://www.w3schools.com/css/css_outline.asphttp://www.w3schools.com/css/css_border.asphttp://www.w3schools.com/css/css_boxmodel.asphttp://www.w3schools.com/css/css_table.asphttp://www.w3schools.com/css/css_list.asphttp://www.w3schools.com/css/css_link.asphttp://www.w3schools.com/css/css_font.asphttp://www.w3schools.com/css/css_text.asphttp://www.w3schools.com/css/css_background.asphttp://www.w3schools.com/css/css_howto.asphttp://www.w3schools.com/css/css_id_class.asphttp://www.w3schools.com/css/css_syntax.asphttp://www.w3schools.com/css/css_intro.asphttp://www.w3schools.com/css/default.asphttp://www.stumbleupon.com/submit?url=http://www.w3schools.com/css/css_navbar.asp%26title%3DCSS%20Navigation%20Barhttp://digg.com/submit?url=http://www.w3schools.com/css/css_navbar.asp&title=CSS%20Navigation%20Barhttp://www.reddit.com/submit?url=http://www.w3schools.com/css/css_navbar.asphttp://delicious.com/save?v=5&noui&jump=close&url=http://www.w3schools.com/css/css_navbar.asp&title=CSS%20Navigation%20Barmailto:?&subject=CSS%20Navigation%20Bar&body=Take%20a%20look%20at%20this%20page%20at%20W3Schools.com:%20http://www.w3schools.com/css/css_navbar.asphttp://twitter.com/home?status=Currently%20reading%20http://www.w3schools.com/css/css_navbar.asphttp://www.facebook.com/sharer.php?u=http://www.w3schools.com/css/css_navbar.asphttp://adclick.g.doubleclick.net/aclk?sa=L&ai=B2a_Gf3P-UdjAE-OCiAfqwoHoCo_fz4gDAAAAEAEg5-j6ATgAWI_--Y1IYOXC5IOkDrIBEXd3dy53M3NjaG9vbHMuY29tugEJZ2ZwX2ltYWdlyAEJ2gEraHR0cDovL3d3dy53M3NjaG9vbHMuY29tL2Nzcy9jc3NfbmF2YmFyLmFzcKkC6BjGZZyahj7AAgLgAgDqAhovMTY4MzMxNzUvVG9wTGVmdFJlY3RhbmdsZfgCgdIekAOaCJgDyAaoAwHQBJBO4AQBoAYW&num=0&sig=AOD64_3wzfBQhHt5ZiXpu0QnBLLhO5Hi_A&client=ca-pub-3440800076797949&adurl=http://w3schools.com/cert/default.asphttp://www.w3schools.com/about/default.asphttp://www.w3schools.com/forum/default.asphttp://www.w3schools.com/sitemap/default.asp#exampleshttp://www.w3schools.com/sitemap/default.asp#referenceshttp://www.w3schools.com/sitemap/default.asphttp://www.w3schools.com/sql/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/aspnet/default.asphttp://www.w3schools.com/xml/default.asphttp://www.w3schools.com/jquery/default.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/css/default.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/default.asphttp://www.w3schools.com/


2/3


3/3


www.w3schools.com/css/css_navbar.asp 3/3

REPORT ERROR | HOME | TO P | PRINT | FORUM | ABOUT | ADVERTISE WITH US

W3Schools' Online Certification

The perfect solution for professionals who need to balance work, family,

and career building.

More than 10 000 certificates a lready issued!

Get Your Certificate

The HTML Certificate documents your knowledge of HTML.

The HTML5 Ce rtificate documents your know ledge of advanced HTML5.

The CSS Certificate documents your knowledge of advanced CSS.

The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.

The jQuery Certificate documents your know ledge of jQue ry.

The XML Certificate documents your knowledge of XML, XML DOM and XSLT.

The ASP Certificate documents your knowledge of ASP, SQL, and ADO.

The PHP Ce rtificate documents your knowledge of PHP and SQL (MySQL).

Top 10 Tutorials

HTML Tutorial

HTML5 Tutorial

CSS Tutorial

CSS3 Tutorial

JavaScript Tutorial

jQuery Tutorial

SQL TutorialPHP Tutorial

ASP.NET Tutorial

XML Tutorial

Top 10 References

HTML/HTML5 Reference

CSS 1,2,3 Reference

CSS 3 Browser Support

JavaScript

HTML DOM

XML DOM

PHP ReferencejQuery Reference

ASP.NET Reference

HTML Colors

Examples

HTML Examples

CSS Examples

XML Examples

JavaScript Examples

HTML DOM Examples

XML DOM Examples

AJAX ExamplesASP.NET Examples

Razor Examples

ASP Examples

SVG Examples

Quizzes

HTML Quiz

HTML5 Quiz

XHTML Quiz

CSS Quiz

JavaScript Quiz

jQuery Quiz

XML QuizASP Quiz

PHP Quiz

SQL Quiz

Color Picker

Statistics

Browser Statistics

Browser OS

Browser Display

W3Schools is optimized for learning, testing, and training. Examples might be simplified to improve reading and basic understanding.Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content.

While using this site, you agree to have read and accepted our terms of use and privacy policy.Copyright 1999-2013 by Refsnes Data. All Rights Reserved.
http://www.googleadservices.com/pagead/aclk?sa=L&ai=Cfq3xf3P-UdLCFKuBiAfnk4DoA-6Kg9oF7pObrnj70vLaFhABIOfo-gFQq5TStvn_____AWDlwuSDpA6gAYrz9MkDyAEC4AIAqAMByAOdBKoErQFP0GMi3XmHFJqE3TG5jlXWgNmycnHJT5aO7q2MwmXmUyfQywzCEdXRhAasPveoNaeTxHCjw5Ky-2GmO6FMgAfGME25-jLG1l13mJresyrB8eiF8-JilT7qMKhpRI_JsAy3fWNcPoElvSBgvh7PfbxoDryovp3m0qGVMiPF1PUOn6gHTWAw0OqeyasslD3Im6vl0DxGn26ZX7WjTCY-2ARVAASXLudPYkvkEdo6eeAEAYgGAaAGAoAH3oyLNg&num=1&cid=5GhL2ryHGgEbgp_IqqMEkCs3&sig=AOD64_1wwrvtmuPkE9a8EoraEJUZaG0WOw&client=ca-pub-3440800076797949&adurl=http://www.neo4j.org/downloadhttp://www.w3schools.com/about/about_copyright.asphttp://www.w3schools.com/about/about_privacy.asphttp://www.w3schools.com/about/about_copyright.asphttp://www.w3schools.com/browsers/browsers_display.asphttp://www.w3schools.com/browsers/browsers_os.asphttp://www.w3schools.com/browsers/browsers_stats.asphttp://www.w3schools.com/tags/ref_colorpicker.asphttp://www.w3schools.com/quiztest/quiztest.asp?qtest=SQLhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=PHPhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=ASPhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=XMLhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=jQueryhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=JavaScripthttp://www.w3schools.com/quiztest/quiztest.asp?qtest=CSShttp://www.w3schools.com/quiztest/quiztest.asp?qtest=XHTMLhttp://www.w3schools.com/quiztest/quiztest.asp?qtest=HTML5http://www.w3schools.com/quiztest/quiztest.asp?qtest=HTMLhttp://www.w3schools.com/svg/svg_examples.asphttp://www.w3schools.com/asp/asp_examples.asphttp://www.w3schools.com/aspnet/webpages_examples.asphttp://www.w3schools.com/aspnet/aspnet_examples.asphttp://www.w3schools.com/ajax/ajax_examples.asphttp://www.w3schools.com/dom/dom_examples.asphttp://www.w3schools.com/htmldom/dom_examples.asphttp://www.w3schools.com/js/js_examples.asphttp://www.w3schools.com/xml/xml_examples.asphttp://www.w3schools.com/css/css_examples.asphttp://www.w3schools.com/html/html_examples.asphttp://www.w3schools.com/tags/ref_colornames.asphttp://www.w3schools.com/aspnet/webpages_ref_classes.asphttp://www.w3schools.com/jquery/jquery_ref_selectors.asphttp://www.w3schools.com/php/php_ref_array.asphttp://www.w3schools.com/dom/dom_nodetype.asphttp://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/jsref/default.asphttp://www.w3schools.com/cssref/css3_browsersupport.asphttp://www.w3schools.com/cssref/default.asphttp://www.w3schools.com/tags/default.asphttp://www.w3schools.com/xml/default.asphttp://www.w3schools.com/aspnet/default.asphttp://www.w3schools.com/php/default.asphttp://www.w3schools.com/sql/default.asphttp://www.w3schools.com/jquery/default.asphttp://www.w3schools.com/js/default.asphttp://www.w3schools.com/css3/default.asphttp://www.w3schools.com/css/default.asphttp://www.w3schools.com/html/html5_intro.asphttp://www.w3schools.com/html/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/cert/default.asphttp://www.w3schools.com/about/about_advert.asphttp://www.w3schools.com/about/default.asphttp://www.w3schools.com/forum/default.asphttp://www.w3schools.com/css/css_navbar.asp?output=printhttp://www.w3schools.com/css/css_navbar.asp#tophttp://www.w3schools.com/default.asphttp://www.w3schools.com/css/css_navbar.asphttp://www.w3schools.com/

CSS Navigation Bar

Documents

Transcript of CSS Navigation Bar