An enlarging unordered list
Tweet
An enlarging unordered list
Information
Just a simple menu to produce an enlarging effect with a drop shadow on hover.
Again this is just a css styled unordered list using no images that will degrade well for text only browsers.
A second list added to show how a background image can be used to make a more realistic shadow.
Cascading Style Sheet
MENU ONE
#painters {
padding:0;
margin:5em 0;
list-style-type:none;
}
#painters li {
width:75px;
height:20px;
float:left;
border:1px solid #000;
margin-right:2px;
}
#painters a em {
font-style:normal;
font-size:1em;
line-height:1.5em;
}
#painters a {
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#painters a.red {background:#c00; color:#fff;}
#painters a.orange {background:#fc0; color:#000;}
#painters a.yellow {background:#ee0; color:#000;}
#painters a.green {background:#080; color:#fff;}
#painters a.blue {background:#00c; color:#fff;}
#painters a:hover {
width:120px;
height:28px;
z-index:200;
background:#aaa;
}
#painters a:hover em {
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursor:pointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-8px;
}
#painters a:hover.red em {background:#c00;}
#painters a:hover.orange em {background:#fc0;}
#painters a:hover.yellow em {background:#ee0;}
#painters a:hover.green em {background:#080;}
#painters a:hover.blue em {background:#00c;}
Cascading Style Sheet
MENU TWO
#painters2 {
padding:0;
margin:0;
list-style-type:none;
}
#painters2 li {
width:75px;
height:20px;
float:left;
border:1px solid #000;
margin-right:2px;
}
#painters2 a em {
font-style:normal;
font-size:1em;
line-height:1.5em;
}
#painters2 a {
text-decoration:none;
color:#000;
position:absolute;
width:75px;
height:20px;
display:block;
text-align:center;
}
#painters2 a.red {background:#c00; color:#fff;}
#painters2 a.orange {background:#fc0; color:#000;}
#painters2 a.yellow {background:#ee0; color:#000;}
#painters2 a.green {background:#080; color:#fff;}
#painters2 a.blue {background:#00c; color:#fff;}
#painters2 a:hover {
width:120px;
height:28px;
z-index:200;
background:transparent url(../ads/opaque.gif);
}
#painters2 a:hover em {
font-size:1.5em;
line-height:1.1em;
overflow:hidden;
cursor:pointer;
background:#fff;
border:1px solid #000;
position:absolute;
width:120px;
height:25px;
left:-12px;
top:-4px;
}
#painters2 a:hover.red em {background:#c00;}
#painters2 a:hover.orange em {background:#fc0;}
#painters2 a:hover.yellow em {background:#ee0;}
#painters2 a:hover.green em {background:#080;}
#painters2 a:hover.blue em {background:#00c;}
xhtml
MENU ONE
<ul id="painters">
<li><a href="#nogo"><em>Monet</em></a></li>
<li><a href="#nogo"><em>Constable</em></a></li>
<li><a href="#nogo"><em>Renoir</em></a></li>
<li><a href="#nogo"><em>Turner</em></a></li>
<li><a href="#nogo"><em>Matisse</em></a></li>
</ul>
xhtml
MENU TWO
<ul id="painters2">
<li><a href="#nogo"><em>Monet</em></a></li>
<li><a href="#nogo"><em>Constable</em></a></li>
<li><a href="#nogo"><em>Renoir</em></a></li>
<li><a href="#nogo"><em>Turner</em></a></li>
<li><a href="#nogo"><em>Matisse</em></a></li>
</ul>
No comments yet.