Awhile ago, Pandy helped me get this vertical menu figured out and it's been working great. Recently we decided to change our template slightly, and realigned the website and now the menu alignment is off. The flyout menu for Inventory, Promotions, Products and Request a Quote should all be aligned with the line, but they're about 100px or so to the right. I did edit the width of the main vertical menu from 200px to 170px, but it was working fine after that. Otherwise I haven't touched the menu, other than to add one more option to the Inventory flyout and haven't changed the css or the js files. I'm not sure what I did but the current site is doing it too so I can't even ge
I know the some of the coding is terrible. I'm cleaning that up right now before I start updating the rest of the pages. But if anyone can see where I messed up the vertical menu code, css or js that would be great. I'm only putting the menu css here, if you want the whole thing the link is below. Again, since we're updating the all the files I have a lot of additional and not necessary coding that I'm going to be clearing out, but I would like to get this working so I don't delete something that is part of it. Thanks in advance for the help.
Webpage: http://www.aspenequipment.com/templates/te...en_template.htm
Full CSS: http://www.aspenequipment.com/flyout/flyout.css
Full JS: http://www.aspenequipment.com/flyout/flyout.js
#leftcolumn {
width:170px;
z-index: 10;
}
.dropdown {
display:block;
position:relative;
text-transform: uppercase;
margin: 0px;
left: 5px;
}
.dropdown dt {
width:169px;
padding:2px;
font-weight:bold;
cursor:pointer;
background-position: left top;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
color: #CCCCCC;
}
.dropdown .upperdd {
border-bottom:none;
color: #CCCCCC;
text-align: left;
vertical-align: middle;
width:169px;
}
.dropdown dt:hover {
width:169px;
border-top-width: 1px;
border-left-width: 1px;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: none;
border-left-style: solid;
border-top-color: #FFFFFF;
border-left-color: #FFFFFF;
color: #CCCCCC;
border-right-width: 1px;
border-right-color: #FFFFFF;
padding: 2px;
}
.dropdown dd {
position:absolute;
top:0;
overflow:hidden;
width:325px;
display:none;
opacity:0;
list-style:none;
background-color: #000000;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
.dropdown ul {
width:325px;
}
.dropdown li {display:inline}
.dropdown a, .dropdown a:active, .dropdown a:visited {
display:block;
padding:5px;
color:#CCCCCC;
text-decoration:none;
width:169px;
}
.dropdown dd a, .dropdown dd a:active, .dropdown dd a:visited {
display:block;
padding:2px;
color:#CCCCCC;
text-decoration:none;
width:325px;
}
.dropdown dd a:hover {
color:#000000;
background-color: #CCCCCC;
width: 170px;
}
.dropdown .underline {
width: 325px;
padding: 2px;
border: 1px solid #FFFFFF;
}