Linking nested elements
I have made unordered list on my site. But I want to nest extra links that appear when I hover over.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bayside Beat: Cable Cars</title>
<link href="styles/responsive.css" rel="stylesheet" type="text/css">
<!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--><script>var __adobewebfontsappname__="dreamweaver"</script><script src="http://use.edgefonts.net/source-sans-pro:n2,n4,n6:default.js" type="text/javascript"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div id="wrapper">
<header>
<h1>IT in finance and commerce</h1>
<nav>
<h2 id="menulink"><a href="#navlinks">Menu</a></h2>
<ul class="displayed" id="navlinks">
<li><a href="index.html" class="thispage">Home</a></li>
<li><a href="#">issues and problems</a></li>
<li><a href="#">improvements and innovations</a></li>
<li><a href="#">Bibliography</a></li>
</ul>
</nav>
</header>
After that I added a .js file as follows:
/* Control sliding menu on screens smaller than a specified breakpoint */
(function(menu_button, links, breakpoint) {
'use strict';
var menulink = document.getElementById(menu_button),
menu = document.getElementById(links);
menu.className = 'start';
setTimeout(function() {
menu.className = 'collapsed';
}, 20);
menulink.onclick = function() {
if (menu.className === 'displayed') {
menu.className = 'collapsed';
} else {
menu.className = 'displayed';
}
return false;
};
window.onresize = function() {
if (window.innerWidth < breakpoint) {
menu.className = 'collapsed';
}
};
})('menulink', 'navlinks', 700);
Now I'm stuck on how to add nested links. I want 3 under "issues and problems" and 2 under "improvments and innovations. I'm a beginner so bear with me i need help.
AdChoices