CSS - using multiple classes for hover effect

Question

I am trying to add a mini triangle to the hover state of navigation bar.

HTML:

        <div id="menu_bars">
            <div id="main_bar">
                <ul>
                    <li class="maintabs maintabs_tri"><a href="#">Over</a></li>
<li class="maintabs maintabs_tri"><a href="#">Collar</a></li>
<li class="maintabs maintabs_tri"><a href="#">Bod</a></li>
                </ul>           
            </div>  

            <div id="css_arrow" class="maintabs_tri"><a href="#"></a>
            </div>
        </div>

The 'main_bar' div creates a horizontal navigation menu. The div id 'css_arrow' is being use to create an arrow which will show up on hover state. I game them all a class called 'maintabs_tri' which includes the triangle and the 'main_tab' navigation menu, so that when the hover state becomes active, the triangle appears on the navigation bar.

CSS:

/* START OF MAIN BAR */
#main_bar ul {
    float: left;
    width: 630px;
    height: 48px;
}

.maintabs {
    display: inline-block;
    width: 25%;
    list-style-type: none;
    background: rgba(237,237,237,1);
    background: -moz-linear-gradient(top, rgba(255,255,255,1), rgba(237,237,237,1)); 
    background: -webkit-gradient(linear, top, bottom, from(rgba(255,255,255,1)), to(rgba(237,237,237,1)));
    -moz-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
    -webkit-box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
    box-shadow: 1px 2px 2px rgba(0,0,0,0.2);
    -webkit-transition-property: 
}

.maintabs:first-child {
    -webkit-border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-topleft: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px; 
}

.maintabs:last-child {
    -webkit-border-top-right-radius: 6px;
    -webkit-border-bottom-right-radius: 6px;
    -moz-border-radius-topright: 6px;
    -moz-border-radius-bottomright: 6px;
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;        
}

.maintabs a {
    display: block;
    text-decoration: none;
    text-align: center;
    vertical-align: middle;
    line-height: 14px;
    text-shadow: 0px 1px 2px rgba(0,0,0,0.3);
    padding: 18px 0px;
}

.maintabs ul {
    display: none;
    list-style-type: none;
}

.maintabs ul li a {
    text-decoration: none;
}
/* END OF MAIN BAR */



/* TRIANGLE ------ for testing, to be used with hover later */
#css_arrow {
    border-color: transparent transparent rgba(111,46,11,0.0) transparent;
    border-style: solid;
    border-width: 8px;
    height: 0;
    width: 0;
    position: absolute;
    top: 34px;
    left: 78px;
}

.maintabs_tri a:hover {
    border-color: transparent transparent rgba(111,46,11,1) transparent;
}

Could someone share why this is not working? I cannot figure out for the life of me...

thirtydot · Accepted Answer · 2011-01-31 23:45:23Z

1

Adding to .maintabs_tri a:hover this: border-bottom: 3px solid #000 fixes it in Chrome.

The issue was that there was no border-width or border-style defined.

answered Jan 31, 2011 at 23:45

thirtydot

229k51 gold badges393 silver badges354 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Kayote Over a year ago

Thirtydot, no it didnt. The problem is that the hover effect totally breaks up the menu bar. I'm reposting this question in better words and will send you the link. Many thanks for taking the time out for this. Best,

Kayote Over a year ago

thirtydot, here is the link to the new post: stackoverflow.com/questions/4870912/…

Collectives™ on Stack Overflow

CSS - using multiple classes for hover effect

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related