How Do I Change My CSS Menu From Horizontal to Vertical?
A CSS menu is created by adding CSS style properties to an HTML unordered list. Unordered lists are created by an opening "<ul>" and closing "</ul>" tag, which enclose list items. Each list item is created by "<li>" and "</li>" tags. When list items in an unordered list are assigned an "inline" CSS display property, they will display in a horizontal row, creating a horizontal CSS menu. To change the horizontal CSS menu into a vertical menu, you'll need to change the CSS display property to "block," which will cause the list items to stack vertically.
Other People Are Reading
Instructions
-
-
1
Open the Web page file that contains the CSS style code for your horizontal menu in an HTML or text editor. To open the Web page file in the Windows default text editor, right-click the file, then click "Open With." Click to select "Notepad" or "WordPad" from the program list and then click "OK."
-
2
Locate the list item CSS style statement. The list item CSS style statement controls the style of each item in the menu. It begins with the name or ID assigned to the CSS menu, preceded by a "." or "#" and followed by "li". For example, if the ID of the CSS menu is "navbar," the list item CSS style statement will be displayed as "#navbar li".
-
-
3
Locate the "display: inline;" text in the list item CSS style statement.
-
4
Replace the "inline" text with "block," so the entire display property displays as "display:block;".
-
5
Click the "File" menu and then click "Save."
-
1
