University of Westminster

display: inline-block; displays navigation inline

color: #333; type of the color

text-align: center; the text place

padding: 0.8em 0.5em 0.4em 0.5em ;

font-size: 0.9em; font-size of navigation

font-weight: bold; making text of navigation bold

text-transform: uppercase; all navigation bar word will be in capital letters

}

The function of hover here to add more features into navigation while it is touched

nav a:hover{

text-decoration: underline; text will be underlined

color: blue; color will be blue

font-size: 1em; font-size will become bigger when touched

}

nav li.active a{

text-decoration: underline;

color: blue;

font-size: 1em;

}

Following is giving the features to dropdown menu also.

nav li.active,

.dropdown-content a:hover {

text-decoration: underline; will be underlined when menu of dropdown is hovered.

color: blue; color will be blue when menu of dropdown is hovered.

}

This code make dropdown link clear showing that downward arrow to illustrate content that is hidden

.dropdown:after {

content: "▾";

margin-right: 0.5em;

}

Elements by the order of greater stack will be shown in front of elements by the order of lower stack

.dropdown-content {

display: none; makes dropdown menu hidden

position: absolute; position takes place in relation to first not normal ancestor element of it

min-width: 180px; setting minimal width

z-index: 1;displays elements with larger stack

}

Links will be placed vertically

.dropdown-content a {

color: #333;

padding: 12px 15px; gives padding to top and bottom

text-decoration: none;

display: block; will be displayed from top to the bottom

text-align: left;

}

display the dropdown of the menu when it is touched

.dropdown:hover .dropdown-content {

display: block; will be displayed from top to the bottom when hovered
Display site map inline

footer > section {

text-align: left; text will be placed in the left

display: inline-block; diplays in one line

margin-right: 2em; gives a margin 2

vertical-align: top;

max-width: 200px; gives maximum width according to the written number

}
normalizes font size of footer, section unordered list and parapgraph

footer > section > ul,

footer > section > p {

font-size: 0.8em;

}

Mainly helps to dispose of bullets in the site map

footer > section > ul {

list-style-type: none; removes points of bullet

padding: 0; overrides padding

}

footer > section li:hover > a:before,

footer > section li.active > a:before {

content: "▸"; gives this symbol

position: absolute; position takes place in relation to first not normal ancestor element of it

em; gets over margin

}

Styling links to social networks

.social-networks{

float: right; links will be floated to the right

}

Social- networking images

.social-networks img{

height: 1.5em; gives a height to the images

}