su CSS/edge fanno così:
html
codice:
<div id="sidebar">
<div id="demos">
<h4>Demos</h4>
<a href="complexspiral/demo.html" title="fixed background images make for nifty effects [01 Oct 2001]">complexspiral <span>(fixed-attachment background can lead to nifty effects if you use them right)</span>
</a>
<div class="sublinks">
<a href="complexspiral/demo2.html" title="a spiral of extended reach [23 Feb 2002]">...devolved
</a>
<a href="complexspiral/glassy.html" title="through a rippled glass, lightly [23 Feb 2002]">...distorted
</a>
</div>
css
codice:
div#sidebar {position: absolute; top: 3em; left: 0; width: 23%; background: transparent; padding: 0; margin: 1em; border-width: 0;}
div#sidebar div {margin-bottom: 1em;}
div#sidebar a {display: block; margin: 0; padding: 0.33em; letter-spacing: 1px; text-align: right; font-weight: bold; border-bottom: 1px solid #88B; color: #337; background: transparent none center left no-repeat; text-decoration: none;}
div#sidebar a:link {color: #226; background-color: transparent;}
div#sidebar a:visited {color: #557; background-color: transparent;}
div#sidebar a:hover {background: #AAD; color: #338;}
div#sidebar a span {display: none;}
div#demos {border-color: #224;}
div#demos h4 {background: #66A; color: #224;}
div#demos a {text-transform: lowercase;}
div#demos a:link:hover {background: #BBE;}
div#demos a:visited:hover {background: #AAD;}
div#demos div.sublinks {border-width: 0; margin: 0;}
div#demos div.sublinks a {border-left: 2em solid #88B; font-size: 85%; font-weight: normal; letter-spacing: normal; padding-right: 0.66em; padding-left: 0.125em; color: #404077;}
div#demos div.sublinks a:visited
ti voglio segnalare inoltre un articolo:
Keeping Navigation Current With PHP