Jump to content

psychoboy

Members
 View Profile  See their activity

  • Posts

    3

  • Joined

  • Last visited

 Content Type 

Posts posted by psychoboy

    Dropdown menu

    in CSS

    Posted

    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>

    NavBar Css - problems

    in CSS

    Posted

    Hello ,

    first of all , thank you for reading this and I already apologize for my english mistakes :)

    In my leisure time I'm trying to learn html / css / javascript by my own , but since I started my own little webpage ,

    where I test some stuff , I have problems with my dropdown menu ... I really don't know where my mistakes are , so I came here to ask for help !

    Here's my code I tried (I optimized the code so that there's just the navbar left)

    <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);                }				                ul li{                display:table-cell;				}								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;                } 							    .divider-vertical{                border-right: 1px solid grey;                }															ul ul {					display: none;					position: absolute;					padding: 0px;				}								ul ul li{										background:#262626;					display:block;					text-align:center;				}								  a.font{					color: white; 					font-size:25;					text-shadow: 0 1px 0 rgba(255, 255, 255, .4);					                } 								 li a:hover > ul ul{					display:block;				}</style></head><body><div id="nav">             <ul>                     <li><a href="#">a</a>                            <ul>                                    <li><a class="font" href="#">a1</a></li>                                    <li><a class="font" href="#">a2</a></li>                          </ul>                     </li>             </ul>        </div>               </body></html>

    Like I said before , thank you for reading this and I hope someone can help me :')

×
×
  • Create New...