Jump to content

Dropdown menu


psychoboy

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>
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...