Turning bulleted text into hortizonal nav

Posted on 2011-09-02
Last Modified: 2012-05-12
Please look at this test page:

You will see two "navigation bars".  The top one and the bottom one.  I am trying to get the bottom navigation to look more like the top one -- that is, remove the bullets and make the text horizontal instead of vertical.  Below is the controlling css for the bottom nav.  

Looking forward to your suggestions / solutions.



#header	{	background:url( no-repeat; height:79px; }
	.nav_wrapper	{	float:right; width:600px; padding-top:35px; background:none;}
	.nav_wrapper a:hover	{	background:url( repeat-x;}
	#primary_nav li	{	}
	#primary_nav li a {		color:#000000; padding:9px 8px 4px; font-family:Helvetica,Arial,sans-serif; font-size:12px; font-weight:normal;}
	#container		{	width:990px; margin:0px; border:none;		}
	#primary_nav li a:hover	{	text-decoration:none;	}
	#footer	{	width:990px; margin:0;	}
	#bottom_nav 	{	width:990px; margin:0;	}

#primary_nav .nav_wrapper {
    position: relative;
    top: 15px;
.nav_wrapper {
    background: none repeat scroll 0 0 transparent;
    float: right;
    padding-top: 35px;
    width: 600px;
    #primary_nav .nav_wrapper {
    position: relative;
    top: 15px;
.nav_wrapper {
    background: none repeat scroll 0 0 transparent;
    float: right;
    padding-top: 35px;
    width: 600px;

Open in new window

Question by:Rowby Goren
LVL 30

Accepted Solution

LZ1 earned 500 total points
ID: 36474262
For your #primary_nav li

Just add this:
    float: left;
    list-style: none outside none;

Author Closing Comment

by:Rowby Goren
ID: 36475216
Bravo, LZ1

That fixed it perfectly.



Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Hovering effect 9 47
HTML date format to popup calendar as soon as you click 7 40
Adjust the position 3 49
Divi Them Help with Full Width header 20 22
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how add a full-size background image to a webpage using CSS3. Create a new HTML document with an internal stylesheet.: In CSS, define the html element to have a background image. Use a high resolution image.: In t…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

920 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now