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

How to style a <nav> element with CSS

  • August 31, 2013
  • 1 reply
  • 15457 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
Nancy OShea
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
Carla@homeAuthor
New 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
mytaxsite
Inspiring
September 1, 2013

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.


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.

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices