[Solved] Drop Down Triggering When It Shouldn’t

[grovesk]

Hi – I’ve got a drop down that was built by someone else, and it’s triggering when it shouldn’t. Can someone have a look at it for me and offer some suggestions?

Here’s the page

The menu I’m referring to is the My Account just to the left of the search bar. If you place your mouse just under the search field, about half way along, it’s triggering the drop down. The client wants i to trigger ONLY when you hover over the words My Account.

It uses CSS Sprites for the background images (I have no experience with sprites) but it seems to be that the top image is the trigger, rather than the words My Account.

Here’s the CSS for that section.

.wrapper { width:960px; margin-left:auto; margin-right:auto}

.wp_1100 { width:100%;}

.top-line, .bottom-line { width:100%; height:3px; overflow:hidden}

.top-line { background:url(../images/topline.png) repeat-x 0 1px}

.bottom-line { background:url(../images/bottomline.png) repeat-x}



.header {

z-index:1;

height:auto

}

.header .logo {

top:72px;

left:0

}

.header .top {

z-index:2;

top:0;

height:35px;

background:#333130;

color:#fff

}



.header dl, dt, dd, ol, ul, li, td { margin:0; padding:0;}



.header .top .wrapper { z-index:3}

.header .top-line { top:35px}

.header .links { top:10px; right:188px;}

.header .my-account { top:7px; right:35px; width:152px; padding-top:3px}

.header .search {

z-index:3;

top:10px;

right:0;

width:104px;

height:15px;

overflow:hidden;

background-image: url(../images/search-bg.png);

background-repeat: no-repeat;

}

.rel { position:relative} .abs { position:absolute} .fixed { position:fixed}



.header .links li {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 15px;

position:relative;

display:inline;

float:left;

height:15px;

margin-left:10px;

}

.header .links li a {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 15px;

font-size:10px;

color:#FFFFFF;

text-decoration:none;

}



.header .links li a:hover {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 15px;

text-decoration:none;

color:#ACA700

}



.header .my-account dt {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 15px;

height:15px;

padding-left:21px;

padding-bottom:7px;

background:url(../images/account-icon.png) no-repeat 10px 3px;

color:#fff;

overflow:hidden;

}



.header .my-account dd { display:none} /*change to visible to edit, none to hide*/



.header .my-account dd.bottom {

height:13px;

overflow:hidden;

background-image: url(../images/my-account-bg.png);

background-repeat: no-repeat;

background-position: -304px bottom;

}



.header .my-account dd.list {

width:136px;

padding-left:7px;

padding-right:11px;

font:10px/16px 'Interstate Light', Interstate, Arial;

background-image: url(../images/my-account-bg.png);

background-repeat: repeat-y;

background-position: -152px 0;

}



.header .my-account li {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;

padding-left:14px;

list-style-type: none;

}

.header .my-account li a {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;	color:#e55302;

text-decoration: none;

}

.header .my-account li:hover {

font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px;	background:#f4f2f2;

text-decoration: none;

}

.header .my-account li:hover a, .header .my-account li a:hover { 	font-family: 'InterstateLight', Arial, Helvetica, sans-serif;

font-size: 10px; color:#aca700; text-decoration:none}



.header .my-account:hover { background:url(../images/my-account-bg.png) no-repeat}

.header .my-account:hover dt { background-position:10px -19px; color:#aca700}

.header .my-account:hover dd { display:block}



* html .header .my-account dd.bottom { background:url(../images/my-account-bg-ie6.png) no-repeat -304px bottom;}

* html .header .my-account dd.list { background:url(../images/my-account-bg-ie6.png) repeat-y -152px 0}

* html .header .my-account:hover { background:url(../images/my-account-bg-ie6.png) no-repeat}



.header .search .txt { width:80px; padding:1px 4px; border:none; background:none; font:10px/13px MinionPro, Arial; color:#333}

.header .search .btn { top:0; right:0; width:15px; height:15px; padding:0; background:none; border:none; cursor:pointer; text-indent:-9999px; overflow:hidden}

any help would be great.

Thanks Karen

[XaviJr]

The problem could be the width from .my-account abs dl.

[grovesk]

Hi XaviJr – Can you explain some more? I don’t know what to fix.

If I change the width on .header .my-account it doesn’t seem to make a difference.

Thanks, Karen

[grovesk]

Did a bit of experimenting.

If I comment out right: 35px and change width to auto (as below) it functions the way it should.

.header .my-account{

top: 7px;

/* right: 35px; */

width: auto;

padding-top: 3px;

}

But as soon as move it back to the left of the search box, it doesn’t. So it has something to do with the right positioning. Any suggestions from here?

[TheDoc]

Make this modification:

.header .search {

height: 22px;

}

[grovesk]

Brilliant. Thanks Doc! :)

[Author]

Posts