Is there anyway to create submenus under html5 <nav> tags? I have a very simple navigation right now, Id like to add a few additional submenus. I have done this before using <ul> and <li> tags, but I really wanted to try to do something very html5 and css3 driven. Is it possible to do this combining all three types of tags? Any advice would be appreciated.
PS- I haven’t been on this site in awhile. I know I am probably posting wrong. Also, can anyone tell me where I can find my old posts? I know someone gave me some info on the correct way to post once, but I can’t locate any of my history.
Heres the HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Developmental Writing</title>
<link href="css/master_writing.css" rel="stylesheet" type="text/css" />
<meta name="description" content="Austin Community College Developmental Writing Instructor Resources">
<meta name="keywords" content="teacher, faculty, instructor, resources, teaching, teaching guides">
<meta name="robots" content="index,follow">
<script>
'article aside footer header nav section time'.replace(/\\w+/g,function(n){document.createElement(n)})
</script>
<!--[if IE ]>
<link href="css/iecss.css" rel="stylesheet" type="text/css">
<![endif]-->
</head>
<body>
<div id="wrapper">
<div id="content">
<div id="header"></div><!--end header-->
<nav>
<a href="index.html">Home Page</a>
<a href="eBook.html">eBook Learning</a>
<a href="Course Options.html">Course Info</a>
<a href="faculty.html">Meet the Faculty</a>
<a href="instructor_resources.html">Instructor Resources</a>
<a href="#">Lorem Ipsum</a>
</nav>
CSS:
nav{
display: table;
background-color:#dfdddd;
width: 100%;
table-layout: fixed;
}
nav a{
display:table-cell;
padding: 7px 0;
color: #000;
text-align:center;
-webkit-transition:all .2s linear;
-moz-transition:all .2s linear;
-ms-transition:all .2s linear;
-o-transition:all .2s linear;
text-decoration:none;
}
nav a:hover{
color: #FFF ;
background-color: #007AC3;
}