I've got my header area set up with a custom widget that has my logo in it with a search box under it in 1 cell, and the other cell has a photo & link.

Under that is my menu bar, which I have shifted up and to the left so that the right edge aligns with the right edge of my logo.

Then I have bar1.

I'd like to have a line under that pages menu that is the same length as my logo.

I tried moving bar 1 up, but couldn't get it to work--I could only add space under it, not take any away above it.

I also tried adding an html horizontal rule in the widget cell with my logo & search box, but couldn't get it positioned correctly to show under the menu.

What is the best way to get a line under my menu bar, where I want it? Here's my test blog, where I'm setting things up.

Here is some code as a start. It puts relative positioning on the wrapper div so you can absolutely position the menu. This brings some of the elements up that were being pushed down by the menu. You could similarly absolutely position a horizontal rule. The height of 0 eliminates the containing div.

#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    left: 680px;
    top: 180px;
    height: 0;
}

Thanks Larry,
I pasted it into my css inserts, and it didn't change anything.

I replaced "rmenu2 " with "rMenu", and that didn't change anything either . . . . .

This is what I originally had in the css inserts to deal with the page menu:

/*moves page menu tabs over to the left*/
ul.rMenu li {
position: relative;
right: 227px;
bottom: 55px;
}
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}

I took it out, put in what you suggested, then played with the numbers. I now have this:

#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 130px;
    height: 0;
}

That basically has everything like it was with my previous code. Then, I was able to go in and style the bar1.

So thanks! Let me check a few more things. I don't like the arrows for dropdown, and when I put in the css insert to get rid of them, I couldn't get rid of the extra space. I found a thread on it, but what I tired didn't work. Any clues for that one?

I've got it pretty much how I want it. Here's the styling for the bar:

height: 1px;
background: #ffffff;
border-top: solid 1px #cccccc;
margin-bottom: 25px;
margin-top: -17px;
width: 735px;

Here's what I have for the css inserts for the menu bar:

#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 143px;
    height: 0;
}
/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}

now if I can get the spacing between the menu tabs fixed, I'll have the menu part all set.

If you are trying to do what I think you would just put a right margin on the list items for rmenu2

I tried that, and it's not making a difference. So I'm not sure if I'm putting it on the wrong place. Here's what I've got:

#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 150px;
    height: 0;
letter-spacing:.05em;
padding-left:5px;padding-right:5px;
}
/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
	}

I played with the padding numbers, and it didn't change anything.

I don't see any code for margins on the list items such as the following.

#rmenu2 li {
    margin-right: 10px;
}

I added that, and it moves the sub-menu items over to the left, but leaves the main menu items where they are--which isn't what I want. I want them all lined up, but I want to get rid of the extra space to the right of the main menu items w/ dropdowns caused from the arrows.

I can adjust the space between the main menu items, but I can't get it to be equal.

I swear I tried this solution before, and it didn't work. But I might have had something else going on conflicting. Here's what worked (I put it in red only to show where it is):

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
padding-right: 5px !important; 
	}

So here is the whole css insert for that part:

#wrapper {
    position: relative;
}
#rmenu2 {
    position: absolute;
    right: 255px;
    top: 150px;
    height: 0;
letter-spacing:.05em;
}


/*fixes dropdown menus to align correctly since I moved the menu bar*/
ul.rMenu li ul.rMenu-ver li{
right: 0px;
bottom: 0px;
text-align: right;
}

/*removes arrows for dropdown menus*/

div#menu1 ul.rMenu-hor li.rMenu-expand a {
	background-image: none;
padding-right: 5px !important; 
	}