Horizontal CSS based menu styling not working

Question

I have been using this Horizontal menu for some time Now i want to make some more changes to it

I want to highlight the parent menu only on hover affect if it has submenus. If i apply background color it applies to all the parent menus at present.
I am not good with CSS & feel this is not the right way of doing it. Please correct me css if i have not applied right css.

Example link at jsfiddle

Update Version: http://jsfiddle.net/sKDns/

I tried different ways but i am not able to get it right. Another issue i have with this menu is that when i hover over parent menu item it slightly mover down by 2px or 3px (This only happens in Google Chrome but same works fine in IE 9 & FF).

I would appreciate help in this regard

<div id="nav-wrapper">
    <ul class="dropdown dropdown-linear" id="nav">
        <li class="active"><span class="dir"><a href="#">HOME</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ABOUT US</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">ISSUE</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>
            <ul>
                <li><a href="#">Politics</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Economy</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Feature</a><span id="menus-spacer">|</span></li>
                <li><a href="#">Business</a><span id="menus-spacer">|</span></li>
            </ul>
        </li>   
        <li><span class="dir"><a href="#">ARCHIVE</a></span><span id="menus-spacer">|</span></li>
        <li><span class="dir"><a href="#">NEWS</a></span><span id="menus-spacer">|</span></li>
    </ul>
</div>

Sahil Grover · Accepted Answer · 2013-05-19 13:12:13Z

2

If I understand the question correctly, you only want the parent menu item to have a background color on hover if it has a submenu.

I've updated your jsfiddle.

I set the class of the li with a submenu to has-submenu.

<li class="has-submenu"><span class="dir"><a href="#">CATEGORIES</a></span><span id="menus-spacer">|</span>

Then I updated the CSS rule to only apply for that class:

ul.dropdown li.has-submenu:hover > *.dir
{
      background-color:#f1f1f1;
}

I hope this helps. As for the cross-browser issue, where the element is in a different position, I would suggest using something like normalize.css. Normalize will make base styles the same across browsers.

Edit: Just wanted to provide an additional note: your menu-spacer spans all have the same ID. The ID attribute should be unique for each element on the page. In this scenario it would be more appropriate to use the class attribute.

edited May 19, 2013 at 13:12

answered May 19, 2013 at 13:05

Sahil Grover

2191 silver badge3 bronze badges

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

1 Comment

Learning Over a year ago

@Thanks, Good Point. I will replace this ID by Class. You have got it right. I will try to fix the css styling issues i will see if normalize can fix those. I am not sure if my CSS is clear, It would be great if you have a snippet for such menu which i can implement.

Collectives™ on Stack Overflow

Horizontal CSS based menu styling not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related