javascript - dropdown isn't appearing on hover -


i've written primitive navbar. reading code seems logical , correct code doesn't work - when move cursor on "news" bar dropdown menu doesn't appear. missing?

<!doctype html>  <html>  <head>  	<title>learning</title>  <style>  	body{  		margin: 0px;}    	body {  		display: inline-block;  		width:25%;  		padding: 14px 0px;  		margin: 0px;  		background-color: rgb(0,0,255);  		color: white;  		text-align: center;  		float: left;  		font-size: 1.5em;  		text-decoration: none;}    	.dropdown-content {  		display: none;  		position: absolute;  		background-color: rgb(0,0,255);  		color: white;  		min-height: 50px;  		width: 25%;}    	.dropdown-content {  		display: block;  		color:white;  		text-decoration: none;  		padding: 20px 0px;  		text-align: center;}    	a.dropdown:hover .dropdown-content{  		display: block;}    	body > a:hover, .dropdown-content a:hover{  		background-color: rgb(0,0,128);}  </style>  </head>  <body>  	  	<a href="#">home</a>  	<a href="#">test</a>  	<a href="#" class="dropdown">news</a>  		<div class="dropdown-content">  			<a href="http://www.cnn.com">cnn</a>  			<a href="http://www.bbc.com">bbc</a>  		  		</div>  	<a href="#">about</a>  	  </body>  </html>

this 1 should started:

https://jsfiddle.net/kezpw1e7/

i modified of css , html. dropdown works now, you'll need adjust widths , of styling.

<style>     body{         margin: 0px;}  .nav {   width:100%;  }      div {         display: inline-block;         /*width:25%;*/         padding: 14px 0px;         margin: 0px;         background-color: rgb(0,0,255);         color: white;         text-align: center;         float: left;         font-size: 1.5em;         text-decoration: none;} .dropdown {   position:relative;  }     .dropdown-content {         display: none;         position: absolute;         background-color: rgb(0,0,255);         color: white;         min-height: 50px;         /*width: 25%;*/     top:53px;     left:0px;}      .dropdown-content {         display: block;         color:white;         text-decoration: none;         padding: 20px 0px;         text-align: center;}      div.dropdown:hover .dropdown-content{         display: block;}      body > div:hover, .dropdown-content div:hover{         background-color: rgb(0,0,128);} </style>    <div class="nav">     <div href="#">home</div>     <div href="#">test</div>     <div href="#" class="dropdown">news         <div class="dropdown-content">             <a href="http://www.cnn.com">cnn</a>             <a href="http://www.bbc.com">bbc</a>          </div>     </div>     <div href="#">about</div>  </div>

Comments

Post a Comment

Popular posts from this blog

aws api gateway - SerializationException in posting new Records via Dynamodb Proxy Service in API -

i getting "__type": "com.amazon.coral.service#serializationexception" as reply in postman & in test console in api gateway trying post record directly dynamodb using api proxy services.. referring aws article - https://aws.amazon.com/blogs/compute/using-amazon-api-gateway-as-a-proxy-for-dynamodb/ here's mapping { "tablename": "tablenamegoeshere", "item": { "id" : "$context.requestid" "eventname" : "$input.path('$.eventname')", "timestamp" : $input.path('$.timestamp'), "answers": "$util.parsejson($input.path('$.answers'))" } } update: did asked ... , worked if try add array of json objects gives me above same error - here's trying now. please - couldnt find on google well #set($inputroot = $input.path('$')) { "tablename": "answer", "item": {
Read more

asp.net - Problems sending emails from forum -

i have been redesigning site has message board, has been written guy looked after site. it has few problems , written in .asp , uses .mdb files database. you can see whole thing here . feel free post if helps, test thing have set using original files , new database. the basic problem when posts message, supposed email sent them, have posted it. when replies, originator supposed message, replier has been posted. i’d have thought @ point in process there should script/file in postmessage.asp? the postmessage.asp page below. <% option explicit %> <!-- #include virtual="common/adovbs.inc" --> <html> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1252"> <meta name="generator" content="microsoft frontpage 4.0"> <meta name="progid" content="frontpage.editor.document"> <title>new page 2</title> <base target="_self"
Read more