Wed, 2015-12-09 21:04
Hello,
I want to move my responsive menu 40px to the right. That's no problem but my dropdown menu stays where it was.
I tried a lot: position relative and all the other positions nothing seems to work. Has anyone a solution for my problem?
Kind Regards,
Guido Marchal, Gouda Netherlands.
HTML code
<label for="show-menu" class="show-menu">Menu</label> <input type="checkbox" id="show-menu" role="button"> <ul id="menu"> <li><a href="">Home</a></li> <li> <a href="#"></a> <ul class="hidden"> <li><a href=""></a></li> <li><a href=""></a></li> <li><a href=""></li> </ul> </li> <li> <a href="#"></a> <ul class="hidden"> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> <li><a href=""</a></li> </ul> </li> <li><a href=""></a></li> <li><a href=""></a></li> </ul>
CSS Code
ul { list-style-type:none; margin:0; padding:0; position: absolute; } li { display:inline-block; float: left; margin-right: 1px; } /*Style for menu links*/ li a { display:block; min-width:140px; height: 50px; text-align: center; line-height: 50px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #fff; background: #2f3036; text-decoration: none; } li:hover a { background: #19c589; } li:hover ul a { background: #f3f3f3; color: #2f3036; height: 40px; line-height: 40px; } li:hover ul a:hover { background: #19c589; color: #fff; } li ul { display: none; } li ul li { display: block; float: none; } li ul li a { width: auto; min-width: 100px; padding: 0 20px; } ul li a:hover + .hidden, .hidden:hover { display: block; }
Thu, 2015-12-10 08:27
#1
I have tried this but now is
I have tried this but now is the menu showing up too much to the right!
Anyone can help?
/*Strip the ul of padding and list styling*/ ul { list-style-type:none; margin:0; padding:0; position: absolute; margin-left: 1cm; } /*Create a horizontal list with spacing*/ li { display:inline-block; float: left; margin-right: 1px;
Thu, 2015-12-10 09:35
#2
Validate your HTML code
Your code has alot of errors , i have made some corrections , see HERE , validate your code always.
Have you tried margin-right ? margin left ?