Page navigation blocking website navigation bar - html

I'm having trouble fixing my page navigation (in the home section) to not block the main website navigation bar. I've looked it up, but can't seem to find an answer that works. I'd like the main navigation to fall in front of the secondary page navigation. I created a jsfiddle to show what's happening.
https://jsfiddle.net/ethacker/o5ks4pu2/
CSS:
body {
background-color: beige;
color: lightblue;
padding: 0;
margin:0;
}
header {
background-color: lightblue;
padding: 5px 0;
margin: 0;
}
header h1 {
color: cadetblue;
font-family: Arial;
margin: 0;
padding: 5px 15px;
display: inline;
}
.navMenu{
display: inline;
margin: 0;
}
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
}
.navMenu .parentMenu a{
color: azure;
}
.navMenu .parentMenu .sub-menu{
display: none;
position: absolute;
list-style-type: none;
padding: 0;
margin: 0;
left: -1px;
top: 27px;
}
.navMenu .parentMenu:hover .sub-menu{
display: block;
}
.parentMenu:hover .sub-menu li{
border: thin solid darkgray;
padding: 4%;
background-color: lightgray;
color: honeydew;
text-align: left;
white-space: nowrap;
width: 100%;
list-style-type: none;
margin: 0;
}
.parentMenu .sub-menu li:hover {
background-color: lightsteelblue;
}
.section {
background-color: wheat;
color: darkslategray;
padding: 5px;
float: left;
display: inline;
width: 63%;
margin: 0 1% 1% 1%;
border-radius: 10px;
border: thin solid khaki;
box-shadow: lightgray;
}
#about {
float: right;
width: 30%;
margin: 1% 1% 0 0;
text-align: center;
}
#home {
margin: 1% 0 1% 1%;
}
h4, h3 {
color: lightseagreen;
}
#fdnav {
margin: 1% 0 1% 1%;
padding: 1% .5%;
}
.fdNavMenu{
display: inline;
margin: 0;
padding: 0;
}
.fdNavMenu .parentMenu {
display: inline-block;
list-style-type: none;
position: relative;
background-color: lightgray;
border: thin solid darkgray;
border-radius: 3px;
margin: -0.1%;
padding: .2%;
}
.fdNavMenu .parentMenu a{
color: honeydew;
}
.fdNavMenu .parentMenu .sub-menu {
display: none;
position: absolute;
left: -1px;
top: 22px;
margin: 0;
padding: 0;
}
.fdNavMenu .parentMenu:hover .sub-menu {
display: inline;
}
HTML CODE:
<body>
<header>
<nav>
<h1> Welcome to Mommy Madness</h1>
<ul class="navMenu">
<li class="parentMenu">Home
<ul class="sub-menu">
<li>About</li>
<li>Contact</li>
</ul>
</li>
<li class="parentMenu">Pregnancy
<ul class="sub-menu">
<li>Advice</li>
<li>Gender Predictions</li>
<li>Trying To Conceive</li>
</ul>
</li>
<li class="parentMenu">All About Baby
<ul class="sub-menu">
<li>Fetal Development</li>
<li>Guidelines </li>
<li> Milestones</li>
</ul>
</li>
<li class="parentMenu">Party Momma
<ul class="sub-menu">
<li>Pregnancy Announcement</li>
<li>Gender Reveal</li>
<li>Baby Shower</li>
<li>Birth Announcement</li>
<li> Birthdays</li>
</ul>
</li>
<li class="parentMenu">Stations
<ul class="sub-menu">
<li>Hospital Bag</li>
<li>Diaper Bag</li>
<li>Changing Station</li>
<li>Baby Gear</li>
</ul>
</li>
<li class="parentMenu">Memory Markers
<ul class="sub-menu">
<li>DIY</li>
<li>Purchases</li>
</ul>
</li>
<li class="parentMenu">Reviews
<ul class="sub-menu">
<li>Games</li>
<li>Gear</li>
<li>Learning</li>
</ul>
</li>
<li class="parentMenu">Blog
<ul class="sub-menu">
<li>Fit Momma</li>
<li>Minimal Momma</li>
<li>Modern Momma</li>
<li>Organic Momma</li>
<li>Organizing Queen</li>
<li>Savings Savvy</li>
<li>Tech Savvy</li>
<li>Traditional Momma</li>
</ul>
</li>
</ul>
</nav>
</header>
<div class="section" id="about">
<h4>Fetal Development</h4>
<p>Everyone wonders what in the world is going on inside the womb. <br> I've created a database
of sorts to contain all knowledge of fetal development. <br> It's great to have all answers in one place, huh? </p>
</div>
<div class="section" id="fdnav">
<ul class="fdNavMenu">
<li class="parentMenu"> Month One
<ul class="sub-menu">
<li><a>Week One</a></li>
<li><a>Week Two</a></li>
<li><a>Week Three</a></li>
<li><a>Week Four</a></li>
</ul>
</li>
<li class="parentMenu"> Month Two
<ul class="sub-menu">
<li><a>Week Five</a></li>
<li><a>Week Six</a></li>
<li><a>Week Seven</a></li>
<li><a>Week Eight</a></li>
</ul>
</li>
<li class="parentMenu"> Month Three
<ul class="sub-menu">
<li><a>Week Nine</a></li>
<li><a>Week Ten</a></li>
<li><a>Week Eleven</a></li>
<li><a>Week Twelve</a></li>
</ul>
</li>
<li class="parentMenu"> Month Four
<ul class="sub-menu">
<li><a>Week 13</a></li>
<li><a>Week 14</a></li>
<li><a>Week 15</a></li>
<li><a>Week 16</a></li>
</ul>
</li>
<li class="parentMenu"> Month Five
<ul class="sub-menu">
<li><a>Week 17</a></li>
<li><a>Week 18</a></li>
<li><a>Week 19</a></li>
<li><a>Week 20</a></li>
</ul>
</li>
<li class="parentMenu"> Month Six
<ul class="sub-menu">
<li><a>Week 21</a></li>
<li><a>Week 22</a></li>
<li><a>Week 23</a></li>
<li><a>Week 24</a></li>
</ul>
</li>
<li class="parentMenu"> Month Seven
<ul class="sub-menu">
<li><a>Week 25</a></li>
<li><a>Week 26</a></li>
<li><a>Week 27</a></li>
<li><a>Week 28</a></li>
</ul>
</li>
<li class="parentMenu"> Month Eight
<ul class="sub-menu">
<li><a>Week 29</a></li>
<li><a>Week 30</a></li>
<li><a>Week 31</a></li>
<li><a>Week 32</a></li>
</ul>
</li>
<li class="parentMenu"> Month Nine
<ul class="sub-menu">
<li><a>Week 33</a></li>
<li><a>Week 34</a></li>
<li><a>Week 35</a></li>
<li><a>Week 36</a></li>
</ul>
</li>
<li class="parentMenu"> Month Ten
<ul class="sub-menu">
<li><a>Week 37</a></li>
<li><a>Week 38</a></li>
<li><a>Week 39</a></li>
<li><a>Week 40</a></li>
</ul>
</li>
</ul>
</div>


