Jump to content

psychoboy

Members
  • Content Count

    3
  • Joined

  • Last visited

Community Reputation

0 Neutral

About psychoboy

  • Rank
    Newbie
  1. psychoboy

    Dropdown menu

    fixed by myself , forgot to put a margin-top:0px
  2. psychoboy

    Dropdown menu

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