One of the most important aspects in software and website development is menu creation. Microsoft and its most famous brainchild, the Windows operating system, should be taken as a prime example. Despite the fact that this product is used by the vast majority of PC users in the world, criticism is not only not decreasing, but is constantly growing. Basically, it concerns the inconvenience of the location of menu items. The following is a description of how to create menus in CSS and Expression Web.
Instructions
Step 1
To start creating a horizontal menu, go to Manage Style, then click the New Style button. Name the new style Selector ul li. Important! Make sure the generated file has the drop-down.css extension. To make a horizontal menu, indicate to the created element that it will be exactly horizontal. Next, determine the width of each menu item and remove all unnecessary points placed in front of all the items in the list.
Step 2
Go to the Layout option, set the Display attribute to Inline to do horizontal alignment. Next, set the Left value to the Float attribute and click the Apply button. Set all list items to one line. So that they are placed neatly and do not crawl on top of each other, in the Width attribute, set the Position value to 150 px. Check that all the elements of the list are the same size. Next, remove the dots in front of all elements - for this, go to the List attribute and set the None parameter in the List Style-type item. Click OK for all changes to be accepted and applied.
Step 3
Adjust the font size and style for the ul li. To do this, go to Manage Styles and right-click on the ul li, then select Modify Style. The familiar dialog box will appear. Go to Font, select the Font-family attribute and set it to Sans-serif, Arial, Helvetica. Next, adjust the font size by setting it to 0, 9. After that, set the Text-transform attribute to Uppercase. Adjust the height of the menu items in the Height - Position attribute, setting the value to 30 px.
Step 4
After completing all corrective actions, save the file as menu.html. Next, test the created menu in different browsers to make sure it works correctly. As you can see, the design of the horizontal menu is quite simple.
