Skip to main content
Carla@home
Participant
August 31, 2013
Question

How to style a <nav> element with CSS

  • August 31, 2013
  • 1 reply
  • 15461 views

Hello, I'm a newbie to HTML and CSS and i have a question about CSS styling.

How do I style a <nav> element with CSS properties and values without the use of <ul> and <li>-HTML elements. On the web you will find a lot tips & tricks of styling navigation menus with the use of <ul> and <li> but not without the use of them.

By default the <nav>-element will be displayed horizontally.

How can I achieve that the line will be displayed (spread) in the full length of the body with the use of the example?

example:

<nav  role="navigation">

<a href="#">Home</a>

  <a href="#">About</a>

  <a href="#">Clients</a>

  <a href="#">Contact Us</a>

</nav>

I like to hear from you.

Thanks, Carla@home

This topic has been closed for replies.

1 reply

Nancy OShea
Community Expert
Community Expert
August 31, 2013

Hi Carla,  welcome to the Dreamweaver forum

It's standard web practice to use lists for menus.  The reason is for semantic structure and to provide hooks for the CSS to grab onto.  Below is a CSS styled horizontal drop-menu:

http://alt-web.com/DEMOS/CSS-Multi-colored-drop-menu.shtml

Nancy O.

Nancy O'Shea— Product User & Community Expert
Carla@home
Participant
August 31, 2013

Hi Nancy, thanks for your quick reply. I will hook on to your advice. I also read an article on the W3.org that is allowed to use the <nav> without the common <ul> and <li>. Anyway it gave me a lot of headache to figure it out.

Thanks again.

Carla@home

mytaxsite
Inspiring
August 31, 2013

Carla@home wrote:

Hi Nancy, thanks for your quick reply. I will hook on to your advice. I also read an article on the W3.org that is allowed to use the <nav> without the common <ul> and <li>. Anyway it gave me a lot of headache to figure it out.

Thanks again.

Carla@home

You could try something like this:

nav a {

    padding: 30px;

    border: 1px blue solid;

}

The html5 tags (nav in your case) will not work in IE8  (and <) unless you use html5shiv.