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

Networking for the Cloud Era

Join Microsoft and Riverbed for a discussion and demonstration of enhancements to SteelConnect:
-One-click orchestration and cloud connectivity in Azure environments
-Tight integration of SD-WAN and WAN optimization capabilities
-Scalability and resiliency equal to a data center

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Divi Theme - extra fonts I don't want 13 40
Make Line Items Look Good Over Mobile 2 80
Help in good tutorials for PHP, HTML and CSS 6 40
Insert Button on a table 16 36
So you have coded your own WordPress plugin and now you want to allow users to upload images to a folder in the plugin folder rather than the default media location? Follow along and this article will show you how to do just that!
Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
In this tutorial viewers will learn how to define a gradient in CSS. Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Gradient. Define the background as "linear-gradient(to right, #ee3668, black)". Ensure you …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

792 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