Menu creation is probably one of the main points in the development of sites and programs. In addition, a well-designed and logical design of such a menu is the face of a site or any program. For example, let's take Microsoft and the Windows 7 operating system. After the release of Windows 7, Microsoft heard a lot of criticism that was not flattering for itself. There have been many criticisms, but most often inconveniently positioned menu items. Carefully read this tutorial on how to create a horizontal dropdown menu with CSS and Expression Web. Tag styles will change to create the menu
Instructions
Step 1
Go to Manage Styles and then click the New Style button. Give the name Selector ul li to the new style you just created. Also remember to make sure the new style must be defined in the drop-down.css file.
Step 2
To stretch a horizontal menu, you need to tell the menu items that it will be horizontal. Next, you need to determine the width of each menu item and remove all unnecessary dots in front of all list items.
Step 3
For horizontal alignment go to Layout and set the display attribute to inline. Set the float attribute to left. Click the Apply button. All list items must be set on one line. In order for them not to overlap each other, you need to do the following: set the Position value of the width attribute to 150px. Now check it out. All elements of the list should become the same size.
Step 4
Now we need to try to remove the dots in front of the list items. To do this, go to List and set the list-style –type attribute to none.
Step 5
Click OK to accept all changes.
Step 6
To adjust the font size for the ul li style, you need to do the following. In Manage Styles, right click on the ul li style you need to select Modify Style. A familiar dialog box for adding or changing attributes will open. Go to the Font category and set the font-family attribute to Arial, Helvetica, sans-serif. Next, go to the font-size attribute and set it to 0.9em. After that, set up the text-transform attribute, set the value for it to uppercase.
Step 7
The height of the items in the created menu can be adjusted in the Position category. Set the height attribute to 30px.
Step 8
Next, you need to save the menu.html file. To do this, Expression Web will open the required Save Embedded Files window to save the file. Save in drop-down.css file. Click OK to save.
Step 9
Now check your result. For reliability, it is better to test it in different browsers. To check the result obtained in the default browser, you must press the F12 key on your keyboard.
