I found the following code on the 'Net and modified it to my needs. However, I am having one problem that I cannot figure out. The entire dropdown indents and I don't want it to. If someone can spot something that I am missing, I would be greatly appreciated.
Here is the code. Thanks in advance.
<HTML><HEAD><TITLE> - Pure CSS Drop Down Menus (well with javacript for IE)</TITLE>
<SCRIPT type=text/javascript><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("dmenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></SCRIPT>
<STYLE type=text/css>
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.topmenuli {
FLOAT: left;
LIST-STYLE-TYPE: none
}
.topmenutitle {
DISPLAY: block;
FONT-WEIGHT:bold;
}
.submenuul {
PADDING-RIGHT: 0px;
DISPLAY: none;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
POSITION: absolute;
FONT-WEIGHT:bold
}
.submenuli A {
DISPLAY: block;
WIDTH: 150px
}
LI.over UL {
DISPLAY: block
}
#dmenu {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, Sans-Serif
}
.topmenutitle {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
TEXT-INDENT: 3px;
PADDING-TOP: 3px;
TEXT-DECORATION: none;
COLOR: #F5CE13;
BACKGROUND-COLOR: #4E4B4B
}
.submenuul {
BORDER-RIGHT: #000000 2px solid;
BACKGROUND-POSITION: left top;
BORDER-TOP: #000000 1px solid;
MARGIN-TOP: -1px;
BORDER-LEFT: #F5CE13 7px solid;
BORDER-BOTTOM: #000000 2px solid;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #4E4B4B
}
.submenuli A {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
COLOR: #000000;
TEXT-DECORATION: none;
COLOR: #F5CE13;
}
.submenuli A:hover {
BACKGROUND: #F5CE13;
COLOR: #ffffff;
TEXT-DECORATION: none;
}
</STYLE>
</HEAD>
<BODY>xcZ
<UL id=dmenu>
<LI class=topmenuli><A class=topmenutitle href=" 1</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 3</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A></LI>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 3</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 4</A>
</LI>
</UL>
</BODY></HTML>
Here is the code. Thanks in advance.
<HTML><HEAD><TITLE> - Pure CSS Drop Down Menus (well with javacript for IE)</TITLE>
<SCRIPT type=text/javascript><!--//--><![CDATA[//><!--
startList = function() {
if (document.all&&document.getElementById) {
navRoot = document.getElementById("dmenu");
for (i=0; i<navRoot.childNodes.length; i++) {
node = navRoot.childNodes;
if (node.nodeName=="LI") {
node.onmouseover=function() {
this.className+=" over";
}
node.onmouseout=function() {
this.className=this.className.replace(" over", "");
}
}
}
}
}
window.onload=startList;
//--><!]]></SCRIPT>
<STYLE type=text/css>
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
background-color: #333333;
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
.topmenuli {
FLOAT: left;
LIST-STYLE-TYPE: none
}
.topmenutitle {
DISPLAY: block;
FONT-WEIGHT:bold;
}
.submenuul {
PADDING-RIGHT: 0px;
DISPLAY: none;
PADDING-LEFT: 0px;
PADDING-BOTTOM: 0px;
MARGIN: 0px;
PADDING-TOP: 0px;
LIST-STYLE-TYPE: none;
POSITION: absolute;
FONT-WEIGHT:bold
}
.submenuli A {
DISPLAY: block;
WIDTH: 150px
}
LI.over UL {
DISPLAY: block
}
#dmenu {
FONT-SIZE: 12px;
FONT-FAMILY: Arial, Helvetica, Sans-Serif
}
.topmenutitle {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
TEXT-INDENT: 3px;
PADDING-TOP: 3px;
TEXT-DECORATION: none;
COLOR: #F5CE13;
BACKGROUND-COLOR: #4E4B4B
}
.submenuul {
BORDER-RIGHT: #000000 2px solid;
BACKGROUND-POSITION: left top;
BORDER-TOP: #000000 1px solid;
MARGIN-TOP: -1px;
BORDER-LEFT: #F5CE13 7px solid;
BORDER-BOTTOM: #000000 2px solid;
BACKGROUND-REPEAT: repeat-x;
BACKGROUND-COLOR: #4E4B4B
}
.submenuli A {
PADDING-RIGHT: 3px;
PADDING-LEFT: 3px;
PADDING-BOTTOM: 3px;
PADDING-TOP: 3px;
COLOR: #000000;
TEXT-DECORATION: none;
COLOR: #F5CE13;
}
.submenuli A:hover {
BACKGROUND: #F5CE13;
COLOR: #ffffff;
TEXT-DECORATION: none;
}
</STYLE>
</HEAD>
<BODY>xcZ
<UL id=dmenu>
<LI class=topmenuli><A class=topmenutitle href=" 1</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 3</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A></LI>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 3</A>
<UL class=submenuul>
<LI class=submenuli><A href=" 1</A>
<LI class=submenuli><A href=" 2</A>
</LI></UL></LI>
<LI class=topmenuli><A class=topmenutitle href=" 4</A>
</LI>
</UL>
</BODY></HTML>