Vertical Line Separating Menu Items

Vertical Line Separating Menu Items

by akashh » Sat Jan 07, 2012 4:16 pm

Hi Please can you help me with the following:

1. How do I add a vertical line like "|" that separates my menu items?
2. When I hover over a selected menu item it isn't the size of the div, vertically, how do I fix this?

Re: Vertical Line Separating Menu Items

by atik » Sat Jan 07, 2012 5:47 pm

Hi akashh,
It would be better to provide us the code so that we can suggest according to it. By the way, To get vertical line after each link if you used <li> to hold links then just put '|' after each </li> like this,

Code: Select all

<li><a href="#">link</a></li>|<li>...

,
or you can use padding to the a element and get a border right property to it like bellow,

Code: Select all

a {
padding:0 5px 0 5px;
border-right:1px solid white;}

For second problem, you can use height property for the 'a' element on hover,

Code: Select all

a:hover {height:50px; display:block}

The output of this codes will very with the condition of it's container elements. If you don't get the output as you want, let us know and also provide us the code of yours.

Re: Vertical Line Separating Menu Items

by akashh » Sun Jan 08, 2012 11:16 am

Thanks for the help after hours of trying to figure it out it was as simple as setting the font size on the list items something so dam trivial. Thanks for the reply bud.

Re: Vertical Line Separating Menu Items

by Mister_grey2010 » Wed Jan 18, 2012 9:30 am

Use border!

Re: Vertical Line Separating Menu Items

by Mister Fox » Sat Jan 21, 2012 11:58 pm

Is there anyway to move it so it's level?