Add z-index to .parentMenu:
.navMenu .parentMenu {
display: inline-block;
list-style-type: none;
background-color: lightgray;
padding: 5px 10px;
border: thin solid darkgray;
border-radius: 3px;
color: honeydew;
position: relative;
margin: 0;
z-index: 1;
}
z-index specifies the order of positioned elements. When elements overlap, it determines which one covers the other.
Updated JSFiddle


Add z-index value for the absolute position submenu elements. Read this Z_IDEX PRROPERTY . Here is your Fiddle . Simply add this CSS on your part(Check line number 54 on fiddle link)
.sub-menu {
z-index:1000;
}

Related

how to stretch a UL across the browser window

I have an UL that acts as my navigation bar on my web page. currently it is all the way to the left of the screen. I would like it to be centered and have the background color stretch all the way to the left and right, Like below. what would I need to change to stretch the UL across the page like the top example image?
Here is what it looks like currently:
Here is my code:
.parent {
display: block;
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
background-color: #1D3567;
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>

Make your ul a flex container in which you align the children centered, and apply the background-color to this element instead of the li children by adding this rule:
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
.parent {
position: relative;
float: left;
line-height: 30px;
background-color: #1D3567;
}
.parent a {
margin: 10px;
color: #FFFFFF;
text-decoration: none;
}
.parent:hover>ul {
display: block;
position: absolute;
}
.child {
display: none;
}
.child li {
line-height: 30px;
border-bottom: #CCC 1px solid;
border-right: #CCC 1px solid;
width: 100%;
}
.child li a {
color: #FFFFFF;
}
ul {
list-style-type: none;
margin: 0;
padding: 0px;
min-width: 15em;
}
#nav_ul {
width: 100%;
display: flex;
justify-content: center;
background-color: #1D3567;
}
ul ul ul {
left: 100%;
top: 0;
margin-left: 1px;
}
li:hover {
background-color: #95B4CA;
}
.parent li:hover {
background-color: #95B4CA;
}
<ul id="nav_ul">
<li class="parent">Home</li>
<li class="parent">Outlook Web</li>
<li class="parent">Production
<ul class="child">
<li class="parent">Hennig South</li>
<li class="parent">Hennig Enclosure Systems</li>
<li class="parent">Hennig South</li>
<li class="parent">Factory Andon</li>
<li class="parent">Web Docs</li>
</ul>
</li>
<li class="parent">IT
<ul class="child">
<li>Knowledge Base</li>
<li>Submit a Ticket</li>
<li class="parent">Archived Links</li>
</ul>
</li>
<li class="parent">Office Directories
<ul class="child">
<li>Hennig</li>
<li>AME</li>
</ul>
</li>
<li class="parent">Hennig Parts</li>
<li class="parent">Factory Andon</li>
<li class="parent">Business Cards</li>
<li class="parent">Reports
<ul class="child">
<li class="parent">Global Shop<span class="expand">»</span>
<ul class="child">
<li>Inventory Report</li>
<li>Sales Report</li>
<li>Quotes Report</li>
<li>Work Order Report</li>
<li>Part Where Used Report</li>
</ul>
</li>
<li class="parent">Ndustrios<span class="expand">»</span>
</li>
</ul>
</li>
</ul>

