No replies
mattb
Offline
newbie
Last seen: 9 years 26 weeks ago
Timezone: GMT+1
Joined: 2011-03-29
Posts: 1
Points: 2

Hi,

I downloaded the code below from a web site. It is a pure CSS drop down menu.

Is it possible to make the links "Drop Menu 1" and "Drop Menu 2" into the same 'boxed links' that appear when you hover over them?

I understand these text links appear in the body of the HTML. Would I need to move them to be part of the CSS for them to appear boxed or is it more complicated than that?

Thanks,

Matt.

Code is:

Pure CSS Drop Down Menu

/* -------------------- Main body tag styling ---------------------- */
body,td,th {
font-family: Arial, Helvetica, sans-serif;
}
/* -------------------- What the entire dropdown backround will look like and its positioning ---------------------- */
ul {
margin:0;
padding:0;
}
.dc{
display:inline;
position: relative;
z-index: 0;
margin:0;
padding:0;
}
.dc:hover{
background-color: transparent;
z-index: 50;
}
.dc ul{
position: absolute;
width:120px;
background-color: #999;
left: -1000px;
list-style-type:none;
visibility: hidden;
}
.dc:hover ul{
visibility: visible;
top: 16px;
left:0px;
}
/* -------------------- What the list items will look like inside the dropdown ---------------------- */
.dc ul li{
margin:0;
padding:0;
background-color: #EBEBEB;
margin:1px;
}
.dc ul li:hover {
background-color: #FFF;
margin:1px;
}
/* -------------------- What the links look like inside the dropdown ---------------------- */
.dc ul li a {
display:block;
padding:4px;
font-size:12px;
}
.dc ul li a:link {
color: #333;
text-decoration: none;
}
.dc ul li a:visited {
text-decoration: none;
color: #000;
}
.dc ul li a:hover {
text-decoration: none;
color: #333;
}
.dc ul li a:active {
text-decoration: none;
color: #333;
}
/* END PURE CSS DROP MENU */