Menu
I guess I don’t understand the ‘cascade’ in “Cascading Style Sheet” as well as I thought I did.
Can someone explain why the font-size in the indented display of this list is [COLOR=”#B22222″][SIZE=4]larger
[code]
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″ />
<title>LI menu</title>
<style type=”text/css”>
#divUL { width:300px; border:1px solid red; }
#divUL ul {margin-left: 0; padding-left: 0;}
#divUL li { font-size:1.4em; list-style-type:none; padding-left:16px; }
.ptr { cursor:pointer; }
</style>
</head>
<body>
<div id=”divUL”>
<ul>
<li class=”mm” onclick=”window.location.href=’http://optometry.nova.edu'”>NSU Optometry</li>
<li class=”mm” onclick=”window.location.href=’http://www.webdeveloper.com'”>Webdeveloper</li>
<li class=”mm” onclick=”window.location.href=’http://www.codingforums.com'”>CodingForums</li>
<li>Jogos
<ul>
<li>Submenu A</li>
<li class=”mm” onclick=”window.location.href=’http://www.coderbyte.com'”>Coderbyte</li>
<li>Submenu C</li>
<li class=”mm” onclick=”alert(‘Test display’)”>Test</li>
</ul>
</li>
<li class=”mm” onclick=”window.location.href=’http://www.dreamincode.net'”>DreamInCode</li>
<li class=”mm” onclick=”window.location.href=’http://www.google.com'”>Google</li>
<li>Escritrio</li>
<li>Outros</li>
<li class=”mm” onclick=”window.location.href=http://www.nova.edu”>NSU</li>
<li class=”ptr” onclick=”alert(‘Test display’)”>Sistema</li>
</ul>
</div>
<p> <div id=”debug”></div>
<script type=”text/javascript”>
function $_(IDS) { return document.getElementById(IDS); }
window.onload=function(){
var txt;
var elems = $_(‘divUL’).getElementsByClassName(“mm”);
for (var i=0; i<elems.length; i++) {
elems[i].onmouseover = function() {
$_(‘debug’).innerHTML = this.innerHTML;
this.style.backgroundColor = ‘orange’;
this.style.cursor = ‘pointer’;
}
elems[i].onmouseout = function() {
$_(‘debug’).innerHTML = ”;
this.style.backgroundColor = ”;
}
}
}
</script>
</body>
</html>