BrunoEarth BrunoEarth - 2 months ago 12
Javascript Question

Dropdown menu for webpage

I created a simple website for practice purposes. I'm trying to create a dropdown menu for the Items in navigation but when I ran the website, it doesn't show anything. All files are saved in desktop.

Here is the code for my html(main.html) with jquery(jquery-1.3.2.min.js):



function mainmenu() {
$(" #nav ul ").css({
display: "none"
});

$(" #nav li ").hover(function() {
$(this).find('ul:first').css({
visibility: "visible",
display: "none"
}).show(400);
}, function() {
$(this).find('ul:first').css({
visibility: "hidden"
});
});
}

$(document).ready(function() {
mainmenu();
});

body {
font-family: 'lucida grande', Tahoma, Verdana, Arial, sans-serif;
background-color: #e9e9e9;
}
#wrapper {
width: 1080px;
margin: 0 auto;
padding: 10px;
border: 5px solid #dedede;
background-color: #fff;
}
#banner {
height: 200px;
border: 3px solid #E3E3E3;
background-color: blue;
background-repeat: no-repeat;
background-size: cover;
}
#navigation {
height: 60px;
border: 3px solid #E3E3E3;
margin-top: 20px;
margin-left: 5px;
margin-right: 5px;
background-color: red;
text-shadow: 0.1em 0.1em #333;
}
#nav {
list-style: none;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
width: auto;
display: none;
}
#nav li {
font-size: 24px;
float: left;
position: relative;
width: 180px;
height: 50px;
}
#nav li ul li {
background-color: green;
background-repeat: no-repeat;
background-size: cover;
border: 3px solid #E3E3E3;
padding-left: 10px;
}
#nav a:link,
#nav a:active,
#nav a:visited {
display: block;
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: lightblue;
}
#content_area {
float: left;
width: 750px;
height: 382px;
margin: 20px 0px 20px 5px;
padding: 10px;
border: 3px solid #E3E3E3;
}
#sidebar {
float: right;
width: 250px;
height: 402px;
margin: 20px 10px 20px 10px;
border: 3px solid #E3E3E3;
background-color: yellow;
}
#footer {
clear: both;
width: auto;
height: 40px;
margin-top: 20px;
background-color: blue;
text-shadow: 0.1em 0.1em #333;
color: #fff;
text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<div id="wrapper">
<div id="banner">

</div>

<div id="navigation">
<ul id="nav">
<li><a href="#">Home</a>
</li>
<li><a href="#">Items</a>
</li>
<ul>
<li><a href="#">T-Shirt</a>
</li>
<li><a href="#">Pants</a>
</li>
<li><a href="#">Accessories</a>
</li>
</ul>
<li><a href="#">Shop</a>
</li>
<li><a href="#">About</a>
</li>
</ul>
</div>

<div id="content_area">


</div>

<div id="sidebar">

</div>

<div id="footer">
<p>All rights reserved</p>
</div>
</div>




Answer

Yes the error is inside your code. You are trying to target the first ul inside the li but in your code you the ul is standalone/ outside the li.

<li><a href="#">Items</a>
  </li>
  <ul>
    <li><a href="#">T-Shirt</a>
    </li>
    <li><a href="#">Pants</a>
    </li>
    <li><a href="#">Accessories</a>
    </li>
  </ul>

see the ul is out side the Items li, put it inside and it will work like this.

<li><a href="#">Items</a>      
  <ul>
    <li><a href="#">T-Shirt</a>
    </li>
    <li><a href="#">Pants</a>
    </li>
    <li><a href="#">Accessories</a>
    </li>
  </ul>
  </li>

You were putting a ul inside a ul directly.