First, here are my code
HTML
<!DOCTYPE html>
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/style_v2.css">
<title>Far Far Away - A folktale at Faraway Island</title>
</head>
<body>
<header>
<div id="logonslogan">
<a href="#">Well-Designed Blog</a>
<p id="slogan">Created by Terry</p>
</div>
<div id="navnsearch">
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Portfolio</a>
<ul>
<li><a href="#">Wordpress Theme</a></li>
<li><a href="#">Blogger Theme</a></li>
</ul>
</li>
<li><a href="#">Contact</a></li>
<li><a href="#">About</a></li>
</ul>
</nav>
<section id="search">
<form action="#">
<input type="search" name="search" id="site_search" placeholder="Enter keywords">
<input type="submit" class="button" id="submit_search">
</form>
</section>
</div>
</header>
<section id="categories">
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">Javascript</a></li>
</ul>
</section>
<section id="blog_posts">
<article>
<header>
<h1>Far far away</h1>
<p>Published <time datetime="2013-12-26 pubdate">December 26, 2013</time> by dummytext</p>
</header>
<p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean.</p>
<p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.
</p>
<p>Even the all-powerful Pointing has no control about the blind texts it is an almost unorthographic life One day however a small line of blind text by the name of Lorem Ipsum decided to leave for the far World of Grammar.</p>
<p>The Big Oxmox advised her not to do so, because there were thousands of bad Commas, wild Question Marks and devious Semikoli, but the Little Blind Text didn’t listen. She packed her seven versalia, put her initial into the belt and made herself on the way.</p>
<p>When she reached the first hills of the Italic Mountains, she had a last view back on the skyline of her hometown Bookmarksgrove, the headline of Alphabet Village and the subline of her own road, the Line Lane. Pityful a rethoric question ran over her cheek, then</p>
<section id="comments">
<h2>Comments</h2>
<a class="count">1 comment</a>
<ul class="commentlist">
<li class="comment" id="comment_id1">
<div class="thiscomment">
<div class="box">
<img src="images/ava.gif" alt="user1avatar" class="ava">
<h3>User1</h3>
<p class="datetime_comment">
<time datetime="2013-12-27" class="date">
December 27, 2013
</time>
<span class="time">
11:33
</span>
</p>
<div class="commentcontent">
<p>I really enjoyed seeing stories in this site. Keep up the good work !<br>
Regards, <br>
User1
</p>
</div>
</div>
<div class="toolbar">
<a href="#">Vote Up</a>
<a href="#">Vote Down</a>
<a href="#">Share</a>
</div>
</div>
</li>
</ul>
</section>
</article>
</section>
<div id="rightcontent">
<section id="popularPosts">
<hgroup>
<h2>Popular posts</h2>
<h3>See popular post</h3>
</hgroup>
<ul class="popularpostslist">
<li class="popularpost">
<img src="images/ava.gif" alt="Lorem Ipsum's post image">
<h4>Lorem Ipsum</h4>
<p class="datetime">
<time datetime="2013-12-27">December 27, 2013</time>
<span class="time">11:46</span>
</p>
<p>Unterwegs traf es eine Copy. Die Copy warnte das Blindtextchen, da, wo sie herkäme wäre sie zigmal umgeschrieben worden und alles, was von ihrem Ursprung noch übrig wäre, sei das Wort "und" und das Blindtextchen solle umkehren und wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen und so dauerte es nicht lange, bis... <span class="readmore">Read More</span>
</p>
</li>
<li class="popularpost">
<img src="images/ava.gif" alt="postimg">
<h4>Lurem Ipsam</h4>
<p class="datetime">
<time datetime="2013-12-27">December 27, 2013</time>
<span class="time">11:46</span>
</p>
<p>Tatarwags traf as aina Copy. Dia Copy warnta das Blindtaxtchan, da, wo sia harkäma wära sia zigmal umgaschriaban wordan Tad allas, was von ihram UrsprTag noch übrig wära, sai das Wort "Tad" Tad das Blindtaxtchan solla umkehren Tad wieder in sein eigenes, sicheres Land zurückkehren.Doch alles Gutzureden konnte es nicht überzeugen Tad so dauerte es nicht lange, bis... <span class="readmore">Read More</span>
</p>
</li>
</ul>
</section>
<section id="trendingtopics">
<hgroup>
<h2>Trending Topics</h2>
<h3>See what's booming now</h3>
</hgroup>
<ul id="trendinglist">
<li class="trending"><a href="#">#LoremIpsum</a></li>
<li class="trending"><a href="#">#FarFarAway</a></li>
<li class="trending"><a href="#">#KingKnights</a></li>
<li class="trending"><a href="#">#DummyMummy</a></li>
<li class="trending"><a href="#">#Wallball</a></li>
</ul>
</section>
</div>
<footer class="clear" id="footer">
<p>All contents are hand-wroten by <a href="mailto:terrydjony@gmail.com">Terry DS</a></p>
<small>All Rights Reserved, 2013 Terry DS©</small>
</footer>
</body>
</html>
CSS
/* Eric Meyer's Reset CSS v2.0 - http://cssreset.com */
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{border:0;font-size:100%;font:inherit;vertical-align:baseline;margin:0;padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}table{border-collapse:collapse;border-spacing:0}
/* The author stylesheet */
body {
font-family: "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "Liberation Sans", Verdana, sans-serif;
background-color: #E8E8E8;
}
a {
color: inherit;
text-decoration: none;
}
h1 {
font-size: 200%;
}
h2 {
font-size: 150%;
}
h3 {
font-size: 133%;
}
h4 {
font-size: 120%;
}
h5 {
font-size: 110%;
}
body > header {
background-color: #333333;
position: relative;
overflow: hidden;
}
body > header a, body > header p {
color: #FFFFFF;
}
#logonslogan {
float: left;
}
#navnsearch {
background-color: #990100;
float: right;
width: 55%;
overflow: hidden;
position: relative;
}
#navnsearch nav ul {
list-style: none;
padding: 0 3%;
display: inline-table;
}
#navnsearch nav ul:after {
content: "";
clear: both;
display: block;
}
#navnsearch nav ul li {
float: left;
}
#navnsearch nav ul li a {
display: block;
padding: 1em;
margin: 1em;
text-align: center;
}
#navnsearch nav ul li:hover {
background-color: #B90504;
background-color: rgba(0,0,0,.3);
}
#navnsearch nav ul li:hover a {
box-shadow: 0 0 3px 2px;
-webkit-box-shadow: 0 0 3px 2px;
-moz-box-shadow: 0 0 3px 2px;
border-radius: 50%;
}
#navnsearch nav ul ul {
display: none;
}
#navnsearch nav ul li:hover > ul {
display: block;
}
#navnsearch nav ul ul {
position: absolute;
top: 100%;
}
#navnsearch nav ul ul li {
float: none;
border-top: 1px solid #6b727c;
border-bottom: 1px solid #575f6a;
position: relative;
}
#navnsearch nav ul ul li a {
padding: 15px 40px;
color: #fff;
}
#navnsearch nav ul ul li a:hover {
background: #4b545f;
}
#navnsearch nav ul ul ul {
position: absolute;
left: 100%;
top:0;
}
#navnsearch #search {
position: absolute;
bottom: 0;
right: 2em;
}
#navnsearch #site_search {
padding: .5em;
}
What I did is making the second level ul (nav ul ul) not displayed nav ul ul {display: none;}, then I want to make it display when I mouse over the first level li (nav ul li), so i give the code nav ul li:hover > ul { display: block; }
But, it's not working! The second level list is not displayed when i mouse over the first level list item...
Please help me to solve this problem..
Thanks for any answers
