terryds Posted December 30, 2013 Share Posted December 30, 2013 HTML <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <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 Terry DS</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; height: 6em; } 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; } First i make the second unordered list not displayed (display: none;), then when i hover the list item, the second unordered list should be displayed (display: block) But, when i hover the list item, it doesnt display the second unordered list... Please help me solve the problem ... Link to comment Share on other sites More sharing options...
ChrisLannister Posted February 14, 2014 Share Posted February 14, 2014 (edited) I built this example for you http://jsfiddle.net/5nqxC/1/ You'll have to add your css but this should work fine. Edited February 14, 2014 by ChrisLannister Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now