den Acid Burn
Legacy Member
waar zitten die css specialisten hier?
ik heb een simpele html file gemaakt op een drop down menu te testen.
het drop down menu werkt ondertussen vrij aardig maar ik heb nog 2 kleine vraagjes:
1: hoe kan je ervoor zorgen dat bij een hover de volledige achtergrond van een menuitem (li) rood wordt en niet enkel het link gedeelte?
2: kan er iemand een schaduw effect verkrijgen op de drop down box (liefst zonder een image te gebruiken)
hierbij de simpele code (niet op het stukje javascript letten, dat is een workaround voor internet explorer...):
ik heb een simpele html file gemaakt op een drop down menu te testen.
het drop down menu werkt ondertussen vrij aardig maar ik heb nog 2 kleine vraagjes:
1: hoe kan je ervoor zorgen dat bij een hover de volledige achtergrond van een menuitem (li) rood wordt en niet enkel het link gedeelte?
2: kan er iemand een schaduw effect verkrijgen op de drop down box (liefst zonder een image te gebruiken)
hierbij de simpele code (niet op het stukje javascript letten, dat is een workaround voor internet explorer...):
PHP:
<html>
<head>
<style>
ul {
padding: 0;
margin: 0;
list-style: none;
}
li {
float: left;
position: relative;
width: 10em;
}
li ul {
display: none;
position: absolute;
top: 1em;
left: 0;
background-color: white;
}
li:hover ul, li.over ul{
display: block;
}
#content {
clear: left;
}
a:link {
color: red;
text-decoration: none;
}
a:visited {
color: red;
text-decoration: none;
}
a:active {
color: red;
text-decoration: none;
}
a:hover {
color: white;
background-color: red;
text-decoration: none;
}
.borderfull {
border: 1px solid black;
}
.borderpartly {
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
}
</style>
<script type="text/javascript">
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("nav");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes[i];
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
</script>
<body>
<ul id="nav">
<li><div align="center">Item 1</div>
<ul>
<li class="borderfull"><a href="">Sub Item 1.1</a></li>
<li class="borderpartly"><a href="">Sub Item 1.2</a></li>
<li class="borderpartly"><a href="">Sub Item 1.3</a></li>
<li class="borderpartly"><a href="">Sub Item 1.4</a></li>
</ul>
</li>
<li><div align="center">Item 2</div>
<ul>
<li class="borderfull"><a href="">Sub Item 2.1</a></li>
<li class="borderpartly"><a href="">Sub Item 2.2</a></li>
<li class="borderpartly"><a href="">Sub Item 2.3</a></li>
</ul>
</li>
<li><div align="center">Item 3</div>
<ul>
<li class="borderfull"><a href="">Sub Item 3.1</a></li>
<li class="borderpartly"><a href="">Sub Item 3.2</a></li>
<li class="borderpartly"><a href="">Sub Item 3.3</a></li>
<li class="borderpartly"><a href="">Sub Item 3.4</a></li>
<li class="borderpartly"><a href="">Sub Item 3.5</a></li>
</ul>
</li>
</ul>
<p> </p>
<div id="content">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse egestas ultricies pede. Phasellus suscipit blandit risus. Praesent nonummy. In erat. Duis nibh pede, accumsan eu, pulvinar et, volutpat vel, elit. Curabitur nec dui sed nunc congue tempus. Nulla ac dui ac libero fringilla nonummy. Maecenas ullamcorper sodales risus. Vivamus pretium dolor. Proin eu turpis. Phasellus ut mauris non nulla mattis luctus. Nunc porttitor dapibus sapien. In malesuada fermentum metus. Nulla egestas, tellus a vestibulum pharetra, nunc purus auctor lacus, ut semper purus ipsum eu velit. Praesent dui. Nulla accumsan turpis at erat.</p>
</div>
</body>
</html>
.
ad: ik ben ten einde raad (ik zit hier nu al een tijdje op te zoeken)