CSS - Horizontal Inline Nested List - Subs Won't Align

Hi all,

Im hoping someone out there can help me.

Ive just discovered ive made a massive mistake by designing my site and viewing it in IE. It looks fine in IE, but of course there is one part that looks terrible in FF ( not FFs fault i know!)

The navigation bar is an inline list that is supposed to appear tabbed but in FF one of the tabs is pushed up a lot higher and I cant figure out what is pushing it up. i thought it might be the #ul secondary pushing it up (as this appears a bit wonky as well...)and i tried adding /* Hides from IE-mac \*/

#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */

but this didnt change anything. i tried using the DOM inspector that comes with firebug but I still cant figure out whats pushing up the one home page tab....

Any tips anyone might have would be greatly appreciated.



My style sheets is




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

2 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


#content-container-two-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;
position:relative;
margin-bottom: 50px;
}

#content-main-two-column {
width:728px;
float:left;
}

#content-side-two-column {
float:right;
width:160px;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

3 column container

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#content-container-three-column {
margin-top:3px;
margin-left:auto;
margin-right:auto;
padding:10px;
width:728px;


position:relative;
}

#content-main-three-column {
width:355px;
float:left;
margin-left:25px;
}

#items-left {
width:148px;
float:left;
margin-right: 45px;

}

#items-right {
width:148px;
float:right;
margin-right: 45px;

}





#content-side2-three-column,
#content-side1-three-column {
width:150px;
font-size:1.1em;
}



#content-side2-three-column {
float:right;
}

#content-side1-three-column {
float:left;
}

/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

index page

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#three-column-container {
background:url(../../images/bg-three-column-home.png) repeat-y;
padding:0;
margin:20px 0 10px 0;
}

#three-column-side1 {
float:left;
width:148px;
margin-right: 45px;
}

#three-column-side2 {
float:right;
width:142px;
background-color: #E9E9E9;
padding-left: 2px;
padding-right: 2px;
}
.centre {
background-position: center;
margin-bottom: 5px;
text-align: center;
padding: 0px;
}


#three-column-side22 {
float:right;
width:148px;
}

#three-column-middle {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


#three-column-middle-air {
width:340px;


margin:0px 10% 0px20%;
margin-right: 10%;
margin-left: 20px;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

html

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

body {
margin:0px;
background-color:#FFFFFF;
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:0.7em;
line-height:1.4em;
color:#666666;
}

p {
margin:10px 0;
}

p.no-padding-no-margin {
padding:0;
margin:0;
}

hr{
color: #E5E5E5;
background-color: #E5E5E5;
height: 1px;
border:0;
margin:15px 0;
_margin:10px 0;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

headings

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/


h1, h2, h3, h4, h5, h6 {
font-size:1.8em;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.1em;
margin:5px 0;
}

h1 {
margin-bottom:0;
}

h1, h2 {
margin-top:0px;
}

h2 {
font-size:1.3em;
}

h3 {
font-size:1.1em;
}

h3.small {
font-size:1.2em;
}

h4 {
font-size:1.1em;
}

h5 {
font-size:1.1em;
}

h6 {
font-size:1em;
}


a:link {
color:#d61719;
text-decoration:none;
}

a:visited {
color:#980000;
text-decoration:none;
}

a:hover {
text-decoration:none;
}

a:active {
color:#980000;
}

#content-side-two-column a:link,
#content-side2-three-column a:link,
#content-side1-three-column a:link,
#content-side-two-column a:visited,
#content-side2-three-column a:visited,
#content-side1-three-column a:visited {
text-decoration:none;
}

#content-side-two-column a:hover,
#content-side2-three-column a:hover,
#content-side1-three-column a:hover {
text-decoration:underline;
}



.img_text {

float:left;
margin-top:0px;
margin-right:10px;
margin-bottom:0px;

}




#poster-photo-container {

margin-left:auto;
margin-right:auto;
width:750px;

position:relative;
}

.poster-photo-image {

display:block;

}


ul {
margin:0;
padding:0;
list-style:none;
}

