Right-Side Menu doesn't expand it just overlaps

[wolfkin]

I'm trying to work with the starter CSS file and I'm trying to shift the menu to the right.

The problems at the moment are

1- the list is double spaced. It doesn't look too bad now but the real list is going to have 4-5 more items in it and it'll be way too long.

2- the menu doesn't move horizontally. the child li are just overlapping.

 

   /* --- Main Menu - ala suckerish --- */
   #menu {
   font-size: 1.8em;
   }
   #menu ul {
   list-style: none;
   }
   #menu li {
   float: right;
   clear: both;
   }
   #menu a {
   display: block;
   width: 10em;
   color:#3CD8D7;
   }
   #menu a:hover {
   background: #3CD8D7
   }

       /* child menu */
       #menu li ul {
       position: absolute;
       width: 10em;
       top: -999em;
       left: -999em;
       }        
       #menu li:hover ul, #menu li.hover ul {
       top: auto;
       left: auto;
       }

 

CSS and HTML

http://www.sendspace.com/file/g52l5f

 

1 - alright i went into typography and noticed that li was given some padding taking that out seems to have solved that problem. I don't know if it'll have any cascading effects else where but i'll deal with that when I need to deal with it.

[Wickham]

the menu doesn't move horizontally.

 

The menu is on the right, but vertical. Do you mean that you want it to be horizontal? If so, edit the stylesheet like this:-

 

#menu li {

float: right;

/*clear: both;*/

}

because clearing the float means that you have stopped the next li from being on the riight of the previous one. You will find that the first li for "Who we are" goes to the far right and the others on the left of it (the reverse order), although the whole menu sits on the right, so you may want to reverse the order of the li tags in the html file.

 

the child li are just overlapping.

 

You have no padding and the width of 10em is only just enough for the middle menu titles, so add a bit of side padding:-

#menu a { padding: 0 5px;

display: block;

width: 10em;

color:#3CD8D7;

}

 

However, the edits above are only a partial solution as the menu as a whole isn't wide enough and your last menu title is just a period . and this still has 10em allocated for it and it goes down to a row below, so you may need to reduce the text and 10em to something less.

[wolfkin]

i forgot I deleted an earlier post where I explained some of this in far too much detail. I think part of the problem is that originally the menu was horizontal. Vertical is what I'm looking for.

 

This is sort of what I'm trying to do

only that's on the left side and my menu is on the right

the issue is that instead of expanding over to the left when you highlight a menu item the child elements get displayed directly below instead of to the left and below.

that was fine if the menu is horizontal that's what you want but since it's vertical i need to either blank out the main items below or shift it to the left and I'm trying to shift to the left.

 

as for the menu items themselves this is just a sample files i created for simplicity. The CSS is the same but the real html file is much longer and harder to read.