I am new to website design, and there are a few flaws in my navbar that I cannot fix.
I cannot get the navbar to center properly.
When the screen resolution changes, the list overflows into the next line.
there is 1 list element that is sized differently and I cannot seem to figure out why.
Here is the code:
https://jsfiddle.net/b02nm6ae/#update
CSS:
.nav_wrapper {
z-index: 9999;
padding: 0;
margin: 0;
width: 100%;
min-width: 50px;
}
.nav_wrapper ul {
display: block;
position: relative;
position: fixed;
/* fixes automatic values set by ul */
margin: 0;
padding: 0;
}
.nav_wrapper ul li {
list-style: none;
display: list-item;
background-color: #993300;
float: left;
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: list-item;
list-style: none;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
float: none;
position: relative;
}
.nav_wrapper ul li a{
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover{
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul li > a:after {
content: '\25BE';
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
HTML:
<body>
<!-- NAV -->
<div class="nav_wrapper">
<ul class="nav">
<li>Home</li>
<li>Calandar</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor</li>
<li>History</li>
<li>About Byzantines</li>
</ul>
</li>
<li>Mass Times</li>
<li>Contact Us</li>
</ul>
<div>
<!-- SECTION 1 -->
</body>
</html>
Once you float the li then centering becomes problematical. In these instances, it's often preferred to use display:inline-block and center then by applying text-align:center to the parent ul.
This does have a white-space downside but there are methods around that, one of which (font-size) I have used here.
As for the single element with the greater height...that was caused by the pseudo-element...so slapped a quick patch over it. Frankly, I would be applying a class to the parent li and using a pseudo-element on the li but that's another debate entirely.
body {
font-family: 'Didact Gothic', sans-serif;
padding: 0;
margin: 0;
background-color: #CCCCFF;
}
.nav_wrapper ul {
display: block;
margin: 0;
padding: 0;
text-align: center;
font-size: 0;
/* remove whitespace */
}
.nav_wrapper ul li {
list-style: none;
display: inline-block;
vertical-align: top;
background-color: #993300;
position: relative;
font-size: 1rem;
/* font-size reset */
}
/* hides the submenu by default */
.nav_wrapper ul ul {
display: none;
top: 100%;
left: 0;
position: absolute;
}
/* makes the sub menu appear on hover over list element */
.nav_wrapper ul li:hover > .sub_nav1 {
display: block;
width: 100%;
}
/* lists the list items on top of one another */
.nav_wrapper ul .sub_nav1 li {
position: relative;
width: 100%;
}
.nav_wrapper ul li a {
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
.nav_wrapper li a:hover {
color: #000;
background-color: #ffffff;
}
/* Dropdown Menu arrow */
.nav_wrapper ul> li > a:after {
content: '\25BE';
line-height: 0;
}
.nav_wrapper ul li > a:only-child:after {
content: '';
}
<div class="nav_wrapper">
<ul class="nav">
<li>Home
</li>
<li>Calendar
</li>
<li>About Us
<ul class="sub_nav1">
<li>The Pastor
</li>
<li>History
</li>
<li>About Byzantines
</li>
</ul>
</li>
<li>Mass Times
</li>
<li>Contact Us
</li>
</ul>
<div>
Well I notice that if I set a 25 pixel height to
.nav_wrapper ul li a
that removes the extra space for example..
.nav_wrapper ul li a{
height:25px;
display: block;
text-decoration: none;
color: #ffffff;
padding: 12px;
}
https://jsfiddle.net/b02nm6ae/9/
Related
I am a beginner to web development, and I am trying to make a dropdown menu.
The problem is when I hover on particular element, it consumes more than the expected space.
I want it to appear below the "shop" element. I do not understand where I am going wrong.
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Set position: relative on shop-link and position: absolute on dropdown. Then align dropdown with top, left, bottom, transform what would you like.
With transform it would look like this:
.link {
position: relative;
}
.dropdown {
position: absolute;
bottom: 0;
left: 0;
transform: translateY(100%)
}
I think the issue is with the way you organized these elements. Personally, when I make drop down menus, I use <button> for each root of the drop down menu. It makes styling everything much easier.
Then, what I do is I put the main text in an <h2> or <h3>, and style that how I want the main part of the drop down to look. Everything inside of the drop down can be styled using the <button> class' settings. Here's how I modified your code to get what I assumed your looking for.
CSS Styling:
.nav2 a {
color: #000000;
text-decoration: none;
display: block;
}
.nav2 button {
margin: 20px 40px;
padding: 0 10px 0 10px;
border: 0px;
/* change this to the color you want the background of your website to be */
background-color: white;
border: 2px solid gold;
font-size: 0px;
}
.nav2 button:hover {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
background-color: white;
border: 2px solid greenyellow;
/* change this to the color you want the background of your website to be */
background-color: white;
font-size: 16px;
}
h2 {
color: #000000;
text-decoration: none;
font-size: 16px;
font-weight: normal;
}
And then the HTML body:
<div class="nav2">
<button>
<h2>Home</h2>
</button>
<button>
<h2>Shop</h2>
<br>Products
<br>Membership
</button>
<button>
<h2>Blog</h2>
</button>
<button>
<h2>News</h2>
</button>
<button>
<h2>Activity</h2>
</button>
<button>
<h2>Contact Us</h2>
</button>
</div>
The end result looked like this
I hope my response was helpful!!
Your CSS is a bit messy, but to get it working add the following:
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
position: absolute "removes" the element from the container so it is not contained in your parent's border. This will allow us to use the left, right, bottom, top CSS properties to position the sub-nav.
margin-top is used here to remove the intersection of shop and the sub-nav. However, you should be careful increasing this value greater than 1-2px since it will create empty space and hovering on the elements is required for your sub-nav to show.
Here is the working snippet:
.nav {
width: 100%;
float: right;
}
.nav ul {
/* it edits the list, list-style: none; removes the discs from the list items */
float: right;
list-style-type: none;
display: block;
text-align: right;
}
.nav ul li {
display: inline-block;
margin: 20px 40px;
padding: 0 10px 0 10px;
text-align: center;
position: relative;
border: 2px solid gold;
}
.nav ul li a {
/* edits the links- text-decoration: none; removes the underline others are obvious*/
color: #000000;
text-decoration: none;
display: block;
}
/* sub-nav option list */
.nav > ul > li > ul {
position: absolute;
margin-top: 1px; /* removes border intersection, can't be too large otherwise a gap will remove hover */
left: -55px;
}
.nav ul li ul li {
/* navigation sub-options disappear when not hovered */
display: none;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul li {
/* navigation options appear when hover on elements */
display: block;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact Us</li>
</ul>
</div>
Position docs for a better explanation of absolute: https://developer.mozilla.org/en-US/docs/Web/CSS/position
Here You have:
.nav{
position: relative;
display: flex;
justify-content: flex-end;
}
.nav ul{
display: flex;
list-style-type: none;
margin: 0;
padding: 0;
}
.nav ul li{
background-color: gold;
border: 1px solid gold;
color: #FFF;
}
.nav ul li:hover{
background-color: #FFF;
color: gold;
}
.nav ul li a{
padding: 1rem 2rem;
color: inherit;
text-decoration: none;
font-family: Verdana;
}
.nav ul li ul {
/* navigation sub-options disappear when not hovered */
display: none;
opacity: 0;
visibility: hidden;
position: absolute;
margin: 0;
padding: 0;
border: 2px solid greenyellow;
}
.nav ul li:hover ul {
/* navigation options appear when hover on elements */
display: flex;
opacity: 1;
visibility: visible;
}
<div class="nav">
<ul>
<li>Home</li>
<li>Shop
<ul>
<li>Products</li>
<li>Membership</li>
</ul>
</li>
<li>Blog</li>
<li>News</li>
<li>Activity</li>
<li>Contact US</li>
</ul>
</div>
I have a menu with margin-top and margin-left of 12 pixels for the elements that are inside another , but when the cursor is between that space (margin), the menu is hidden. I can solve that if I remove position:absolute, but I need it. How can I solve this?
HTML
<ul>
<li>Home</li>
<li>Food
<ul>
<li>Chilean food</li>
<li>Chinese food</li>
<li>Mexican food
<ul>
<li>Nachos</li>
<li>Quesadillas</li>
<li>Tacos</li>
</ul>
</li>
</ul>
CSS
ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
}
ul li {
position: relative;
}
ul li ul {
display: none;
position: absolute;
margin-top: 4px;
}
ul li:hover > ul {
display: block;
}
ul li a {
text-decoration: none;
padding: 12px;
display: block;
background: black;
color: white;
white-space: nowrap;
}
ul li ul li ul {
top: 0;
left: 100%;
margin-top: 0;
margin-left: 4px;
}
JSFiddle: https://jsfiddle.net/v3ebd6hy/3/
Thanks!
Change the margin-top to padding-top in ul li ul.
Fiddle for Reference
I have a navigation bar that is fluid on both desktop and mobile devices. However, the drop-down items widths don't resize based on the parent's width. I would like to hover over a drop-down item and it has the same width as the list item I hovered over. At the moment it has a fixed width but I can't seem to get it working by trying other options. I also cannot get the entire navigation bar to center, as at the moment it is stuck to the left. Thanks for the help!
Here's a codepen of the code: https://codepen.io/Macast/pen/rYQPNe
HTML:
<nav>
<div id="logo">
<img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Short +</label>
Short
<input type="checkbox" id="drop-1" />
<ul>
<li>History</li>
<li>Our Services</li>
<li>Our Aim</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Dropdown Even Longer +</label>
Dropdown Even Longer
<input type="checkbox" id="drop-2" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">More Options +</label>
More Options
<input type="checkbox" id="drop-3" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
</ul>
</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</nav>
CSS:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
text-align: center;
/*padding: 0 30px;*/
/*float: left;*/
/*font-size: 20px;*/
/*line-height: 60px; */
}
#logo img {
width: 30%;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
/*float: right;*/
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
float: left;
background-color: #254441;
text-align: center;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
text-align: center;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
width: 170px;
float: none;
display: list-item;
position: relative;
text-align: center;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' +';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
#logo img {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
text-align: center;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
To adjust the dropdown menu size to the same size as the containing list-item, declare a left and right property value of 0 on the dropdown element in question (nav ul ul), then remove the explicitly declared width on the nested list items of the dropdown menu (nav ul ul li).
Example:
nav ul ul {
display: none;
position: absolute;
top: 60px;
/* additional property values declared */
left: 0;
right: 0;
}
This works because the dropdown menus are already positioned absolute and the containing parent element list item (nav ul li) is already positioned relative.
You can position absolute elements relative to their parents if their parents are relative.
So all we are doing here is defining the extent of the dropdown menu width to "stretch" from "left to right" of the parent's width.
Code Snippet Demonstration:
.toggle,
[id^=drop] {
display: none;
}
/* Giving a background-color to the nav container. */
nav {
margin: 0;
padding: 0;
background-color: #254441;
}
#logo {
display: block;
text-align: center;
/*padding: 0 30px;*/
/*float: left;*/
/*font-size: 20px;*/
/*line-height: 60px; */
}
#logo img {
width: 30%;
}
/* Since we'll have the "ul li" "float:left"
* we need to add a clear after the container. */
nav:after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul",
* and adding "position:reltive" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #254441;
text-align: center;
position: relative;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
text-align: center;
}
nav ul li ul li:hover {
background: #000000;
}
/* Background color change on Hover */
nav a:hover {
background-color: #000000;
}
/* Hide Dropdowns by Default
* and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* has to be the same number as the "line-height" of "nav a" */
top: 60px;
left: 0;
right: 0;
}
/* Display Dropdowns on Hover */
nav ul li:hover > ul {
display: inherit;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
/*width: 170px;*/
float: none;
display: list-item;
position: relative;
text-align: center;
}
/* Second, Third and more Tiers
* We move the 2nd and 3rd etc tier dropdowns to the left
* by the amount of the width of the first tier.
*/
nav ul ul ul li {
position: relative;
top: -60px;
/* has to be the same number as the "width" of "nav ul ul li" */
left: 170px;
}
/* Change ' +' in order to change the Dropdown symbol */
li > a:after {
content: ' +';
}
li > a:only-child:after {
content: '';
}
/* Media Queries
--------------------------------------------- */
#media all and (max-width: 768px) {
#logo {
display: block;
padding: 0;
width: 100%;
text-align: center;
float: none;
}
#logo img {
width: 100%;
box-sizing: border-box;
padding: 20px;
}
nav {
margin: 0;
}
/* Hide the navigation menu by default */
/* Also hide the */
.toggle + a,
.menu {
display: none;
}
/* Stylinf the toggle lable */
.toggle {
display: block;
background-color: #254441;
padding: 14px 20px;
color: #FFF;
font-size: 17px;
text-decoration: none;
border: none;
text-align: center;
}
.toggle:hover {
background-color: #000000;
}
/* Display Dropdown when clicked on Parent Lable */
[id^=drop]:checked + ul {
display: block;
}
/* Change menu item's width to 100% */
nav ul li {
display: block;
width: 100%;
}
nav ul ul .toggle,
nav ul ul a {
padding: 0 40px;
}
nav ul ul ul a {
padding: 0 80px;
}
nav a:hover,
nav ul ul ul a {
background-color: #000000;
}
nav ul li ul li .toggle,
nav ul ul a,
nav ul ul ul a {
padding: 14px 20px;
color: #FFF;
font-size: 17px;
}
nav ul li ul li .toggle,
nav ul ul a {
background-color: #212121;
}
/* Hide Dropdowns by Default */
nav ul ul {
float: none;
position: static;
color: #ffffff;
/* has to be the same number as the "line-height" of "nav a" */
}
/* Hide menus on hover */
nav ul ul li:hover > ul,
nav ul li:hover > ul {
display: none;
}
/* Fisrt Tier Dropdown */
nav ul ul li {
display: block;
width: 100%;
}
nav ul ul ul li {
position: static;
/* has to be the same number as the "width" of "nav ul ul li" */
}
}
#media all and (max-width: 330px) {
nav ul li {
display: block;
width: 94%;
}
}
<nav>
<div id="logo">
<img src="images/J.-Freeman-&-Son-Landscape-Logo-White.png">
</div>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-1" class="toggle">Short +</label>
Short
<input type="checkbox" id="drop-1" />
<ul>
<li>History</li>
<li>Our Services</li>
<li>Our Aim</li>
</ul>
</li>
<li>
<!-- First Tier Drop Down -->
<label for="drop-2" class="toggle">Dropdown Even Longer +</label>
Dropdown Even Longer
<input type="checkbox" id="drop-2" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>
<!-- Second Tier Drop Down -->
<label for="drop-3" class="toggle">More Options +</label>
More Options
<input type="checkbox" id="drop-3" />
<ul>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</li>
</ul>
</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
<li>Option</li>
</ul>
</nav>
In Addition:
You can horizontally center the navigation menu by removing the float rule declared on nested list-items (nav ul li), as this will negate any attempt to align content (unless you use flex-box), then declare text-align: center on the containing unordered list (.menu), as demonstrated below:
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
I want to reposition my navbar. In its current position:
#navbar ul {
width: 100%;
float: left;
margin: 0;
padding: 0;
list-style: none;
background-color: #5D2C2C;
/*position: relative;
bottom: 115px;*/
}
#navbar ul li {
float: left;
/*position: relative;
left: 420px;*/
}
#navbar li li {
display: none;
}
#navbar li:hover li {
display: block;
width: inherit;
}
#navbar a {
font-family: "Palatino Linotype";
color: #FFF;
text-decoration: none;
padding: 2px 5px;
}
the dropdown displays correctly
but when I remove the /* comments */ so the bar is correctly positioned, the menu drops down but the two items aren't showing and I cannot find out why
the HTML if needed:
<div id="navbar">
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritme Signals: Letters</li>
<li>Maritme Signals: Numbers </li>
</ul>
</li>
</ul>
I have container with width of 100% and inside of it i have a menu. When i want to apply background color to menu container nothing happens, its killing me i cant figure it out.
It works when i apply display inline-block on it but why would i need to display it differently its only a container 100% width
menu {
width: 100%;
background: #333;
}
.menu > ul {
width: 100%;
list-style: none;
padding: 0;
margin: 0;
}
.menu > ul > li {
float: left;
background: #e9e9e9;
display: inline-block;
padding: 0;
margin: 0;
}
.menu > ul > li > a {
text-decoration: none;
padding: 1.5em 3em;
display: inline-block;
outline: 0 none;
}
.menu > ul > li > ul {
display: none;
background: #333;
padding: 20px 30px;
position: absolute;
width: 100%;
z-index: 99;
left: 0;
color: #fff;
margin: 0;
}
.menu > ul > li:hover > ul {
display: block;
}
and this is my html
<div class="menu">
<ul>
<li>Home
<ul>
This is also mega menu
</ul>
</li>
<li>Who are we?
<ul>
This is mega menu
</ul>
</li>
<li>Services</li>
<li>Contact</li>
</ul>
</div>
also when i try to float my UL to right nothing happens. Did i mess up my display: in any element ?
That's because your LI elements are floated. In this case, container will have a height of 0 pixels. You need to clear the container (.menu) first. There's also a slight error on the MENU element - you forgot to add the DOT .menu (to be a class, as in your html code).
To clear floats, read this > https://css-tricks.com/the-how-and-why-of-clearing-floats/
.menu:before,
.menu:after {
content: "";
display: table;
}
.menu:after {
clear: both;
}
A working scenario, on jsfiddle, here > jsfiddle.net/4pgvzxs0/