li {
list-style:none;
background:url(../../images/list-bullet-02.gif) no-repeat 0 .8em;
padding:.2em 0 .2em 1em;
margin-left:0.4em;

}



#content-side1-three-column ul.list-of-links,
#content-side2-three-column ul.list-of-links {
margin: 0 0 30px 0px;
}

ul.list-of-links li{

background-image:url(../../images/list-bullet-01-link.gif);
}

ul.list-of-links li.current {
background-color:#E5E5E5;
}


ul.no-lines,
ul.no-lines li {
border:none;
}



.feature-area {
background-color:#6799D1;
}


/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

images

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

img {
border:none;

}

.img_footer {
border:none;
padding-right:10px;

}
.photo-border {
padding:0px;
margin-bottom:5px;
display:block;

/*background-image: url(../../images/bg-photo.png);
background-repeat: repeat-x;
background-position: top;*/
}

.photo-float-left {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:40px;

}

.photo-float-details {
float:left;
margin-left:0px;
margin-right:10px;
margin-top:0px;
margin-bottom:1px;

}

.image-border-none {
border:none;
}




/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*

FOOTER

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/

#footer {
margin-top:3px;
margin-left:auto;
margin-right:auto;
width:740px;
padding:.8em 0 1em 10px;
position:relative;
font-size:0.9em;
text-align: center;
}



#footer a:link,
#footer a:visited {
color:#555450;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:hover {
color:#64645c;
text-decoration:none;
padding:0px 0px 0px 10px;
}

#footer a:active {
color:#FFFFFF;
padding:0px 0px 0px 10px;
}






.arrow {
vertical-align:middle;
}



.clear {
clear:both;
}

.none {
display:none;
}

.dent {
margin-left: 20px;
}



/*Tabs*/


html, body {
margin: 0px;
padding: 0px;
}

body {
text-align: left;
}

#Wrapper {
font-family: Georgia, Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #333333;
text-align: left;
width: 750px;
margin-top: 20px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
padding: 0px;
}

#Container {
background-color: #FFFFFF;
color: #333;
clear: both;
margin: 0px;
padding-top: 2.2em;
padding-right: 0;
padding-bottom: 0;
padding-left: 0;
width: 750px;
float: left;
border-top: 1px solid #C0C0C0;
display: block;
}




#Content {
background-color: #FFFFFF;
border-top-width: 1px;
border-top-style: solid;
border-top-color: #C0C0C0;
padding-bottom: 20px;
margin: 0px;
width: auto;
height: auto;
}

#Navigation {
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight:bold;
color: #333333;
position: relative;
height: 50px;
display: block;
width: auto;
}
ul#primary {
margin: 0;
padding: 0;
position: absolute;
bottom: -1px;
width: 728px;
}

ul#primary li {
display: inline;
list-style: none;
}

ul#primary a,ul#primary a.active {
width: 10em;
display: block;
float: left;
text-align: center;
font-family: tahoma, verdana, sans-serif;
font-size: 12px;
text-decoration: none;
color: #333;
letter-spacing: .1em;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0;
margin-left: 0;
padding-top: 4px;
padding-right: 0;
padding-bottom: 4px;
padding-left: 0;
}




ul#primary a.active,ul#primary a.active:hover {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
background: #ffffff;
color: #333;
margin-top: 0;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 4px;
padding-left: 0px;
}




ul#primary a {
border-top: 1px solid #c0c0c0;
border-right: 1px solid #c0c0c0;
border-bottom: none;
border-left: 1px solid #c0c0c0;
margin-top: 0px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
background: #e8e9e1;
}

ul#primary a:hover {
margin-top: 1;
border-color: #c0c0c0;
color: #333;
padding-bottom: 3px;
margin-right: 2px;
margin-bottom: 0px;
margin-left: 0px;
padding-top: 4px;
padding-right: 0px;
padding-left: 0px;
background: #e9eaea;
}
ul#secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -21px;
left: 1px;
width: 100%;
}

