How to Create a Vertical Line Between Menus
Vertical lines are created between items in a horizontal website menu as separators. The lines help users differentiate where one navigation link area ends and the next link begins, especially when menu items are close together due to layout constraints. Menus are typically created by using CSS to style an unordered list. You can create a vertical line between menu items by adding a border to one side of the list-item tag using CSS.
Other People Are Reading
Instructions
-
-
1
Open your Web page by right-clicking on it, then clicking "Open With." Click to select "Notepad" or "WordPad." Click "OK."
-
2
Locate the menu's unordered list code. An unordered list starts with a "<UL>" tag and ends with a "</UL>" tag, between which are several sets of "<LI>" and "</LI>" tags used to denote menu links.
-
-
3
Click to place your cursor to the left of the ending bracket of an opening "<LI>" tag. Press "Spacebar."
-
4
Type "style='border-right: 1px solid #000000;'" to create a border on the right side of the menu item that is 1 pixel wide, a solid line, and colored black ("#000000" is the hexadecimal value for black).
-
5
Replace the "1px" value in the previous step with your desired vertical line width. Replace "solid" with "dotted," "double," or "dashed" to change the vertical line style. Replace "#000000" with the hexadecimal color value of your choice to change the vertical line color.
-
6
Repeat Steps 3, 4, and 5 for all "<LI>" tags in the menu, skipping the last menu item's "<LI>" tag. (Creating a border on the right side of the last menu item leaves a hanging vertical line on the right side of the menu.)
-
7
Click "File" and "Save" to save the Web page.
-
1
