gerah 0 Posted December 11, 2013 Report Share Posted December 11, 2013 Good day! how can i get rid of those extra space on my dropdwon menus? (see attachment) any ideas? thanks a lot! Cheers! neways heres my code <div class="nav"> <ul> <li>Contacts</li> <li>e-Book</li> <li>Blog</li> <li>Projects <ul> <li>On-going Projects List</li> <li>Completed Project List</li> <li>Project Gallery</li> </ul></li> <li><a href="services.html">Our Services</a> <ul> <li>Industrial Commercial Residential</li> <li>Supply and Installation</li> </ul> </li> <li><a href="about.html">About Us</a> <ul> <li><a href="general.html">General Information</a></li> <li>Organizational Chart</li> <li>Executive Team</li> <li>Business Objective</li> <li>Affiliate</li> <li>Vehicles & Equipment</li> <li>Contractor Liscense</li> <li>Commendations</li> <li>Bonding Capability</li> <li>Location Map</li> <li>Career</li> <li>Testimonial</li> </ul></li> <li><a href="index.html">Home</a></li> </ul> </div> .nav{ padding-top: 50px; margin-right: 10%; color:#666; text-decoration: none; } .nav ul li{ float:right; display: inline-block; text-decoration: none; padding: 10px; }.nav ul li a:link{ text-decoration:none; color:#333;}.nav ul li:hover{ color:#fad814; }.nav ul li a:active{ color: #fad814;}.nav ul li a:visited{ color: #666;}.nav ul ul { visibility: hidden; position: absolute; top: 120px; display: block; background-color: #444; border-radius:5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; transition: all .2s ease-in-out; padding-bottom:1px; margin: 10px 0px 0px 0px;}.nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; }.nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;}.nav ul li ul li:hover{ background-color:#FC0; color:white; }.nav ul li ul li a:visited{ color: white !important;}.nav ul li ul li:first-child{ border-top-right-radius:5px; -moz-border-top-right-radius:5px; -webkit-border-top-right-radius:5px;}.nav ul li ul li:last-child{ border-bottom-right-radius:5px; -moz-border-bottom-right-radius:5px; -webkit-border-bottom-right-radius:5px; box-shadow: 0 0px 0 #111, 0 0px 0 #666;}.nav ul li ul li:first-child a:after{ content: ''; position: absolute; left: 30px; top: -8px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 8px solid #444;} Quote Link to post Share on other sites
scout1idf 8 Posted December 11, 2013 Report Share Posted December 11, 2013 (edited) Change this...... .nav ul li ul li{ margin-left: 0px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;} to this...... .nav ul li ul li{ margin:0px 0px 0px -40px; list-style:none; text-decoration:none; float:none; display: block; border: 0; box-shadow: 0 1px 0 #111, 0 2px 0 #666; color: white;} Adjust neg. left margin as needed. EDIT: For some reason it won't show the negative margin-left. I tested it with a minus 40px left margin and it looked pretty good to me....... Edited December 11, 2013 by scout1idf 1 Quote Link to post Share on other sites
gerah 0 Posted December 11, 2013 Author Report Share Posted December 11, 2013 @scout1idf Thanks a lot!! it works ur so great:) CHEERS! Quote Link to post Share on other sites
Day 3 Posted December 21, 2013 Report Share Posted December 21, 2013 (edited) That looks like default ul padding. Instead of a negative left margin. Try just setting the padding to 0 for the ul, Or at least the left padding. edit: Just tested and confirmed. This will fix the problem. .nav ul li:hover > ul { opacity: 1; visibility: visible; margin:0px; z-index: 30; display: block; padding: 0;} Edited December 21, 2013 by Day Quote Link to post Share on other sites
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.