/* Hides from IE-mac \*/
#ul secondary {
position: absolute;
margin: 0;
padding: 0;
bottom: -41px;
left: 1px;
width: 100%;
}
/* End hide from IE-mac */



ul#secondary li a {
width: auto;
display: block;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}

/* Hides from IE-mac \*/
#ul secondary li a {
width: auto;
display: inline;
float: left;
padding: 0 10px;
margin: 0;
text-align: center;
border-top: none;
border-right:none;
border-bottom: none;
border-left: none;
background: none;
color: #666;
background-color: #FFFFFF;
text-decoration: none;
}
/* End hide from IE-mac */

ul#secondary li a:hover {
color: #333;
border-top: none;
border-bottom: none;
border-left: none;
margin: 0px;
padding-top: 0;
padding-right: 10px;
padding-bottom: 0;
padding-left: 10px;
background: none;
}

ul#secondary li a:active {
color: #000;
font-weight: bold;
}

ul#secondary li:last-child a {
border: none;
}

.bold {

font-weight:bolder;
color:#000000;}


#number {

width:20opx; }



And some of the html

<div id="Wrapper">
<img src="pics/logo2.gif" align="right" />
<div id="Navigation">
<ul id="primary">
<li><a href="index.html" class="active">Home</a></li>
<li><a href="print.html">Printing</a>

<ul id="secondary">
<li><a href="about.html">About us</a></li>
<li><a href="environment.html">Environment</a></li>
<li><a href="links.html">Links</a></li>
</ul>
</li>
<li><a href="products.html">Products</a></li>
<li><a href="cart">View Cart</a>
<li><a href="contact.html">Contact us</a></li> </ul>
</div>
<div id="Container">
<div id="Content">
<div id="poster-photo-container"><img src="pics/header6.jpg" alt="" class="poster-photo-image" /></div>
<div id="content-container-two-column">
<div id="content-main-two-column">
<h1>
Welcome to The Picture Works Printing Room</h1>

Ok, i have this menu with links, but i have a few problems.

1) Don't know why, but i can't center the menu links. There is more space from left to the menu, than from the right to the end of the menu.

2) I'd like to change the properties of each link (using CSS) individually, so i can resize each one like i want. I've done it, but it nly worked in IE.

here's the site

PS: I still haven't converted pictures to .gif, so it takes a little bit to load all pictures (3).

Damn another problem good thing you guys are so helpful....

What am I doing wrong here?

css
Code:

#footer{
	position:relative;
	z-index:-1;
	margin-top:-50px;
	background-color:#666666;
	width:100%;
	height:100px;
	margin-left:auto;
	margin-right:auto;
	border-top:#000000 10px solid;
}
#footer ul{
	position:absolute;
	padding:0px;
	margin-top:50px;
	margin-left:auto;
	margin-right:auto; 
}
#footer li{
	display:inline;
	padding:0px;
	margin:0px;
}
#footer a{
	font-family:Arial, Helvetica, sans-serif;
	font-size:10px;
	
	border-right:#FFFFFF 1px solid;
}

html
Code:

<div id="footer">
	<ul>
    	<li><a href="#">Nav 1</a></li>
        <li><a href="#">Nav 2</a></li>
        <li><a href="#">Nav 3</a></li>
        <li><a href="#">Nav 4</a></li>
        <li><a href="#">Nav 5</a></li>
        <li><a href="#">Nav 6</a></li>
        <li><a href="#">Nav 7</a></li>
    </ul>

</div>

Just can't seem to get the list centered inside the div

I'm having trouble understanding how to vertically center an inline list in a div. Can anyone recommend some reading?

The list is used for a horizontal nav bar with a background. I've set the height of the div to 20px because that's the height of the bg image.

Also: Should the font specs be where they are (#nav ul) or maybe in the #nav section?

Here's the code:

Code:

#nav {
background: url(../images/nav_bg2.gif);
text-align: center;
overflow: hidden;
height: 20px;
}
#nav ul{
margin:0;
padding:0;
list-style:none;
}
#nav li{
font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
font-size: 0.75em;
display:inline;
margin:0;
padding:0;
}

