Jump to content

Confused with drop-down menu code

terryds

By terryds
in CSS

 Share

Recommended Posts

terryds Member

terryds

Posted
Posted

See : http://line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu first...

 

I don't understand this section :

 

nav ul:after { content: ""; clear: both; display: block; }

I think that code is useless right ? What's the use of clear:both on that property ? It's useless right ?

 

And, when i practiced that in my page... It's not working.. Can you tell me what's wrong ?

 

my style.css

 

body,h1 {
margin: 0px;
}
body {
background-color: #FFFFFF;
font-family: Helvetica Neue, Helvetica, Verdana, Arial, sans-serif;
font-size: small;
}
#page_header {
background-color: #7EA4FC;
margin : 10px 10px 0px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding: 10px;
}
#title {
text-align: center;
}
#page_nav {
margin: 100px auto;
text-align: center;
}
#page_nav ul ul {
display: none;
}
#page_nav ul li:hover > ul {
display: block;
}
#page_nav ul {
background: #efefef;
background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
background: -webkit-linear-gradient(top, #efefef 0%,#bbbbbb 100%);
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
padding: 0 20px;
border-radius: 10px;
list-style: none;
position: relative;
display: inline-table;
}
#page_nav ul:after {
content: ""; clear: both; display: block;
}
#page_nav ul li {
float: left;
}
#page_nav ul li:hover {
background: #4b545f;
background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
}
#page_nav ul li:hover a {
color: #fff;
}
#page_nav ul li a {
display: block; padding: 25px 40px;
color: #757575; text-decoration: none;
}
#page_nav ul ul {
background: #5f6975; border-radius: 0px; padding: 0;
position: absolute; top: 100%;
}
#page_nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a; position: relative;
}
#page_nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#page_nav ul ul li a:hover {
background: #4b545f;
}
#page_nav ul ul ul {
position: absolute; left: 100%; top:0;

}

 

my html

 

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8">

<title>Me - A Web Developer</title>

<meta name="description" content="A web developer who has started a long journey">

<link rel="stylesheet" type="text/css" href="content/themes/style.css">

</head>

<body>

<header id="page_header">

<h1 id="title">My Official Website</h1>

<nav id="page_nav">

<ul>

<li><a href="#">Home</a></li>

</ul>

<ul>

<li><a href="#">Sample Page</a></li>

<ul>

<li><a href="#">My Page 1</a></li>

<li><a href="#">My Page 2</a></li>

</ul>

</li>

</ul>

</nav>

</header>

<section id="post">

<article class="post">

<header>

<h2>This Website Is Under Construction</h2>

<p>Posted by Terry on

<time datetime="2010-10-01T14:39">October 1st, 2010 at 2:39PM</time>

</p>

</header>

<aside>

<p>

"Please be patient and come back later."

</p>

</aside>

<p>Please come back one week later.</p>

<footer>

<p>No comment</p>

</footer>

</article>

</section>

</body>

</html>

 

 

Can you tell me what's wrong ?

Link to comment
Share on other sites
  • 2 weeks later...
astralaaron Dedicated Member

astralaaron

Posted
Posted

Your code has this:

<ul><li><a href="#">Home</a></li></ul><ul><li><a href="#">Sample Page</a></li><ul><li><a href="#">My Page 1</a></li><li><a href="#">My Page 2</a></li></ul></li></ul>

the problem is right here: <li><a href="#">Sample Page</a></li>

 

just remove that list item, the drop down list needs to be inside of it.

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...