CODEWITHSUNDEEP
htmlmenucss
Learning
Learning

Reputation: 20001

Horizontal CSS based menu styling not working

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

  1. 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.
  2. 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>

Upvotes: 1

Views: 249

Answers (1)

Sahil Grover
Sahil Grover

Reputation: 219

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.

Upvotes: 2

Related Questions