The HTML5
All you will need is a simple menu structure using <nav> and nested <ul> tags, like this:<nav>
<ul>
<li><a href="/">Home</a>
<ul>
<li><a href="/about">About</a></li>
<li><a href="/contact">Contact</a></li>
</ul>
</li>
<li><a href="/service">Services</a>
<ul>
<li><a href="/service/transport">Transport</a></li>
</ul>
</li>
<li><a href='/welcome/language'>Change Language</a></li>
</ul>
</nav>
The CSS3
I am just going to comment the CSS code; hopefully that is enough explanation for you.../********************* Nav elements ****************************/
/* Navigation menu HTML5 tag*/
nav
{
/* No border*/
border:none;
border:0px;
/* Ensures the text is aligned properly*/
text-align: left;
/* Margins and padding*/
margin:0px;
padding:0px;
}
/* Our top menu list */
nav ul
{
/* Set's how the element will interact with adjacent elements */
display:block;
/* Sets the height of the element (needs to be larger than the text) */
height: 35px;
/* Buffer space between other containers */
padding-top: 5px;
padding-bottom: 5px;
padding-left: 1%;
margin: 0;
/* Does not insert bullet points*/
list-style:none;
}
/* Float all <li> elements */
nav li{
float:left;
}
/* Display top menu <li> items as inline */
nav ul li
{
/* Set's how the element will interact with adjacent elements */
display:inline;
}
/* The main menu link */
nav ul li a
{
/* Changes the text to bold and uppercase */
font-weight: bold;
text-decoration:none;
text-transform: uppercase;
/* Default text colour */
color:#CCCCCC;
/* Pads the text so that it is not right up against the parent element*/
padding: 5px;
/* Specifies the line-height of the text */
line-height:30px;
/* Background colour */
background-color: #FFFFFF;
/* Border colour */
border: 2px solid #CCCCCC;
/* CSS3 Rounded Border */
-webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 8px; /* FF1-3.6 */
border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* When we hover over (or for mobile devices, click on the element) */
nav ul li a:focus, nav ul li:focus a, nav ul li a:hover, nav ul li:hover a
{
/* Underlines the text when we hover over it*/
text-decoration:underline;
/* Change the background colour*/
background-color: #CCCCCC;
/* Default text colour */
color:#336666;
/* Border colour */
border: 2px solid #336666;
}
/* Our sub menus */
nav li ul
{
/* Our background colour */
background-color: #CCCCCC;
/* HIDES the element until needed! */
display:none;
/* Let the browser determine the element height */
height:auto;
/* No padding or margins required */
padding:0px;
margin:0px;
/* Minimum width of 120px */
min-width: 120px;
width: auto;
/* Use the absolute positioning method*/
position:absolute;
/* Stack this element right at the front of all elements*/
z-index:200;
/* Default text colour */
color:#336666;
/* Border colour */
border: 2px solid #FFFFFF;
/* CSS3 Rounded Border */
-webkit-border-radius: 8px; /* Saf3-4, iOS 1-3.2, Android ≤1.6 */
-moz-border-radius: 8px; /* FF1-3.6 */
border-radius: 8px; /* Opera 10.5, IE9, Saf5, Chrome, FF4, iOS 4, Android 2.1+ */
/* useful if you don't want a bg color from leaking outside the border: */
-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
nav li:focus ul, nav li:hover ul
{
/* Set's how the element will interact with adjacent elements */
display:block;
}
nav li li
{
/* Set's how the element will interact with adjacent elements */
display:block;
/* Do not allow the element to float around */
float:none;
/* Do not set margin */
margin: 0;
/* Take up all space given by parent element*/
/*width:100%;*/
/* Border colour */
border: none;
}
nav li:focus li a, nav li:hover li a
{
/* Turn off the background */
background:none;
border:none;
text-decoration:none;
}
nav li ul a
{
/* Set's how the element will interact with adjacent elements */
display:block;
/* Sets the height of the element (needs to be larger than the text) */
/*height:35px;*/
/* No margin */
margin:0px;
/*line-height: 20px;*/
/* No border or underlines*/
text-decoration:none;
border:none;
/* Default text colour */
color:#CCCCCC;
}
nav li ul a:hover, nav ul li ul li:hover a
{
/* Underlines the text when we hover over it*/
text-decoration:underline;
/* Change the background colour*/
background-color: #336666;
color: #CCCCCC;
}
nav p
{
/* No floating elements are allowed to the left of this element */
clear:left;
}
