0

How can I expand to see the computed width when I have to mouse over to make the event happen? Whenever I mouse over a link in my menu the width gets changed from 270 pixels to 850 pixels and throws the entire menu out of whack.

But I can't determine what CSS style element is causing this shift, because I have to hold the mouse over the link, and there's no way to expand the computed style to see what is causing this.

I tried using the tab and arrow keys thinking that would cycle me through Chrome's UI elements, but no luck. Any ideas?

Chrome Developer Tools

BTW: the menu is created by a 3rd party tool that I have wrapped in asp.net. Here's the created element that is being affected:

<td emtype="c" colspan="2" class="ParentItemContentCell"><a href="/Admin/Default.aspx?p=9">Admin Home</a></td>

And here's the CSS code, in case you care to see it:

.ParentItemContentCell
{
        width:100%;
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #FFFFFF;
    text-align: center;
    white-space: nowrap;
}
.ParentItemContentCellOver
{
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #361A53;
    text-align: center;
    white-space: nowrap;
    width:100%;
}

.ParentItemContentCellOver a
{
    font: 12px Tahoma; 
    text-transform: uppercase;
    color: #361A53;
    text-align: center;
    white-space: nowrap;
    width:100%;
    text-decoration:none;
}
Cody Guldner
  • 2,888
  • 1
  • 25
  • 36
Webmentorman
  • 41
  • 4
  • 2
    By right-clicking an element in the inspector html view, you can force a state change(:active, :hover, etc). You can then use this to debug further. Also, without seeing more html, or a link to your page, a good chunk of us are going to have a hard time debugging your code. – Daedalus Mar 09 '13 at 04:46

1 Answers1

1

there are two answers for this question

hover checkbox in styles pane

hover checkbox in styles

and element state context menu

and element state context menu

Community
  • 1
  • 1
loislo
  • 14,025
  • 1
  • 28
  • 24