Make parent container the height of a hovered child container

I have searched for the answer to this but out of the questions/answers I found none of them worked in my case.
What I have is a "Mega Menu" with links down the left side, when one of the links are hovered with the mouse it expands to the right showing hidden links with images. What I would like to do is have the left side "hoverable" link area expand to be the same size as the right side area that contains the images.
Currently the left side is a fixed height and when I attempted to apply clear: both overflow: hidden as the other answers on questions suggested it broke the layout. I am hoping there is a pure CSS way of doing what I need. I could write it in JS but would prefer not to if its not needed. I have included a codepen that shows what I have currently.
https://codepen.io/anon/pen/wGZjpp?editors=1100
<div class="megaMenuWrapper">
<div class="megaMenuContainer" style="display: block;">
<ul id="menu-main-menu" class="menu">
<div class="background"><span class="megamenu-title">SHOP BY CATEGORY</span>
<li class="category-item" id="menu-item-3">Showers
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-4">
<img src="http://placekitten.com/180/180">Shower Stalls
</li>
<li id="menu-item-8">
<img src="http://placekitten.com/180/180">Shower Bases
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-5">
<img src="http://placekitten.com/180/180">Shower Walls
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-9">Toilets
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-10">
<img src="http://placekitten.com/180/180">Bidets
</li>
<li id="menu-item-11">
<img src="http://placekitten.com/180/180">Portable Toilets
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-17">
<img src="http://placekitten.com/180/180">Bed Pans
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-16">Bathtubs
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-18">
<img src="http://placekitten.com/180/180">Clawfoot
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-19">
<img src="http://placekitten.com/180/180">Copper
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-20">Sinks
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-21">
<img src="http://placekitten.com/180/180">Modern
</li>
</ul>
</li>
</ul>
</li>
<li class="category-item" id="menu-item-25">Bathroom Accessories
<ul class="sub-menu right-side">
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-22">
<img src="http://placekitten.com/180/180">Bathtub Faucets
</li>
<li id="menu-item-27">
<img src="http://placekitten.com/180/180">Shower Curtains
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-23">
<img src="http://placekitten.com/180/180">Toilet Brushes
</li>
<li id="menu-item-28">
<img src="http://placekitten.com/180/180">Vanities
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-24">
<img src="http://placekitten.com/180/180">Toilet Seats
</li>
</ul>
</li>
<li class="menu-item">
<ul class="sub-menu">
<li id="menu-item-26">
<img src="http://placekitten.com/180/180">Mirrors
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
CSS:
body{
background: #ddd;
}
ul#mainnav>li>a:not(.last) {
border-right: 1px solid #fff;
}
ul#mainnav>li>a {
padding: 5px 15px;
margin-top: 20px;
}
.megaMenuWrapper {
position: relative;
margin-top:30px;
}
.megaMenuContainer {
position: absolute;
width: 100%;
/* display: none; */
z-index: 2;
/* height: auto; */
}
ul#menu-main-menu {
width: 100%;
height: 100%;
position: relative;
margin:0;
list-style: none;
}
ul#menu-main-menu .background > li:first-of-type {
margin-top: 5px;
}
.background {
width: 20%;
height: 100%;
background: rgb(255, 255, 255);
border-right: 2px solid #000;
}
.column.menu-item {
padding: 1%;
width: 23%;
}
ul.sub-menu {
list-style: none;
margin: 0;
}
.right-side {
position: absolute;
top: 0;
left: 20%;
height: auto;
right: 0;
width: 80%;
display: none;
}
.right-side li.menu-item {
float: left;
width: 23%;
padding: 1%;
height: 100%;
}
.megamenu-title {
color: #545454;
margin-top: 20px;
display: inline-block;
width: 100%;
margin-left: 20px;
font-weight: bold;
}
li.category-item a{
padding: 5px 0px 5px 20px;
display: block;
}
li.category-item a:hover {
background-color: white;
color: #3C3C3C !important;
text-decoration: none;
}
li.category-item a:hover + ul,
.right-side:hover
{
display: block;
background: rgb(255, 255, 255);
border-left: 1px solid #000;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a {
color: #3c3c3c;
padding: 0;
text-align: center;
}
ul#menu-main-menu li.menu-item ul.sub-menu li a:hover {
background: none;
}
ul#menu-main-menu li.menu-item ul.sub-menu li img {
display: block;
margin: 0 auto;
}
ul#menu-main-menu li a {
color: #4C4C4C;
}
UPDATE:
This is ultimately the jQuery that I have ended up going with. Unless someone answers with a pure CSS solution.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);

