Thread: horizontal list

hi

please look at this link

List

in the case of the 1st list

what the moves moves over the links a repeating grey background image appears however this background appears completely only for the 1st link i want that repeating background to appear for the remaining links as well to the complete width of the individual links as of now for the remaining links on the left side the background image is not appearing i want the background to appear on the left side of the text


in the 2nd list

the height of the containing div is 53px and i would like the list items to be within this 53px height as of now when the mouse moves over Facilities and Activities link the repeating background image appears completely for this link and not for the other links which is what i want for the remaining links

can anyone advice how i can change the list code to correct both list1 and list2

thanks

If you look at the 1st list, the first list item does not appear completely. The left side is shear with the text - you appear to need to adjust margin or padding for your li's. I see the left padding is 0 at the moment.

As for list 2, add height:33px to #list2 ul li a. 33px + 10px padding which you have equals 43px, the height of the parent.

Code:

#list1 ul li{
  margin: 0 0px 0 0px;
}

#list1 ul li a {
  padding: 10px 20px 12px 20px;
}

#list2 ul li a{
height: 33px;
}