Drop Down Menu List issues CSS

Question

My Drop Down Menu is Not WORKING! it works on Jsfiddle but not in real life...lol. I'm very new to all fo this. I hope this isn't a stupid question. I tried to find solutions but have not seen one that works the way I want this to.

<!DOCTYPE html>

    <html>
        <head>
            <title>Home - Joe </title>
            <link rel="stylesheet" type="text/css" href="home.css"/>
            <script src="Home.js" type="text/javascript"></script>
        </head>
        <body>
            <div id="header">
                <ul id="nav">
                    <li> <a href="index.html"> Home </a></li> <!-- menu-->
                    <li> <a href="music.html"> Music </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Albums</a></li> <!-- drop down list-->
                            <li><a href="#">Downloads</a></li>
                            <li><a href="#">Videos</a> </li>
                        </ul>
                    <li> <a href="Portfolio.html"> Portfolio </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Photography</a></li>
                            <li><a href="#">Designs</a></li>
                            <li><a href="#">Webpages</a> </li>
                        </ul>
                    <li> <a href="About.html"> About </a></li>
                        <ul class="dropdown">
                            <li><a href="#">Biography</a></li>
                            <li><a href="#">Interests</a></li>
                            <li><a href="#">Goals</a> </li>
                        </ul>
                    <li> <a href="Contact.html"> Contact </a></li>
                </ul>
            </div>


            <div id="ContentLeft">  
            </div>
            <div id="ContentBottom">
            </div>
        </body>
    </html>

CSS:

body {
        color: #666;
        text-align: left;
        margin: 0px;
        font-family: Roboto;
        font-weight: lighter;
    }

#header {
    width:100%;
    height:20px;
    background:#333;
    border-bottom:1px solid #000;
    padding: 5px 5px 5px 0px;
}

.dropdown{
    display:none;
    list-style-type:none;
    background:#333;
}


#nav {
    list-style-type: none;
    margin-top: 0px;
    margin-left:-30px;
    background:#333;
    float:left;

}   

#nav li {
    padding:0px 10px 0px 10px;
    float:left;
}

#nav li a {
    color: #666;
    text-decoration: none;
}

#nav li a:hover {
     color: #CCC;
}
#nav li:hover ul{
    display:block;
    position: absolute;
    margin: 0px 0px 0px -10px;
    padding:0;
    text-align: left;
}

#nav li:hover li{
    float:none;
     background:#333;
}

#nav li a:active {
     color: #FFF;
}

http://jsfiddle.net/WwuRK/ <--- I want it to work Like this.

You're likely encountering an issue with the CSS on your website because when placing your dropdown and it's relative styling alongside the website's CSS it doesn't work properly. Do you think you might be able to provide the entirety of the code so a look can be taken at where the conflict might be located? — kyle.stearns
– kyle.stearns, Commented Apr 16, 2013 at 17:23
when it works on jsfiddle then you now that the code for the menu is ok. So you must look in the code and styles of the page around the menu where it interferes with the menu. — Sven Bieder
– Sven Bieder, Commented Apr 16, 2013 at 17:25
i tried your code here jsfiddle.net/WwuRK/2 and it is NOT WORKING — Milche Patern
– Milche Patern, Commented Apr 16, 2013 at 17:25

Dom · Accepted Answer · 2013-04-16 17:30:18Z

You need to wrap <ul> in the <li>. In your current example, you are doing the following:

<body>
    <div id="header">
        <ul id="nav">
            <li> <a href="index.html"> Home </a></li> <!-- menu-->
            <li> <a href="music.html"> Music </a></li>
                                                    ^----------- remove
                 <ul class="dropdown">
                     <li><a href="#">Albums</a></li> <!-- drop down list-->
                     <li><a href="#">Downloads</a></li>
                     <li><a href="#">Videos</a> </li>
                </ul>
            </li> <-------- add removed </li> here
            <li> <a href="Portfolio.html"> Portfolio </a></li>
                                                           ^----------- remove

Remove the tags and add them after the ul.dropdown.

Here is a demo of your current code (DOES NOT WORK): http://jsfiddle.net/dirtyd77/WwuRK/4/

Here is an updated version of your code:

<div id="header">
    <ul id="nav">
        <li> <a href="index.html"> Home </a></li> <!-- menu-->
        <li> <a href="music.html"> Music </a>
            <ul class="dropdown">
                <li><a href="#">Albums</a></li> <!-- drop down list-->
                <li><a href="#">Downloads</a></li>
                <li><a href="#">Videos</a> </li>
            </ul>
        </li>
        <li> <a href="Portfolio.html"> Portfolio </a></li>
        <ul class="dropdown">
            <li><a href="#">Photography</a></li>
            <li><a href="#">Designs</a></li>
            <li><a href="#">Webpages</a> </li>
        </ul>
        <li> <a href="About.html"> About </a>
            <ul class="dropdown">
                <li><a href="#">Biography</a></li>
                <li><a href="#">Interests</a></li>
                <li><a href="#">Goals</a> </li>
            </ul>
        </li>
        <li> <a href="Contact.html"> Contact </a></li>
    </ul>
</div>


<div id="ContentLeft"></div>
<div id="ContentBottom"></div>

Working demo of the edited code: http://jsfiddle.net/dirtyd77/WwuRK/6/

Hope this helps and let me know if you have any questions.

Collectives™ on Stack Overflow

Drop Down Menu List issues CSS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related