Hello,
I am trying to display a three column menu (each column is a list). I created a single container. Within that I created three more containers(each about 33% width). Each internal <div> for the separate columns are set to inline. When I put text in each of the 4 pairs of <divs> they display side by side. Just fine. But If the DIV contains a list, despite the fact that the DIVs defined as inline, it still drops to the next line and things like the background color don't even render. All of the box styles are identical except for the background color.

Shouldn't the <DIV> (defined with the display:inline) let me place whatever I want inside it? Just out of curiosity, I changed the first column into a 1 item list and it sifted to the right,.I don't know what that was based on. It also seemed to act like a block display, everytning went to the next line, and the background color was ignored. But the color attribute did render. ????? I haven't seen anything discussing the issues with defining lists inside of inline DIVs. I'm working with Firefox because that follows the standards better than IE although I have to make it work w/ IE too. What did has me pounding my head is how a UL tag seems to wipe out most (but not all) of the settings for the DIV containing it.

I am thinking of making the columns each list items as a work around but I don't know why what I tried doesn't work.

Thanks!

Randy

This is an simple example:
Code:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
#box1 {
width:100px;
height:100px;
background-color:#FFFF33;
display:inline;
}

#box2 {
width: 100px;
height: 100px;
background-color:#FF8833;
display:inline;
}

#box3 {
width: 100px;
height: 100px;
background-color:#88FF33;
display:inline;
}

#box4 {
width: 100px;
height: 100px;
background-color:#CCCCCC;
display:inline;
}

#container {
width: 550px;
height 150px;
background-color:#CC66FF;
}

li {
list-style:none;
}

</style>
</head>

<body>
<div id="container">
<div id="box1">Column 1</div>
<div id="box2">Column 2</div>
<div id="box3">Column 3</div>
<div id="box4">
<ul>
<li>Column 4</li>
</ul>
</div>
</body>
</html> 

I am not getting the right behaviour from my css in a nested list i made for a menu.

here is the css for the menu
Code:

#main_menu{
	position: absolute; top: 252px; left:30px;
	margin:0;
	padding:0;
}
#menu_item_1{
	list-style-type: none;
}
#menu_item_1 a{
	color:#11352B;
	text-decoration:none;
	font-weight:300;
	vertical-align:text-top;
}
#menu_item_1 a:hover{
	color:#007888;
	text-decoration:underline;
	font-weight:300;
	vertical-align:text-top;
}
#menu_item_2{
	list-style-type: none;
}
#menu_item_2 a{
	color:#007888;
	text-decoration:none;
	font-weight:300;
	vertical-align:text-top;
}

and here is the xhtml section showing the menu
Code:

<ul id='main_menu'>
	<li id='menu_item_1'><a href='index.php'>Home</a></li>
	<li id='menu_item_1'><a href='about_us.php'>About Us</a></li>
	<li id='menu_item_1'><a href='customers.php'>Customers</a></li>
	<li id='menu_item_2'><a href='products.php'>Products</a></li>
	<ul>
		<li id='menu_item_1'><a href='atlas2000.php'>Atlas 2000</a></li>
		<li id='menu_item_1'><a href='atlas2000.php'>Web Request</a></li>
		<li id='menu_item_1'><a href='atlas2000.php'>Atlas Mailer</a></li>
	</ul>
	<li id='menu_item_1'><a href='service.php'>Service</a></li>
	<li id='menu_item_1'><a href='download.php'>Download</a></li>
	<li id='menu_item_1'><a href='support.php'>Support</a></li>
	<li id='menu_item_1'><a href='contact_us.php'>Contact Us</a></li>
</ul>

the main list works great but the sublist the color is wrong, it should behave like the main one does....I think I have not structured my css correctly, but can not figure it out.

hmmmm i want a nested list for a navigation menu, vertical on the left side all buttons aligned with 1px margin in between

ok it almost works but i cant get rid of the extra list item that contains the nested list

