We are now going to style the top navigation so that it looks like buttons displayed beside each other instead of below each other.
1. In the admin console, click on Layout | Templates, and open My first template for edit.
2. Add the HTML
<div>
tag around the{menu number_of_levels="1"}
tag, as shown in the following screenshot:
3. Click on Submit.
4. Open My First Style Sheet from the list of stylesheets (Layout | Stylesheets) for editing.
5. Add style formats for the container
top-navi
at the end of stylesheet, as shown in the following code snippet:#top-navi ul { height: 22px; padding: 0px; margin: 10px 0; border-top: 1px solid #e5e4e2; border-bottom: 1px solid #e5e4e2; } #top-navi li { list-style: none; float:left; #top-navi li a { color: #a2a2a2; text-decoration: none; display: block; padding: 5px 15px; } #top-navi li a:hover { color: #ffffff; background: #3d648a; }
6. Click on Apply and then click on the magnifying glass icon in...