CODEWITHSUNDEEP
htmlcssdrop-down-menu
Swisscow
Swisscow

Reputation: 13

CSS drop down menu not appearing

I have been working on this and I think something is conflicting. I can't get the drop down menu to actually work. I think the hovers on the btn-acc might be conflicting but when I remove it, it doesn't seem to help.

The drop down menu, is not currently correctly formatted, I figured I would format that when it actually worked. Any help to make the list simply pop up when I hover over the account button?

    <div id="fb-root"><span class="panel">
      <ul class="main">             
            <li><a class="btn-acc" href="#">Account</a></li>
                <ul class="account">
                    <li>My Account</li> 
                    <li>Prefrences</li> 
                    <li>Options</li> 
                    <li>Submit a Recipe</li> 
                    <li>Forum</li> 
                    <li>About Us</li>
                </ul> 
            <li><a class="btn-logout" href="#">Log Out</a></li>
            </ul>
            </span>
            </div>


/*--CSS Starts HERE ----------*/

    .main {
    text-align: left;
     display: inline;
}
.main li {
    display: inline-block;
    position: realtive;
}

    #fb-root {
        text-align: right;
        padding:9px 12px;
        border-bottom: thin;
        border-color: black;
        }

    #fb-root .btn-acc {
        border-radius: 5px;
        border: 0 solid #01060E;
        background-color: #BAC6D7;
        margin-right: 10px;
        margin-left: 10px;
        text-align: center;
        color: #F7F7F7;
        padding: 8px 15px
    }

    #fb-root .btn-acc:hover,
    #fb-root .btn-acc:active {
        color: #F7F7F7;
        background: #2c3f52;
    }


        .btn-logout {
            margin-right: 10px;
            margin-left: 10px;  
            border-radius: 5px;
            border: 0 solid #01060E;
            background-color: #BAC6D7;
            text-align: center;
            color: #F7F7F7;
            padding: 8px 15px
        }

        .btn-logout:hover,
        .btn-logout:active {
            color: #F7F7F7;
            background: #2c3f52;
        }
        .account {
          padding: 0;
          position: absolute;
          top: 48px;
          left: 0;
          width: 150px;
          -webkit-box-shadow: none;
          -moz-box-shadow: none;
          box-shadow: none;
          display: none;
          opacity: 0;
          visibility: hidden;
          -webkit-transiton: opacity 0.2s;
          -moz-transition: opacity 0.2s;
          -ms-transition: opacity 0.2s;
          -o-transition: opacity 0.2s;
          -transition: opacity 0.2s;
        }

        #fb-root .btn-acc:hover .account{
            display:block;
            opacity:1;
            visibility: visible;    
        }

Upvotes: 0

Views: 128

Answers (4)

PRAH
PRAH

Reputation: 680

Hi you are using wrong selector for hover. your .account class is nested under other li tag not in a tag and you trying to apply hover on inside a tag

  1. first remove class .btn-acc from a and add it to li

  2. then change the last selector to this 

        #fb-root .btn-acc:hover + .account{
            display:block;
            opacity:1;
            visibility: visible;    
        }

here is your working solution

http://jsbin.com/kateletisu/6/edit

Upvotes: 1

Chris
Chris

Reputation: 55

You can do it without absolute positioning if you're clever. (http://www.w3schools.com/css/css_display_visibility.asp and http://www.w3schools.com/css/css_float.asp) Otherwise you'll need a pseudo-class on your popup menu so it doesn't disappear. Try this:

    #fb-root .acc-menu .account{
        width: 150px;
        display:none;
    }
    #fb-root .acc-menu:hover .account{
        display:inline-block;
        opacity:1;
    }

    <li class="acc-menu">
        <a class="btn-acc" href="#">Account</a>
        <div class="account">
            <ul>
                <li>My Account</li> 
                <li>Prefrences</li> 
                <li>Options</li> 
                <li>Submit a Recipe</li> 
                <li>Forum</li> 
                <li>About Us</li>
            </ul> 
        </div>
    </li>

It's important to keep in mind that when you're dealing with HTML/CSS you need to think about the document structure and the CSS styles at the same time. Even if your selectors match up in both cases the child elements inherit parent styles and are constricted by their parents' sizes. Add * {border: solid 1px; } until you're sure it's right. If you can avoid sibling selectors that's even better. Older browsers can have trouble with them.

Upvotes: 0

Xaekai
Xaekai

Reputation: 359

Your problem is that your submenu needs to be inside the <li>

fiddle

Upvotes: 0

Josh Burgess
Josh Burgess

Reputation: 9567

Here:

Fiddle example

You're missing two small things.

  1. You closed your li before your nested ul, which makes the whole element invalid HTML. The li should wrap your ul

  2. You need to define the :hover as a sibling rule, as .account isn't a child of your button. Like so:

 

#fb-root .btn-acc:hover + .account{ /*This line changed*/
  display:block;
  opacity:1;
  visibility: visible;    
 }

Upvotes: 1

Related Questions