Unable to get the drop down menu coding to work

Question

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 2-Feb-15 2:36am

Member 11414568

Updated 2-Feb-15 2:45am

Tomas Takac

v2

Add a Solution

3 solutions

Solution 3

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 :)

Posted 2-Feb-15 4:14am

Member 11414568

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" />

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

BuggyTimes · Accepted Answer · 2015-02-02T02:59:00

Solution 1

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.

Posted 2-Feb-15 2:59am

BuggyTimes

Updated 18-Feb-15 2:16am

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Feb-15 9:17am

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.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 2-Feb-15 9:17am

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 :)

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Accepted Answer · 2015-02-02T03:16:00

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.