CODEWITHSUNDEEP
htmlcssdrop-down-menuhyperlink
MPStimpson
MPStimpson

Reputation: 336

CSS drop down menus links not working

I'm trying to get a drop down menu to work with this button so far it's all going well, but when I click on the menu and try to click one of the link's it closes the drop down menu instead of opening the link. Any ideas? (I know there's a way to format this post to have you be able to test the code in this browser, but I'm not sure how to do that)

<!doctype html>

<html>
    <head>
        <meta charset="UTF-8"/>
        <title>index</title>
        <link rel="stylesheet" type="text/css" href="css.css"/> 
    </head>
    <body>
        <nav class="nav-main">
            <ul>
                <li>
                    <a href="#" class="nav-item"><img src="images/resume btn.jpg"/></a>
                    <div class="nav-content">
                        <div class="nav-sub">
                            <ul>
                                <li><a href="www.google.com">Acting</a></li>
                                <li><a href="www.youtube.com">Choreographer/Dancer</a></li>
                            </ul>
                        </div>
                    </div>
                </li>

            </ul>   
        </nav>
    </body>
</html>

Here is the CSS

.nav-main .logo{
    height:40px;
    font-size:1.4em;
    line-height:40px;

}

.nav-main > ul{
    list-style-type:none;

}

.nav-main > ul > li{
    float:left;

}

.nav-content{
    overflow:hidden;
    background-color:tan;
    max-height:0;

}

.nav-content a{
color:black;
text-decoration:none;

}

.nav-content a:hover{
    text-decoration:underline;

}

.nav-sub ul{
    padding:0;
    margin:0;
    list-style-type:none;
}

.nav-sub ul li a{
    display:inline-block;
    padding:5px;
}

.nav-item:focus ~ .nav-content{
    max-height:400px;
    -webkit-transition:max-height 0.4s ease-in;
    -moz-transition:max-height 0.4s ease-in;
    transition:max-height 0.4s ease-in;
}

Upvotes: 0

Views: 5834

Answers (4)

dmurry2
dmurry2

Reputation: 11

I had the same problem! I think you and I followed the same video and I checked the comment and someone posted this piece of code and it works! just add it after the other .nav-content markup! this was driving me crazy for 2 days straight.

.nav-content:active {
   max-height: 400px;
}

Upvotes: 1

bilal
bilal

Reputation: 1

I've isolated the issue to the problem being with the max-height:0;. If you comment that out and click on the sub menu options, it should redirect.

With that said I don't know what to change to make the max-height work. It's needed since it will hide the submenu. You may need to use jquery.

Upvotes: -1

UgaBeluga
UgaBeluga

Reputation: 132

First of all you are using too much elements for task simple as that. Please use this markup: 

<nav class="nav-main">
    <ul>
        <li>Menu item 1
            <ul>
                <li><a href="http://google.com">Sub menu item 1</a></li>
                <li><a href="http://youtube.com">Sub menu item 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

In this markup use this css:

nav ul li ul{display: none; // or whatever code you want for hiding sub menu items}
nav ul li:hover ul{display: block; // or whatever code you want for showing sub menu items}

Also, someone already mentioned that you should use 'http://' in links even though its not mandatory.

One more mistake you have made is inside img tag:

<img src="images/resume btn.jpg"/>

Space between resume & btn is not really cool.

Hope this helps you.

Upvotes: 1

Dave Burns
Dave Burns

Reputation: 327

you don't need the ">" in the css, example: .nav-menu ul li - also make sure your links have http:// before www

Upvotes: 0

Related Questions