Jump to content

Dropdown menu not working


terryds

Recommended Posts

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 <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;}

I made the second unordered list not displayed (display: none), then when i hover the list item of the first unordered list, i want the second unordered list to be display so i give nav ul li:hover > ul { display:block; }

 

But, it doesn't work... The second ul is not displayed when i hover the list item of the first unordered list...

 

Please help me solve the problem...

Link to comment
Share on other sites

This is a job for Dsonesuk. Here is something to play with...

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /><title>hover trigger - hover target</title>    <style type="text/css">div {   background-color: #999;   width: 125px;   height: 50px;   border: 1px dotted black;}.hover_trigger1, .hover_trigger2, .hover_trigger3, .hover_trigger4 {   cursor: pointer;   width:160px;   height:90px;}.hover_trigger1:hover,.hover_trigger2:hover,.hover_trigger3:hover,.hover_trigger4:hover {   background-color: blue;  }.hover_trigger1:hover + div {  /* + means immediately after */   background-color: yellow;}    .hover_trigger2:hover ~ div { /* ~ means after */   background-color: green;}.hover_trigger3:hover > div { /* > means immediate child */   background-color: orange;}.hover_trigger4:hover div { /* blank means descendant */   background-color: aqua;}</style></head><body><div class="hover_trigger1">trigger1</div><div class="hover_trigger2">trigger2</div><br/><div class="hover_trigger3">trigger3<div>target   <div style="width:50px;height:20px">target</div></div></div><div class="hover_trigger4">trigger4<div>target   <div style="width:50px;height:20px">target</div></div></div><br/><div>target</div></body></html>
Link to comment
Share on other sites

You need to set a height for the header, and remove overflow: hidden; because as long as overflow: hidden is used on outer containers you will never see the submenus as they will display outside the boundaries of these containers.

 

you need to set position: relative; for all li tags within the menu, this will help to position the child ul (submenu) relative to the edges of these li tags when using position absolute; and top: left: properties

1)THIS

#navnsearch nav ul ul li { float: none; border-top: 1px solid #6b727c; border-bottom: 1px solid #575f6a; position: relative;}

ONLY sets position: relative; to 1st submanu level and beyond, NOT the parent li where 'portfolio' text shows.

better to set it here instead

 

#navnsearch nav ul li { float: left;

position: relative;}

 

2) below sets position: absolute; to 1st submenu level and beyond.

#navnsearch nav ul ul { position: absolute; top: 100%;}

 

so setting position: absolute again for

#navnsearch nav ul ul ul { position: absolute; left: 100%; top:0;}

 

is not necessary

  • 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
×
×
  • Create New...