how does it not show itself

I think I know the answer to this already but maybe there is a magical way.
I have pages in the root directory with a css subdirectory. I am going to create another sub to root for admin so it is secure and add pages there. Is there a way to use the same stylesheet for both the root and the admin sub? For instance in the stylesheet an entry looks like this:
background: url(../images/lblue047470583.gif);
for a background to a div. I take it that this from whatever directory the actual page is in. So is there another way so I don't have to copy the stylesheet and all the other items over to the admin subdirectory?

tnx

tk

As the title says...

Design constraints unfortunately mean I need to do achieve the basic design shown in the example below (using a list)

I have created an example to illustrate the problem I am experiencing.

Problem example

The list item text is wrapping too early in IE6 and IE7, though fine in my other target browsers such as Firefox and Opera.

removing clear:left stops the wrapping, but then when 2 or more nav items have short content they sit on the same line which is no good obviously

Any ideas / solutions etc. would be most welcome

I think I have the basics down to making my ul navigation list display as a nav bar. The rules I am using are Code:

div#navigation
{
   background: #7799aa;
   color: #ffffff;
   margin: 4px 0 0 0;
}
   div#navigation ul { list-style-type: none; margin: 0; padding: 8px; }
      div#navigation ul li { margin-right: 50px; width: 200px; display: inline; }
      div#navigation ul li a { color: #ffffff; width: 400px; }
      div#navigation ul li a:hover { background: #255599; }

and the corresponding html Code:

<div id="navigation">
      <ul>
         <li><a href="/" title="The Company">Company</a></li>
         <li><a href="/" title="Our Solutions">Projects</a></li>
         <li><a href="/" title="What We Do">Services</a></li>
         <li><a href="/" title="Contact Us">Contact</a></li>
         <li class="last"><a href="/" title="What people are saying">Testimonials</a></li>
      </ul>
   </div> <!-- navigation -->

Now, the problem is that I am trying to make the links seem like "buttons" or blocks. I cannot get them to a) have a width; or b) expand to the width of the list item (which I cannot give a specified width to either).

I am still working with the design in firefox so I haven't ventured into getting it to work in IE. The XHTML is completely valid as is the rest of the stylesheet. I can post more if necessary, but does anyone have a bone?

Hi ppl
I'm trying to figure out how to do the following list, with CSS



Is there any way that the boxes can accomodate themselves based on the width of their container's space?

I mean, if the width of the site is reduced, maybe some box from the 1st row will go down, and so...

Thanks

Hi,

I'm trying to make a horizontal list using li tags. I got the text to align horizontally but the bullet icons I want to use (or even when I try with the default bullets) don't appear.

Can anyone help me out with this? Here's the code :


Code:

#onlineToolsNav ul {
	margin-top: 0px;
	margin-bottom : 0px;
	margin-left : 5px;
	padding: 0px;
	line-height: 25px;
	white-space: nowrap;
	display : inline;
}

#onlineToolsNav li {
	display: inline;
	list-style-image: url(onlineArrow.jpg);
	list-style: url(onlineArrow.jpg);
}

#onlineToolsNav li:before {
	content: url(onlineArrow.jpg);
	}
	
#onlineToolsNav li.first:before {
	content: " ";
	}

  <div id="onlineToolsNav"> 
    <ul>
      <li><a href="link1.html">link1</a></li>
      <li><a href="link2.html">link2</a></li>
      <li><a href="link3.html">link3</a></li>
      <li><a href="link4.html">link4</a></li>
      <li><a href="link5.html">link5</a></li>
      <li><a href="link6.html">link6</a></li>
    </ul>
  </div>

Thanx
Olografix

I've been fighting with this for a good couple of days here so I figure it's time to come ask people who might have a better idea than I do.

I've been trying to get this list to display on a horizontal bar. It's not a navigation bar that's an integral part of the site's layout, just an unordered list that I need to have go across a line instead of down. I got the code from a site that does pre made menus because I'm still new to all of this so, you know, blah life story. Ha.

