CODEWITHSUNDEEP
htmlcss
karsius
karsius

Reputation: 13

CSS: cannot access dropdown menu

I am trying to make a dropdown navigation bar, but I keep getting problems with being able to access the drop down menu. The menu itself will display fine, the problem comes when I want to access the drop down menu: as soon as I move my cursor off the buttons that unhides the dropdown list, the dropdown list itself disappears.

http://codepen.io/anon/pen/bNGqvp

CSS:

#navigation li {
  display:          inline;
}

/*navigation text*/
.nav a
{
    display: inline-block;
    padding: 0 20px;
    background:#383838;
    border-radius: 2em;
    border: 1px solid #272727;
    color:#C4B09C;
    text-decoration:none;
    font: bold 12px Arial;
    line-height: 27px;
    margin-right:1 px;
    position: relative;
    left: 250px;
    top: 7px; 
}


/*naviagation menu*/
.nav  {
    background: #333; 
    background: -moz-linear-gradient(#383838, #272727);
    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#383838), to(#272727)); 
    background: -webkit-linear-gradient(#383838, #272727);
    border-bottom: 1px solid #222;
}




/*menu hover*/
.nav li >ul {display : none;}

.nav li:hover > ul  {
    display: block;
    position: absolute;
    padding-top: 20px;
    margin-left: 20%;
}

HTML:

   <div class="nav">
        <ul id="navigation">
            <li><a href="../index.html">Home</a></li>
            <li><a href="blog.html">Blog</a></li>
            <li><a href="#">Media</a>
                <ul>
                <li><a href="audio.html">Audio</a></li>
                <li><a href="video.html">Video</a></li>
                </ul>
            </li>
            <li><a href="#">About Me</a>
                <ul>
                <li><a href="faq.html">FAQ</a></li>
                <li><a href="contact.html">Contact</a></li>
                </ul>
            </li>
            <li><a href="honesty.html">Honesty</a></li>
        </ul>
    </div>

Upvotes: 1

Views: 292

Answers (1)

Ian Hazzard
Ian Hazzard

Reputation: 7771

All you need to do is add width: 100% to the .nav :hover. That way, you are still technically hovering the navigation bar, when you go to click on the sub-navigation items.

This is tried and true - example here:

http://codepen.io/anon/pen/VYwpdN

Upvotes: 3

Related Questions