CODEWITHSUNDEEP
htmlcssmenu
Josh Woelfel
Josh Woelfel

Reputation: 1969

displaying sub-menu's on hover problems

I have 2 separate menu's. I want to display the links within menu #2 when hovering over certain buttons on Menu #1. I want to try and do this with CSS if possible. Some of the css I am using is below.

HTML: 

<nav>
    <ul>
        <li><a href="http://www.xecforce.com">HOME</a></li>
        <li><a href="#">NEWS</a></li>
        <li><a href="#">FORUMS</a></li>
                <li><a href="#">GAMES</a></li>
                <li><a href="#">XECOM</a></li>
    </ul>
</nav>

<div id="sub-menu-items">
<ul>
  <li><a href="#">Test 1</a></li>
  <li><a href="#">Test 2</a></li>
</ul>
</div>

CSS: 

#sub-menu-items ul li {
list-style-type: none;
z-index: 99999;
margin-right: 15px;
padding-bottom: 8px;
padding-top: 8px;
display: none;
text-shadow: 2px 3px 3px #080808; 
}

nav ul li:first-child:hover #sub-menu-items ul li {
display: inline;
}

how is this not working?

Upvotes: 0

Views: 3754

Answers (3)

earthdesigner
earthdesigner

Reputation: 169

The ':hover' state of an element can only affect its child elements. To make use of :hover to affect external elements you can make use of javascript.

The CSS in this line

nav ul li:first-child:hover #sub-menu-items ul li {display: inline;}

is looking for "#sub-menu-items ul li" inside the first "li" of "nav".

Depending on your layout you can achieve the desired effect only if you move the second menu inside the first menu.

Upvotes: 0

Jesse Lee
Jesse Lee

Reputation: 1301

The sub-menu-items need to be a child of the li you are hovering. Thats what this selector means:

nav ul li:first-child:hover #sub-menu-items ul li

CSS drop down menus are done like this:

HTML 

<ul>
<li>Parent Item
    <ul>
       <li>Sub item</li>
       <li>Sub item</li>
    </ul>
</li>
<li>Parent Item
    <ul>
       <li>Sub item</li>
       <li>Sub item</li>
    </ul>
</li>
</ul>

CSS

ul ul {
display: none;
}

ul > li:hover ul {
display: block;
}

Upvotes: 1

Neeraj
Neeraj

Reputation: 142

You will need to nest the sub-menus within parent 'li' Your code will be something like this:

<nav>
    <ul class="parent-menu">
        <li><a href="http://www.xecforce.com">HOME</a></li>
        <li><a href="#">NEWS</a>
           <ul class="sub-menu">
             <li><a href="#">Test 1</a></li>
             <li><a href="#">Test 2</a></li>
           </ul>
        </li>
        <li><a href="#">FORUMS</a></li>
        <li><a href="#">GAMES</a></li>
        <li><a href="#">XECOM</a></li>
</ul>
</nav>

Then you can style sub-menu ul & li (preferably position:absolute) and css can be: .parent-menu li:hover .sub-menu { display:block}

Upvotes: 1

Related Questions