My HTML looks like this:

Code:

<li><a href="#url">2005<!--[if gte IE 7]><!--></a><!--<![endif]-->
	<!--[if lte IE 6]><table><tr><td><![endif]-->
		<ul class="sub pos1">
			<li><a class="sub2" href="#">August<!--[if gte IE 7]><!--></a><!--<![endif]-->
		<!--[if lte IE 6]><table><tr><td><![endif]-->
				<div class="border b1"></div>
					<div class="base div1">
					<h4>August 2005</h4>
					<p>August 29</p>
                          <p>New school division office will be in Weyburn</p>
                         <ul>   
				<li><a href="#url">Section 1</a></li>
				<li><a href="#url">Section 2</a></li>
				<li><a href="#url">Section 3</a></li>
			</ul>
					</div>
					</div>
				<!--[if lte IE 6]></td></tr></table></a><![endif]-->
			</li>

and I'm still not really sure what part of the code is the CSS affecting this but I think? it's this:

Code:

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul {float:left; padding:0; margin:0; list-style:none; width:200px;}
#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li {display:block; float:left; width:150px; height:auto; padding:0; margin:0;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a {width:190px; padding-left:10px; background:#fff url(vertical-list/dot.gif) no-repeat left center; color:#000; border:0; margin:0; height:auto; line-height:18px;}

#verticalNav :hover ul.toplevel :hover ul.sub :hover div.base ul li a:hover {color:#069;}

Is there a way to over ride this code so I can put the list on a single line? I'm staring at the emoticon bashing its head against a wall and it seems pretty accurate at this point.

I have read more tutorials on list than I care to recall and still I am having difficulties getting this to work right.

Here is the web page

The top navigation bar has a link "Other regions".

I want to have a drop down list of the other regions under it.

I nested a list under the "Other regions" li. It is working - sort of but not correctly.

The nested list is showing up under "home" and the are all on top of each other.

Here is the html:
Code:

	<div id="topbar">
  	<ul>
		
      <li><a href="index.html">Home</a></li>
		
      <li><a href="about_us/about_us.html">About Us</a></li>
		
      <li class="dropmenu"><a href="other_regions.html">Other Regions</a> 
        <ul>
          <li><a href="#">Ireland</a></li>
          <li><a href="#">Germany</a></li>
          <li><a href="#">USA (North America)</a></li>
          <li><a href="#">Latin America</a></li>
          <li><a href="#">Other</a></li>
        </ul>
      </li>
   	</ul>
  	</div>

Here is the css:
Code:

#topbar {
	height: 20px;
	background-color: #3399FF;
	border: 1px solid #000099;
	padding-left: 10px;
	margin-bottom: 10px;
	text-align: left;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-size: 12px;
	font-weight: bold;
}

#topbar a:link, #topbar a:visited {
	color: #FFFFFF;
	background-color: transparent;
	border: 1px solid #3399FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar a:hover, #topbar a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

#topbar ul {
	list-style: none;
	margin: 1px 0px 1px 0px;
	padding: 2px 0px 0px 0px;
}

#topbar li {
	display: inline;
	margin-right: 150px;
}


.dropmenu ul  {
	position: relative;
}

.dropmenu li  {
	position: absolute;
	
}

.dropmenu  a:link, .dropmenu  a:visited {
	color: #000000;
	background-color: transparent;
	border: 1px solid #FF00FF;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu  a:hover, .dropmenu  a:active {
	color: #000099;
	background-color: #DDEEFF;
	border: 1px solid #000099;
	width: 100px;
	padding: 1px 2px 1px 2px;
	font-family: Verdana, Geneva, Arial, Helvetica, sans-serif;
	font-size: 12px;
	font-weight: bold;
	text-decoration: none;
}

.dropmenu li:hover ul { display: block; }


/*Main Section two columns under top section*/

#wrapper{
	width: 100%;
	min-height: 519px;
	background: url(../images/bgcol.gif) repeat-y;
	padding: 0px;
	margin: 0px;
}

Help please