Hello all,
I am just figuring out how to use CSS so please bear with me. Ok here is the deal. I have my site that already as a CSS spreadsheet. I am trying to make a dropdown menu using CSS for a section on that site that will also need to point at the other spreadsheet. I know that there are problems with overlap but dont really know how to deal with them. The completed menu is at
http://www.northlandcabletv.com/mlte...1/dropdown.asp
This is the code that is in the drop.css that that page refers to:
body {
font-family: arial, helvetica, serif;
font-size: 10pt;
padding: 2em;
margin: 0;
}
a {
text-decoration: none;
}
a:link {
color: #080;
font-weight: bold;
}
a:visited{
color: #080;
font-weight: bold;
}
a:hover {
text-decoration: underline;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
#nav a {
text-decoration: none;
}
#nav li li a {
display: block;
font-weight: normal;
color: #060;
padding: 0.2em 10px;
}
#nav li li a:hover {
padding: 0.2em 5px;
border: 2px solid #039703;
border-width: 0 5px;
}
li {
float: left;
position: relative;
width: 13em;
text-align: center;
cursor: default;
background-color: white;
border: 1px solid #039703;
border-width: 1px 0;
}
li#first {
border-left-width: 8px;
}
li#last {
border-right-width: 8px;
}
li ul {
display: none;
position: absolute;
top: 100%;
left: 0;
font-weight: normal;
background: url(left.gif) bottom left no-repeat;
padding: 0.5em 0 1em 0;
border-right: solid 1px #039703;
}
li>ul {
top: auto;
left: auto;
}
li li {
display: block;
float: none;
background-color: transparent;
border: 0;
}
li:hover ul, li.over ul {
display: block;
}
What I need to figure out is how to make all of these elements ONLY apply to the code for the dropdown.asp. I simply do not know how to do this without making the dropdown not work. I would imagine that it has to do with renaming the different parts of the code but I am not sure how to do so without messing up the dropdown as I said. Thank you in advance for any help.
Hybrid Mode