the idea is the following :
.megaMenuContainer {
height:auto;
}
.category-item {
height:2em;
}
.category-item:hover {
height:3em;
}
in fact if you put the height of the parent equal to auto the height of the child element will follow it.

This is not possible with pure CSS like I wanted with the current structure so I decided to go with the jQuery solution below.
$('.category-item').hover(
function() {
var height = $(this).children('.right-side').outerHeight();
$('.megaMenuContainer').height(height);
},
function() {
$('.megaMenuContainer').css('height', '');
}
);

UL list items stacking from the bottom instead of top

I have an ul that isn't stacking properly (or is, but not to my desired outcome.)
http://jsfiddle.net/rrrpy1rk/
html:
<ul id="footer_site_map">
<li class="footer_parent">About
<ul class="footer_of_children">
<li class="footer_children">Our Veterinarians
</li>
<li class="footer_children">Our Staff
</li>
</ul>
</li>
<li class="footer_parent">Preventative Medicine
<ul class="footer_of_children">
<li class="footer_children">Puppies
</li>
<li class="footer_children">Kittens
</li>
<li class="footer_children">Adult Care
</li>
<li class="footer_children">Senior Care
</li>
<li class="footer_children">Rabbits
</li>
</ul>
</li>
<li class="footer_parent">Surgical
<ul class="footer_of_children">
<li class="footer_children">Spaying
</li>
<li class="footer_children">Neutering
</li>
<li class="footer_children">Orthopedic Surgery
</li>
<li class="footer_children">Soft Tissue Surgery
</li>
<li class="footer_children">Declawing Cat
</li>
</ul>
</li>
<li class="footer_parent">Medical
<ul class="footer_of_children">
<li class="footer_children"> Complete Medical Assessment
</li>
<li class="footer_children">Cardiology
</li>
<li class="footer_children">Flea Treatment
</li>
<li class="footer_children">Dentistry
</li>
<li class="footer_children">Radiology
</li>
<li class="footer_children">Laboratory
</li>
</ul>
</li>
</ul>
CSS:
#footer_site_map {
position:absolute;
padding:0;
margin:0;
top: 20px;
left: 0;
width:100%;
}
.footer_parent {
position: relative;
width: 180px;
height:20px;
padding: 0 5px;
display: inline-block;
}
.footer_parent a {
color: #FFF;
text-decoration: none;
font-family: MyriadProSemibold;
font-size: 120%;
}
.footer_children {
padding: 5px 0;
width: 200px;
}
.footer_children a {
color: #FFF;
list-style-type: none;
text-decoration: none;
font-family: ralewayregular !important;
font-size: 100%;
}
.footer_of_children {
padding: 0;
margin:0;
}
As seen from the fiddle the parent ul li's are stacking on top of the children ul li's. I need it to go the other way around.
Is there some easy fix, or should I re-structure it.
If you look at the fiddle, you may need to drag the bar to increase the size of the Result.

