CODEWITHSUNDEEP
htmlcssdrop-down-menuhover
cepiolot
cepiolot

Reputation: 71

Hover is not displaying a dropdown menu

I'm trying to make a drop down menu but the hover is not producing the desired display effect. I just want the drop down menu to display when the mouse hovers over the list element. I'm new to HTML and CSS, so I can't pinpoint my error.

The relevant HTML:

#strip{
    	width: 950px;
    	height: 28px;
    	background-color: #2c276d;
    	font-size: 10pt;
    }
    
    .strip{
    	margin:0;
    	padding: 0;
    }
    
    .strip li{
    	list-style-type: none;
    	float: left;
    }
    
    .strip li a {
    	color: white;
    	text-decoration: none;
    	display: block;
    	text-align: center;
    	width:140px;
    	height:23px;
    	padding-top:5px;
    	border-right: 1px solid #FFFFFF;
    }
    
    .strip li.shrt a{
    	width: 145px;	
    }
    
    .dropdown {
    	position: relative;
    	display: inline-block;
    }
    
    .dropcmpy {
    	display: none;
    	position: absolute;
    	background-color: #2c276d;
    	font-size: 10pt;
    	width: 145px;
    }
    
    .dropcmpy a {	
    	color: white;
    	display: block;
    	text-decoration: none;
    	padding: 5px;
    	border-top: 1px solid #FFFFFF;
    }
    
    .strip li a:hover{
    	background-color: #28A2D5;
    }
    
    li.shrt:hover .dropcmpy {
    	display: block;
    }
 <div id="main">
    	<div id="strip">
    		<ul class="strip">
    			<li class="shrt"><a href="#">Com</a></li>
    		</ul>
    	</div>
    	<div class="dropcmpy">
    		<a href="#">Key</a>
    		<a href="#">Ad</a>
    		<a href="#">Fac</a>
    		<a href="#">Car</a>
    		<a href="#">FAQ</a>
    	</div>
    </div>

No matter how I format that last piece of CSS, it doesn't produce a drop down menu, unless I do

#main:hover .dropcmpy {
        display: block;
    }

or give the first div a class, and then use that. Otherwise the dropdown menu will not appear. This presents the issue that the entire strip will then produce the menu, while I want only the shrt to.

Upvotes: 0

Views: 1894

Answers (4)

JohnCH
JohnCH

Reputation: 367

In order to show an object on hover with css, that object must be the sibling or child of the thing being hovered (As there are no parent selectors). This is not the case in your code.

So you have a few options:

  • Make div.dropcmpy a child of li.shrt. (As in Teuta Koraqi's answer)

  • Hack. Use an empty pseudo element (.dropcmpy::before) and absolutely position it over li.shrt, then use that as the hover element.

  • Use javascript

I don't know what the structure of your page is so can't say which of these would be best for you. The first is certainly the cleanest if you can manage it.

Upvotes: 0

Ludv&#237;k Bobek
Ludv&#237;k Bobek

Reputation: 61

As john stated, selector .class1 .class2 is targeting an element with class="class2" that is a child of an element with class="class1".

which means you need to put the dropdown menu INSIDE the element, thats supposed to show the dropdown when hovered.

Usuall way is using another list inside the button, for example

<div id="main">
    <div id="strip">
        <ul class="strip">
            <li class="shrt">
                <a href="#">Com</a>
                <ul class="dropcmpy">
                    <li><a href="#">Key</a></li>
                    <li><a href="#">Ad</a></li>
                    <li><a href="#">Fac</a></li>
                    <li><a href="#">Car</a></li>
                    <li><a href="#">FAQ</a></li>
                </ul>
            </li>
        </ul>
    </div>
</div>

and css

.dropcmpy {display: none;}
.shrt:hover .dropcmpy {display: block;}

That should do it, hope it was helpful :).

Upvotes: 1

John Rusch
John Rusch

Reputation: 21

After a reminder from @JohnCH, I realized you could do a sibling selector like this to get the functionality I think you want.

#strip:hover+.dropcmpy {
  display: block;
}

Upvotes: 0

John Rusch
John Rusch

Reputation: 21

The problem is with inheritance. The last block that you are trying to use is looking for a .dropcmpy element that is a child of .shrt (which obviously doesn't exist). The reason the alternative works is because .dropcmpy is a child of #main.

I don't see any issue with using #main as the hover listener, since everything related to the dropdown is contained in it anyways.

Upvotes: 0

Related Questions