How to style a <nav> element with CSS

[Carla@home]

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

[Nancy OShea]

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.

[Carla@home]

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]

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.

[Carla@home]

I've tried that out but it won't give me the results as with the use of lists. I think you can better use it for a very tiny side and stick to the lists with a more detailed structured site. But thanks for helping me out.

[mytaxsite]

Carla@home wrote:

I've tried that out but it won't give me the results as with the use of lists. I think you can better use it for a very tiny side and stick to the lists with a more detailed structured site. But thanks for helping me out.

Don't give up so easily.  It is possible to style it using just css and no lists:

<http://www.mytechnet.talktalk.net//menu-test03.html>

People were using just plain links in the bad old days to create navigation on their site until some smart guy came out with the idea of using lists.  I think it was Eric Meyer but I might be wrong.

[Nancy OShea]

I'm not saying you can't use <nav> element without <ul> <li> tags.  You certainly can but I think it makes your work harder not easier.

Nancy O.