Click here to Skip to main content
14,825,842 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
Hi All,

I am having trouble with a drop down menu that I have created via help from an online video...Anyways my problem is that it doesnt seem to be working for me at all!! I have tried a few other designs courtesy of youtube videos but still no luck? Does that come down to human error or software issues? Please help as you my know it gets very frustrating especially when you know the steps have been followed to the exact!

When I preview on my browser it displays "Products" and all "items link" below with bullet points. Displays as a list and does not drop

"HTML code"
XML
<!DOCTYPE html>
<html lang="en">
  <head>

    <title>Untitled</title>

    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>
<body>


<div id="wrapper">
<div id="navMenu">

<ul>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>
<li><a href="#">Link Item</a></li>

</ul>
</li>
</ul>
</div>
</div>

</body>
</html>

"CSS code"
CSS
#navMenu {
margin:0;
padding:0;
}

#navMenu ul {
margin:0;
padding:0;
line-height:30px
}

#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
}

#navMenu ul li a {
text-align:center;
font-family:sans-serif, cursive;
text-decoration:none;
height:30px;
width:150px;
display:block;
color:#000;
}

#navMenu ul ul {
position:absolute;
visibility:hidden;
top:30px;
}

#navMenu ul li:hover ul {
visibility:visible;
}
Posted
Updated 2-Feb-15 2:45am
v2

I don't see the css file included in the html anywhere, is your code complete? It should be placed inside the head element like this:

<link rel="stylesheet" href="/path/to/css/page.css" />

Make sure you get the correct path too.
   
v2
Comments
Member 11414568 2-Feb-15 9:09am
   
Hi BuggyTimes. Yes added the .css file link below the <head> and yet it still displays as mentioned above
Member 11414568 2-Feb-15 9:09am
   
Hi BuggyTimes, yes I have added <link rel="stylesheet" href="#.css"></link> right below <head> but still it displays as mentioned above
   
Path seems to be wrong. Have you added the styles in a CSS file and added the url in this code?
BuggyTimes 2-Feb-15 9:57am
   
After saving the css code to a file confirm it's path is accessible from the web. It would help to show what is your exact href parameter in the <link> element.
   
Good catch. My 5. See my answer for Demo. :)
Richard Deeming 2-Feb-15 11:45am
   
link is a void element[^] (previously called a "self-closing tag"), so it doesn't need the closing </link>.

You should use either:
<link rel="stylesheet" href="/path/to/css/page.css">
or:
<link rel="stylesheet" href="/path/to/css/page.css" />
BuggyTimes 3-Feb-15 4:41am
   
This is true, I pasted it without the closing tag. Must have been added automagically :)
Yes, BuggyTimes is correct. You have not added the Styles to the Page. As a result, it is not showing as expected.

Just to show, how it works, refer the demo with your code (I have just added red background) - [Demo] DropDown Menu with HTML and CSS[^].

See that, it is working perfectly. You just need to add the CSS Styles to the Page.
Thanks to BuggyTimes and Tadit Dash for the huge help!!! All sorted now.

Quote:


missed a dot so after hours of frustration it come down to human error :)
   
Comments
Richard Deeming 2-Feb-15 11:46am
   
link is a void element[^] (previously called a "self-closing tag"), so it doesn't need the closing </link>.

You should use either:
<link rel="stylesheet" href="/path/to/css/page.css">
or:
<link rel="stylesheet" href="/path/to/css/page.css" />

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900