Lister som dynamiske menuer - eksempel 2
Retur til artiklen
Stylesheet
div#menu ul, li {
list-style-type: none;
margin: 0;
padding: 0;
}
div#menu {
position: absolute;
width: 160px;
top: 10px;
left:20px;
z-index: 3;
}
div#menu li {
width: 160px;
font-size:100%;
}
div#menu a {
margin: 0 2px;
padding-left:5px;
height: 20px;
display: block;
font-weight: bold;
border: 1px solid gray;
text-decoration: none;
color: #000;
background: #fff;
}
div#menu a:hover {
background: #ccc;
border-width: 1px;
border-style:solid;
border-color: gray;
}
div#menu ul ul li a:hover {
background: #ccc;
border-width: 0 1px 1px 1px;
border-style:solid;
border-color: gray;
}
#smenu1, #smenu2, #smenu3, #smenu4,#smenu5 {
display: none;
position:relative;
margin-left:20px;
width: 120px;
}
ul li ul#smenu1 li a, ul#smenu2 li a, ul#smenu3 li a, ul#smenu4 li a, #smenu5 a {
font-weight: normal;
border-top: 0 none;
font-size: 12px;
}
JavaScript
function visMenu(id) {
document.getElementById(id).style.display="block";
}
function skjulMenu(id) {
document.getElementById(id).style.display="none";
}