Jump to content
Sign in to follow this  
psychoboy

Dropdown menu

Recommended Posts

Hey , I have a problem with the positioning of my dropdown menu ..

All is working fine but when I hover with my mouse the dropdown doesn't paste the initial menu .

If someone could help me :)

<html>	<head>		<style>		  #nav ul{                display: table;                margin: 100px auto;				width:700px;                padding: 0px;				font-size:25px;				font-weight:bold;				background: Gray;			    background: -webkit-linear-gradient(Gray, DarkGray);                background:    -moz-linear-gradient(Gray, DarkGray);                background:     -ms-linear-gradient(Gray, DarkGray);                background:      -o-linear-gradient(Gray, DarkGray);				background: linear-gradient(Gray, DarkGray);				border-radius: 3px;                box-shadow: 0 1px 3px rgba(0, 0, 0, .3),                            0 3px 5px rgba(0, 0, 0, .2),                            0 5px 10px rgba(0, 0, 0, .2),                            0 20px 20px rgba(0, 0, 0, .15);                }				                #nav ul li{                display:table-cell;				}								#nav ul li a{                display: block;                text-align: center;                color: rgba(0, 0, 0, .7);                 padding: 8px 8px 17px 8px;				text-shadow: 0 1px 0 rgba(255, 255, 255, .4);				box-shadow: 0 1px 0 rgb #A9A9A9 inset,                             0 -1px 0 hsl(210, 100%, 32%) inset,                             0 -2px 0 hsl(210, 100%, 38%) inset,                             0 -3px 0 hsl(210, 100%, 44%) inset,                             0 -4px 0 hsl(210, 100%, 50%) inset,                             0 -5px 0 hsl(210, 100%, 60%) inset;                } 							    #nav .divider-vertical{                border-right: 1px solid grey;                }							    #nav .elem {				display:none;				position:absolute;				width:inherit;				}							 								#nav .elem li{										background:#262626;					display:block;					text-align:center;				}								#nav .elem a{					color: white; 					font-size:25;					text-shadow: 0 1px 0 rgba(255, 255, 255, .4);					                } 								#nav li:hover > .elem{					display:block;				}		</style>	</head>		<body>		    <div id="nav">		    <ul>                <li><a href="#">a</a></li>					<li class="divider-vertical"></li>                <li><a href="#">b</a></li>					<li class="divider-vertical"></li>                <li><a href="#">c</a></li>					<li class="divider-vertical"></li>                <li><a href="#">d</a>					<ul class="elem">						<li><a href="#">d1</a></li>						<li><a href="#">d2</a></li>						<li><a href="#">d3</a></li>					</ul>				</li>				</ul>		</div>	</body></html>

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...