Addding vertical-align: top; to your .footer_parent fixes the issue:
.footer_parent {
position: relative;
width: 180px;
height: 20px;
padding: 0 5px;
display: inline-block;
vertical-align: top;
}

anchor hit area positioned above anchor text - need it behaving like default anchor hit area would

I have a couple multi-column drop down menus as a part of my main nav. The anchor hit area around each of the links in both multi-column drop down menus is for some reason positioned above the link itself. How do I fix it so the hit area centers around the link text like a normal anchor would?
Here's the site:
http://www.zrrdigitalmedia.com/_ADU/index.html
Here's the HTML & CSS of the nav:
HTML:
<nav class="top-bar bottom-bar" data-topbar>
<section class="top-bar-section">
<ul class="right">
<li>CLIENTS</li>
<li class="divider"></li>
<li>COMPANY</li>
<li class="divider"></li>
<li>DEMO</li>
</ul>
<ul class="right">
<li class="divider"></li>
<li class="has-dropdown not-click">
COURSES
<ul class="dropdown dropdown-wrapper mega-menu">
<li>
<div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MATH</h3></li>
<li class=""></li>
<li class="mega-menu-item active">GENERAL STUDIES</li>
<li class="mega-menu-item">FINANCE & BUSINESS</li>
<li class="mega-menu-item">ENGINEERING & TECHNICAL</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>SCIENCE</h3></li>
<li class=""></li>
<li class="mega-menu-item active">PREPERATORY PHYSICS</li>
</ul>
</div>
<div class="mega-menu-category small-4 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item active">SHIP SUPERINTENDENT (MARINE)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (GENERAL)</li>
<li class="mega-menu-item">SHIP SUPERINTENDENT (TECHNICAL)</li>
<li class="mega-menu-item">BREAKBULK SHIPPING</li>
<li class="mega-menu-item">LNG CARGO OPERATIONS</li>
<li class="mega-menu-item">MARITIME LOGISTICS 1</li>
<li class="mega-menu-item">MARINE ENGINEERING</li>
<li class="mega-menu-item">SHIP OPERATIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"></li>
<li class="has-dropdown not-click">
INDUSTRIES
<ul class="dropdown dropdown-wrapper-2 mega-menu-2">
<li>
<div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>HIGHER EDUCATION</h3></li>
<li class=""></li>
<li class="mega-menu-item">HIGHER EDUCATION OVERVIEW</li>
<li class="mega-menu-item">TEACHERS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">COURSES</li>
<li class="mega-menu-sub-item">FEATURES</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
<li class="mega-menu-item">ADMINISTRATORS</li>
<ul>
<li class="mega-menu-sub-item">OVERVIEW</li>
<li class="mega-menu-sub-item">IMPLEMENTATION</li>
<li class="mega-menu-sub-item">FAQ</li>
</ul>
</ul>
</div>
<div class="mega-menu-category small-6 columns">
<ul>
<li><h3>MARITIME</h3></li>
<li class=""></li>
<li class="mega-menu-item">MARITIME INDUSTRY</li>
<li class="mega-menu-item">MARITIME INSTITUTIONS</li>
</ul>
</div>
</div>
</li>
</ul>
</li>
<li class="divider"><li>
</ul>
</section>
</nav>
CSS:
.bottom-bar{
position: fixed;
bottom: 0;
width: 100%;
left: 0;
background-color: #d5b93f;
}
.mega-menu{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-2{
position: relative;
bottom: 44px;
left: -220px !important;
background-color: #d5b93f;
padding-bottom: 200px;
}
.mega-menu-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.mega-menu-sub-item a{
height: 20px;
background: #d5b93f !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
position: relative;
left: 25px;
}
.mega-menu-item a:hover{
height: 20px;
background-color: none !important;
font-size: 12px !important;
padding-left: 0px !important;
padding-right: 0px !important;
}
.top-bar-section li a{
background: none !important;
}
.top-bar-section ul li{
background: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li:hover{
background-color: none;
font-family: "FuturaStd-Book";
font-size: 20px;
}
.top-bar-section ul li > a{
color: #60100f;
font-family: "FuturaStd-Book";
font-size: 16px;
}
.top-bar-section ul{
height: 270px !important;
}
.top-bar-section .dropdown li{
height: 20px;
}
.top-bar-section li.active:not(.has-form) a:not(.button){
padding-left: 0px;
padding-right: 0px;
}
.mega-menu-category{
padding-left: 30px !important;
padding-right: 30px !important;
}
h3
{
color: #fff !important;
font-family: "FuturaStd-Book";
}
#media only screen and (min-width: 641px)
{
.dropdown-wrapper
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 740px !important;
}
.dropdown-wrapper-2
{
background-color: rgba(96, 16, 15, 0.7) !important;
width: 640px !important;
height: 400px !important;
}
}
I'm using Zurb Foundation 5 as a Front-End framework. Been working on this for days & can't figure out why this is happening. All of your support is welcomed & greatly appreciated! Thank you!!

I viewed your site's source code and tried some things and found that you problem is in line 1365 of foundation.css. Just remove the display:block; and your problem disappears!

Remove right margin off one element in HTML/CSS List Navigation

I am trying to get the gray buttons at the top of this page to all fit across the top (in line with the body), rather than on two lines: http://www.nbm.org/test/nbm-online-drafts/dropdown-testing.html
I have it set up as a list:
<nav id="main-nav">
<ul id="nav-primary">
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/planyourvisit.jpg" alt="Plan Your Visit" width="109" height="48">
<ul class="subnav">
<li>Buy Tickets
</li>
<li>Hours & Admission
</li>
<li>Accessibility & Directions
</li>
<li>Tours
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/exhibitionscollections.jpg" alt="Exhibitions / Collections" width="109" height="48">
<ul class="subnav">
<li>Current Exhibitions
</li>
<li>Upcoming Exhibitions
</li>
<li>Buy Tickets
</li>
<li>Collections
</li>
</ul>
</li>
<li><img src=" http://www.nbm.org/assets/images/homepage/2011/nav-sprites/adultprogs.jpg" alt="Adult Programs" width="109" height="48">
<ul class="subnav">
<li>Upcoming Programs
</li>
<li>Spotlight on Design
</li>
<li>Watch / Listen
</li>
<li>Continuing Education Credits
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/familiesteens.jpg" alt="Families / Teens" width="109" height="48">
<ul class="subnav">
<li>Festivals
</li>
<li>Everyday Activities
</li>
<li>Teens & Young Adults
</li>
<li>Summer Camp
</li>
<li>Scouts & Youth Groups
</li>
<li>Birthday Parties
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/schoolseducators.jpg" alt="Schools / Educators" width="109" height="48">
<ul class="subnav">
<li>For Educators
</li>
<li>For Teens & Young Adults
</li>
<li>Plan a School Visit
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/joindonate.jpg" alt="Join / Donate" width="109" height="48">
<ul class="subnav">
<li>Donate Now
</li>
<li>Membership
</li>
<li>Corporate Giving
</li>
<li>Awards & Honors
</li>
<li>Volunteer
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/shop.jpg" alt="Shop" width="109" height="48">
<ul class="subnav">
<li>Books
</li>
<li>Home
</li>
<li>Toys
</li>
<li>Museum
</li>
<li>Stationery
</li>
<li>Fashion
</li>
<li>Design
</li>
</ul>
</li>
<li><img src="http://www.nbm.org/assets/images/homepage/2011/nav-sprites/aboutus.jpg" alt="About Us" width="109" height="48">
<ul class="subnav">
<li>About the Museum
</li>
<li>E-newsletters
</li>
<li>Press Room
</li>
<li>Staff & Governance
</li>
<li>Employment & Internships
</li>
</ul>
</li>
</ul>
I want to keep the li right margin at 4px, but that pushes the "About Us" button to a second line. Changing the li right margin to 3px is too little and the buttons do not line up with the body on the right.
CSS:
#main-nav {
background: none repeat scroll 0 0 white;
height: 53px;
left: 0;
position: relative;
top: 128px;
width: 100%;
z-index: 11;
}
#main-nav .subnav {
background: none repeat scroll 0 0 #D7D6D4;
border: 0 solid #D4D5D6;
display: none;
left: 0;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
top: 49px;
width: 109px;
z-index: 11;
}
#main-nav .subnav li {
border-bottom: 1px solid #EEEEEE;
display: block;
margin: 0;
}
#main-nav .subnav li a {
color: #000000;
font-size: 11px;
height: 18px;
padding: 6px 4px 19px;
width: 101px;
}
#main-nav .subnav li a:hover {
background: none repeat scroll 0 0 #BFBEBA;
width: 101px;
}
#nav-primary {
float: left;
list-style-type: none;
margin: 0;
padding: 0;
}
#nav-primary li {
float: left;
margin-right: 4px;
position: relative;
}
#nav-primary li a {
color: #000000;
float: left;
font-size: 13px;
font-weight: bold;
height: 48px;
line-height: 16px;
text-align: center;
text-decoration: none;
width: 109px;
}
#nav-primary li a:hover {
text-decoration: none;
}
#nav-primary li:hover .subnav {
display: block;
}
Is it possible to remove the right margin on the last li element? Or to hide it?
Any ideas are much appreciated!

It is this simple:
#nav-primary > li:last-child
{
margin-right:0;
}