Hello. I need some help with this menu, and it is kind of urgent.
I have this html file:
<ul id="dropdownmenu" class="dropdown dropdown-horizontal">
<!-- The style of this menu can be modified from 'menu.css' file -->
<li class="topmenu topmenu_link topmenu_bracelets"><a href="[removed]void(0);">Bracelets</a>
<ul>
<li><a href="./" class="dir bracelets">Birthstone Bracelets</a>
<ul class="notprimary">
<li><a href="./" class="dir bracelets">Corporate Use</a>
<ul class="notprimary">
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
<li><a href="./">Corporate Use</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li><a href="./">Private Use</a></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul>
</li>
<li><a href="./" class="dir bracelets">Used</a>
<ul class="notprimary">
<li><a href="./">Birthstone Bracelets</a></li>
<li><a href="./">Private Use</a></li>
<li><a href="./">Birthstone Bracelets</a></li>
<li><a href="./">Private Use</a></li>
<li><a href="./">Birthstone Bracelets</a></li>
<li><a href="./">Private Use</a></li>
</ul>
</li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
<li><a href="./">Featured</a></li>
<li><a href="./">Top Rated</a></li>
<li><a href="./">Prices</a></li>
</ul>
</li>
</ul>
and this css file:
@charset "UTF-8";
ul.dropdown ul li {
float: none;
}
ul.dropdown ul ul {
top: 0px;
left: 0px;
}
ul.dropdown li:hover > ul {
visibility: visible;
}
/* -----------------END OF DROPDOWN ------------------------- */
ul.dropdown {
position: relative;
z-index: 597;
float: left;
}
ul.dropdown,
ul.dropdown li,
ul.dropdown ul {
list-style: none;
margin: 0;
padding: 0;
}
ul.dropdown a,
ul.dropdown span {
display: block;
padding: 7px 10px;
}
ul.dropdown li {
float: left;
line-height: 10px;
vertical-align: middle;
zoom: 1;
border-bottom: 1px solid #fff;
background-color: #f1f0ec;
color: #000;
padding: 0;
}
/* ------------------ border for the whole window ------------- */
ul.dropdown ul {
border: 2px #fff solid;
visibility: hidden;
position: absolute;
top: 100%;
left: 0;
z-index: 598;
width: 100%;
}
/* ------------------ for top menu links ------------- */
ul.dropdown li.topmenu {
color: #000;
background-color: white;
border-bottom: 5px solid #f1f0ec;
font-size: 19px;
font-family: "chaparral-pro-1","chaparral-pro-2";
padding-left: 6px;
}
ul.dropdown li.lastmenu {
padding-right: 10px;
}
ul.dropdown li.topmenu_link {
}
ul.dropdown li.topmenu:hover {
color: #000;
background-color: white;
}
/* -------------- END for top menu links ------------- */
/* -- for final link -- */
ul.dropdown li.hover,
ul.dropdown li:hover {
position: relative;
z-index: 599;
cursor: default;
background-color: #e0e0e0;
color: #000;
}
/* -- for submenu title that has subs -- */
ul.dropdown li:hover > *.dir {
// border: 1px #d9d9d9 solid;
background-color: #e0e0e0;
color: #000;
//font-size: 13px;
//font-weight: bold;
}
ul.dropdown li a,
ul.dropdown *.dir {
padding-right: 15px;
// border: 1px solid #fff;
}
ul.dropdown li a:active {
// background: url(images/grad1.png) repeat-x;
// font-weight: bold;
}
/* -- END for submenu title that has subs -- */
/* Mixed */
ul.dropdown a:link,
ul.dropdown a:visited { color: #000; text-decoration: none; }
ul.dropdown a:hover { color: #000; }
ul.dropdown a:active { color: #ffa500; }
/* Non-first level */
ul.dropdown ul {
width: 160px;
margin-top: 5px;
font-size: 13px;
font-family: "myriad-pro-1","myriad-pro-2",sans-serif;
}
ul.dropdown ul li {
// font-weight: normal;
//margin-left: -60px;
}
ul.dropdown ul.notprimary {
// position: absolute;
// top: 5px;
margin-left: 160px;
// margin-top: -10%;
padding: 0;
}
ul.dropdown ul a,
ul.dropdown ul span {
padding: 5px;
}
ul.dropdown-horizontal ul *.dir {
padding-right: 15px;
// background-image: url(../images/nav-arrow-right.png);
background-position: 98% 50%;
background-repeat: no-repeat;
}
ul.dropdown-horizontal ul *.bracelets {
background-image: url(../images/nav-arrow-right-bracelets.png);
}
Right now i am getting this:
http://img62.imageshack.us/i/menunow.png
I need this:
http://img254.imageshack.us/i/menuwant.png/
meaning i need the submenus to align to the top.
Any help appreciated. Thanks