I need help with creating a sub menu on my Navigation Menu
Hi all,
I am learning HTML and CSS, and new to this forum so I hope I am posting correctly. I am stuck on creating a drop down menu on my navigation menu can any one help me please the HTML is
I am stuck on creating a drop down menu on my navigation menu can any one help me please
That question used to be asked so many times, I wrote a tutorial about it. It is linked from my signature page, and it is a tut for dummies -- very easy. Let me know.
__________________ Frank
How to: Target IE in, Position in, Center in, Create a Fixed ('Sticky') Footer with, and Create a Drop-Down/Fly-Out Menu with CSS: Website Laten Maken Amsterdam.
Hi guys and thanks to both of you for your support, I changed the code but when I did a test, the sub-menu had just dropped down and not allowed me to hover over it and then drop down, so when I tested it live,it looked like I had another menu bar underneath the main menu bar, so im unsure on what bit of the CSS i have to change or adjust so I can have it drop down when hovered over and when not hovered it goes back up. If all that makes sense...lol. If at all possible is there anyway i can have the bits highlighted or underlined so i know where i am going wrong and what i have to change it to.
Thank you all again so much for your time and help.
I changed the code but when I did a test, the sub-menu had just dropped down and not allowed me to hover over it and then drop down, so when I tested it live,it looked like I had another menu bar underneath the main menu bar
It's impossible to tell what you're doing with seeing your code. The easiest way would be to give us a link to the test site and be sure to upload the most current version of your code to that site.
Posting what you have here in the forum works too.
Maybe just taking the entire example, copy/paste that into a new .html document and view it in your browser. You can then make edits to the code to see what makes it work and what breaks it.
Look at the comments I've added-
Code:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
margin: 0;
font: 100% "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #000;
background: #fc6;
}
#container {
width: 800px;
margin: 30px auto 900px;
padding: 25px 0 400px;
background: #f63;
}
ul#nav {
margin: 0;
padding: 0;
line-height: 30px;
text-align:center;
}
ul#nav li {
float: left;
margin: 0;
padding: 0;
position: relative;
list-style: none;
background: #c93;
}
ul#nav li a {
width: 198px;
display: block;
border: 1px solid #fff;
text-align: center;
text-decoration: none;
color: #fff;
text-shadow: 0.1em 0.1em 0.3em #000;
}
ul#nav li:hover {background: #cc3;}
ul#nav ul {
position: absolute;
margin: 0;
padding: 0;
left: 0;
top: 31px;
visibility: hidden; /*hides dropped ul*/
}
ul#nav li:hover ul {visibility: visible;} /*makes dropped ul visible when parent li is hovered*/
ul#nav a:hover {color: #666666;}
aside {
width: 200px;
float: left;
padding: 50px 0 200px 0;
text-align: center;
background: #960;
}
section {
margin: 0 0 0 200px;
padding: 20px;
background: #663;
}
</style>
</head>
<body>
<div id="container">
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a>
<ul>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
<li><a href="#">Linky</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
<aside>
<p>left column stuff here</p>
</aside>
<section>
<p>Some text here because we need to verify the dropdown menu works when there is content directly below it</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no
sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo
duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
</p>
</section>
<!--container--></div>
</body>
</html>
I don't know where I change the CSS. I am soooooooo new at this if this makes sense to any one im sure its such a small stupid thing but if shown im sure i can do it in the future.
Before you post, read our: 
