Lister som dynamiske menuer - eksempel 5
Retur til artiklen
ADxMenu
Stylesheet
body { behavior:url("adxhover.htc"); }
/* ------ Basic style ------ */
#menu ul {
margin: 0;
padding: 0;
border: 0;
list-style-type: none;
}
#menu li {
margin: 0;
padding: 0;
border: 0;
display: block;
float: left;
position: relative;
}
#menu a {
float: left;/* \*/float: none;/* */
display: block;
}
#menu li ul {
visibility: hidden;
position: absolute;
z-index: 10;
}
#menu li ul li {
width: 100%;
display: block;
float: left;
position: static;
}
html&body #menu li ul li {
float: none;
position: relative;
}
#menu li ul li:hover {
position: relative;
}
/* fix the position */
#menu li ul li ul {
top: 0;
left: 100%;
}
/* simulate child selector for IE */
div#menu li:hover ul, #menu li:hover li:hover ul, #menu li:hover li:hover li:hover ul {
visibility: visible;
}
#menu li:hover li ul, #menu li:hover li:hover li ul, #menu li:hover li:hover li:hover li ul {
visibility: hidden;
}
/* do the normal show, with increased specificity */
#menu ul#menuList li:hover > ul {
visibility: visible;
}
/* ------ Make-up -------- */
#menu {
font-family: Tahoma, sans-serif;
font-size: 100%;
color: #000;
background-color: #f5f5f5;
margin: 0;
padding: 0;
border: 1px solid #ccc;
display: block;
height: 1.5em;
}
#menu a {
text-decoration: none;
text-align: center;
color: #000;
background-color: transparent;
margin: 0 0 .1em 0;
padding: .1em .2em ;
border: 0;
}
#menu li {
margin: 2px;
padding: 1px;
border: 0;
width: auto;
display: block;
}
#menu li:hover {
background-color: #ddd;
margin: 2px;
padding: 0;
border: 1px solid #ccc;
cursor: pointer;
}
#menu li ul {
color: #000;
background-color: #fff;
background-image: url(iconbg.gif);
background-repeat: repeat-y;
margin: -1px 0 0 -1px;
padding: 0;
border: 1px solid #ccc;
}
#menu li ul a {
text-align: left;
margin: 0;
}
#menu li ul a.submenu {
background-image: url(arrow.gif);
background-repeat: no-repeat;
background-position: 100% 5px;
}
#menu li ul {
width: 130px;
}
#menu li ul li {
width: 124px;
}
/* ------ Fixes for buggy browsers -------- */
* html #menu li li a {
width: 96px;
w\idth: 86px;
}
#menu {
margin-bottom: 30px; /* simply to have some space around the menu in the example */
}
JavaScript (.htc-fil)
Download .htc-fil