CODEWITHSUNDEEP
htmlcss
Marco Dinatsoli
Marco Dinatsoli

Reputation: 10580

My child UL disappears when I am no longer hovering on the parent UL

I have an ul class main_menu and I have inside it another ul class sub_menu

I want when hovering over the a tag to show the sub_menu, I did that and it works. but my problem is that when I hover over the sub_menu, it disappears.

http://jsfiddle.net/a7WhU/

This is how I display the sub_menu

.main_menu li a:hover + .sub_menu{
    display: block;
}

I guess the problem is that there is a very small area between the sum_men and the main_menu, but I couldn't find it though I tried to use Chrome F12 tool, but It didn't show any free space between them

help pleaes

Upvotes: 1

Views: 236

Answers (3)

Arnelle Balane
Arnelle Balane

Reputation: 5487

Instead of

.main_menu li a:hover + .sub_menu {
  display: block;
}

Add the :hover pseudo-class to the li element, which is the parent of your .sub_menu. This way, whether you hover on the a element or on the child ul.sub_menu, the .sub_menu will still be shown.

.main_menu li:hover .sub_menu {
  display: block;
}

Upvotes: 0

Ajesh VC
Ajesh VC

Reputation: 635

You can use this code to solve this problem 

<html>
<head>
<style type="text/css"rel ="stylesheet">
html,body{
    width: 100%;
    margin: 0;
    padding: 0;
}
.header{
   width: 100%;
   border: 1px solid #000000;
   position: relative;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
    box-sizing: border-box;
    display: inline-block;
    margin-bottom: 10px;
    position: relative;
}

#main_menu li {
list-style: none;
display: inline-block;
border: 1px solid #000000;
position: relative;
text-align: center;
}

#main_menu li a {

white-space: nowrap;
display: block;
}

#main_menu li:hover {
}

#main_menu li ul {
   display: none;
}
#main_menu li:hover > ul {
   display: block;
}
#main_menu li ul {
    width: 100px;
    height: 45px;
    background-color: red;
    position: absolute;
    margin: 0;
    padding: 0;
}

.logo_container{
    float: right;
    margin-right: 10px;
    margin-top: 10px;
}
.logo_container img{
    width: 100px;
    height: 100px;
}

.header ul#main_menu{
    margin: 0;
    padding: 0;
    float: left;
    position: absolute;
    bottom: 10px;

}
</style>
</head>
<body>
<div class="header">
    <ul id="main_menu">
        <li>
            <a href="http://localhost:8082/configurationtool/public/xmldocuments">XML Documents</a>            </li>
        <li>
            <a href="http://localhost:8082/configurationtool/public/categories">Categories</a>            </li>
        <li>
            <a href="http://localhost:8082/configurationtool/public/websiteactions">Website Actions</a>            </li>
        <li>
            <a href="#">Date</a>
            <ul>
                <li>
                    <a href="http://localhost:8082/configurationtool/public/datefunctions">Date Functions</a>                    </li>
                <li>
                    <a href="http://localhost:8082/configurationtool/public/datelocations">Date Locations</a>                    </li>
            </ul>
        </li>
    </ul>
    <div class="logo_container">
    <img src="" height="100" width="100"/>
    </div>
</div>


        <div class="content">

</div>
</body>
</html>

i just removed your image src due to length of that attachment.pls incluse that too.

see http://jsfiddle.net/s1qvtox4

Upvotes: 1

NebulaeGuy
NebulaeGuy

Reputation: 169

Well it would disappear, your are no longer hovering over the sub_menu. Try this:

.main_menu li a:hover{
    display: block;
}

.sub_menu: hover{
    display: block
}

Or something similar.

This is a very similar question: Hover on Menu dropdown - How to make Hover effect not to disappear?

Upvotes: 0

Related Questions