Dropdown menu alignment
Posted: 20 January 2011 05:47 PM   [ Ignore ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-20

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;
 
left0px;
}


ul
.dropdown li:hover ul {
 visibility
visible;
}

/* -----------------END OF DROPDOWN ------------------------- */

ul.dropdown {
 position
relative;
 
z-index597;
 
floatleft;
}
ul
.dropdown,
ul.dropdown li,
ul.dropdown ul {
 
list-stylenone;
 
margin0;
 
padding0;
}

ul
.dropdown a,
ul.dropdown span {
 display
block;
 
padding7px 10px;
}

    ul
.dropdown li {
    float
left;
    
line-height10px;
    
vertical-alignmiddle;
    
zoom1;
    
border-bottom1px solid #fff;
    
background-color#f1f0ec;
    
color#000;
    
padding0;
    
}    
    
    
    
/* ------------------ border for the whole window ------------- */
    
    
ul.dropdown ul {
    border
2px #fff solid;
    
visibilityhidden;
    
positionabsolute;
    
top100%;
    
left0;
    
z-index598;
    
width100%;
    
}
    

/* ------------------ for top menu links ------------- */
    
ul.dropdown li.topmenu {
    color
#000;
    
background-colorwhite;
    
border-bottom5px solid #f1f0ec;
    
font-size19px;
    
font-family"chaparral-pro-1","chaparral-pro-2";
    
padding-left6px;
    
}
    
    ul
.dropdown li.lastmenu {
    padding
-right10px;
    
}
    
    
    
    ul
.dropdown li.topmenu_link {
    
    }    
    
    ul
.dropdown li.topmenu:hover {
    color
#000;
    
background-colorwhite;
    
}
    
    
    
    
/* -------------- END for top menu links ------------- */
    
    
    /* -- for final link -- */
    
ul.dropdown li.hover,
    
ul.dropdown li:hover {
    position
relative;
    
z-index599;
    
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
-right15px;
    
// 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-top5px;
    
font-size13px;
    
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-left160px;
    
//    margin-top: -10%;
        
padding0;
    

    
    ul
.dropdown ul a,
    
ul.dropdown ul span {
     padding
5px;
    
}

ul
.dropdown-horizontal ul *.dir {
 padding
-right15px;
// background-image: url(../images/nav-arrow-right.png);
 
background-position9850%;
 
background-repeatno-repeat;
}

ul
.dropdown-horizontal ul *.bracelets {
    background
-imageurl(../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

Profile
 
 
Posted: 21 January 2011 06:37 PM   [ Ignore ]   [ # 1 ]
Newbie
Rank
Total Posts:  2
Joined  2011-01-20

can someone please help. i have a deadline today.

Profile