3 Replies - 1985 Views - Last Post: 20 September 2013 - 06:55 AM

#1 StuartS   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-September 13

Trouble Creating A Drop Down Menu

Posted 16 September 2013 - 04:51 AM

Hello Everybody. I'm sorry for being such a noob but I'm having real difficulty trying to create a drop down menu for my navigation bar. I've only just started to learn to code so I am finding it really difficult and it is getting very frustrating for me. Any help would be greatly appreciated.

This is the code for my navigation bar that I'm proud to say I created myself.

 <!DOCTYPE html>
<html>
<br><br>
<h1><center><FONT FACE="showcard gothic">Thank You</font></center></h1>
<head>
<title>Thanks</title>
<style>
ul
{
list-style-type:none;
margin:0;
padding-left:125px;
padding-right:75px;
overflow:hidden;
}
li
{
float:left;
}
a:link,a:visited
{
display:block;
width:75px;
height:25px;
font-weight:bold;
font-size:125%;
color:#FFFFFF;
background-color:#000000;
border-color: #000000;
border-style: solid;
border-width: 10px;
text-align:center;
padding:25px;
text-decoration:none;
}
a:hover,a:active
{
color: #000000;
background-color:#FFFFFF;
}

</style>
</head>

<body>
<ul>
<li><a href="https://www.google.co.uk/">Home</a></li>
<li><a href="https://www.google.co.uk/">About</a></li>
<li><a href="https://www.google.co.uk/">News</a></li>
<li><a href="https://www.google.co.uk/">Contact</a></li>
<li><a href="https://www.google.co.uk/">Books</a></li>
<li><a href="https://www.google.co.uk/">Standings</a></li>
</ul>
<br><br>
</body>
  <body>
  </body>

</html>


However, I'm having difficulty creating a drop down menu. All I want is simple black and white drop down menus that would appear under the about, news, contact, books and standings tabs. (The text can be black and the background white or vice versa, I don't mind). I keep looking online at drop down menus in html, css and jquery but I'm having no luck when I try and implement the coding. Ideally I would like it to look like the drop down menus on the http://www.walmart.com/ website. (I know there navigation bar is vertical whereas mine is horizontal and they have pictures but I think the plain and simple design is clear and pretty. I have gone on the walmart website, right-clicked and viewed source but when I try and adapt the code it doesn't want to work for me. Maybe I'm trying too much too soon but I'm trying my best.

P.S. I think a forum like this one is a fantastic idea and you people provide a great service that really helps people. Also, I'm using the website http://www.w3schools.com/ as well as http://www.codecademy.com/ to learn to code. It would be a great help if anyone could point me in the right direction in respect of resources for learning to code. Thanks. I hope this wasn't to much trouble. Again, thank you very much for any help provided.

Is This A Good Question/Topic? 0
  • +

Replies To: Trouble Creating A Drop Down Menu

#2 Dormilich   User is offline

  • 痛覚残留
  • member icon

Reputation: 4248
  • View blog
  • Posts: 13,465
  • Joined: 08-June 10

Re: Trouble Creating A Drop Down Menu

Posted 16 September 2013 - 04:55 AM

a prime resource for dropdowns: http://htmldog.com/a...fish/dropdowns/
Was This Post Helpful? 1
  • +
  • -

#3 andrewsw   User is offline

  • never lube your breaks
  • member icon

Reputation: 6833
  • View blog
  • Posts: 28,345
  • Joined: 12-December 12

Re: Trouble Creating A Drop Down Menu

Posted 16 September 2013 - 05:20 AM

Sorry to say but:

  • The center and font tags are obsolete (where did you pick these up from?!)
  • No presentational elements (br, h1) should appear in the html or head-tags, they should all be within the body-tags.
  • You have two sets of body tags
.

In addition to Dormilich 's link, there are 100 menu tutorials listed here.

This post has been edited by andrewsw: 16 September 2013 - 05:21 AM

Was This Post Helpful? 1
  • +
  • -

#4 StuartS   User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 2
  • Joined: 16-September 13

Re: Trouble Creating A Drop Down Menu

Posted 20 September 2013 - 06:55 AM

Thanks, I will check that link out.
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1