Space between menu and drop down menu
Try changing these two things in your css:
ul.menu li {
display:block;
height: 50px; /* CHANGED THIS FROM 30px TO 50px */
float:left;
position:relative;
margin:0 9px 0 0;
padding:0;
width:140px;
filter: alpha(opacity=75); /* internet explorer */
-khtml-opacity: 0.75; /* khtml, old safari */
-moz-opacity: 0.75; /* mozilla, netscape */
opacity: 0.75; /* fx, safari, opera */
}
ul.menu li ul {
display:none;
position:absolute;
width: 100%;
top:30px;
margin-top: 18px; /* ADDED THIS VALUE */
left:0;
list-style-type:none;
padding-top:10px;
background:#461b47;
filter: alpha(opacity=75); /* internet explorer */
}
See this JSFiddle
I think that should achieve what you need without interfering with the layout of the page.
saraht
Front End Developer and Graphic Designer based in Toronto. Thanks to everyone on this site for helping me though all my coding frustrations! :)
Updated on June 04, 2022Comments
-
saraht almost 2 years
I'd like for the drop down menu to show below the border line in the main menu area instead of showing up right underneath the 'menu' title/button. I can change the positioning so that it is lower but then there is dead space in between that makes it impossible to mouse over the drop down menu.
I don't want to add padding above the drop down because that just created more purple space, where I want that space to be empty.
Below is the code but feel free to view here: link
html:
<div class="menu-box fl"> <ul class="menu"> <!-- Begin Item With Drop --> <li class="drop"> <a href="#"><span class="big-text">menu</span></a> <!-- Begin Toggle Icon --> <span class="toggle"> </span> <!-- End Toggle Icon --> <ul> <li><a href="#">CSS & XHTML</a></li> <li><a href="#">Javascript</a></li> <li><a href="#">Photoshop</a></li> <li><a href="#">Illustrator</a></li> <li><a href="#">Dreamweaver</a></li> </ul> </li> <!-- End Item With Drop --> </ul> </div><!--end menu--> <div class="social fl"> </div><!-- end social--> <div class="email fr"> </div><!--end email--> <div class="clear"></div> </div><!--end nav-inner--> </div><!--end nav-->
CSS:
.nav { height: 65px; width: 100%; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #999; font-family: 'Raleway', sans-serif; } .nav-inner { width:1000px; margin-left:auto; margin-right:auto; height:65px; } .menu-box { width: 200px; height: 100%; border-right-width: 1px; border-right-style: solid; border-right-color: #999; } ul.menu { list-style-type:none; margin:0; padding:20px 0 0 6px; position:relative; float: right; } ul.menu li { display:block; height: 30px; float:left; position:relative; margin:0 9px 0 0; padding:0; width:140px; filter: alpha(opacity=75); /* internet explorer */ -khtml-opacity: 0.75; /* khtml, old safari */ -moz-opacity: 0.75; /* mozilla, netscape */ opacity: 0.75; /* fx, safari, opera */ } li.drop a { color:#333; line-height:30px; } ul.menu li ul li a { color:#ffffff; } ul.menu li:hover { width:140px; color:#fffff; } .big-text { font-size:1.5em; } ul.menu li.drop span.toggle { display:block; float:left; width:31px; height:30px; background:transparent url("images/toggle1.png") no-repeat 0 -30px; padding:0; margin:0 7px 0 0; color:#ffffff; cursor:pointer; } ul.menu li.drop:hover span.toggle, ul.menu li.drop.current span.toggle { background-position:0px 0px; } ul.menu li.drop:hover ul {-webkit-border-radius: 5px; border-radius: 5px; display:block; z-index:1; position: absolute; z-index:100; } ul.menu li ul { display:none; position:absolute; width: 100%; top:30px; left:0; list-style-type:none; padding-top:10px; background:#461b47; filter: alpha(opacity=75); /* internet explorer */ } ul.menu li ul li { float: none; height: auto; margin: 0; filter: alpha(opacity=100); /* internet explorer */ color: #ffffff; border-bottom-width: thin; border-top-style: none; border-right-style: none; border-bottom-style: solid; border-left-style: none; border-bottom-color: #FFF; padding-top: 10px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; } ul.menu li ul li a { padding-left:5px; padding-right:5px; } .social { width:300px; height:100%; } .email { width:500px; height:100%; }
-
Diodeus - James MacFarlane over 10 yearsPleas don't link to live sites. Read: meta.stackexchange.com/questions/125997/…
-
-
saraht over 10 yearsThe only problem is that I can't get to the drop down menu, once I move my mouse from the main menu button the drop down will dissapear