Apparently, when I go down the list in the menu from the left side, the text becomes black and the background darkens however when i do it from the right, the text is still white. Also, when I resize the page and make it smaller, the words in the header of the menu converge with each other. I want the page to remain static when the window is resized like as in http://www.nfl.com when it's resized.
Here's my code:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
With your fiddle, you did not center the li elements which would not stretch the a elements to full width. You need to change this CSS selector:
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
This will stop the cutoff on the a tags. This also centers the list elements, which may not be desired, but you may build off and customize. Another thing, the dropdown will not conform to the parent unless you add this:
#navMenu ul li ul {
width: 100%;
}
Finally, to prevent tab converging, set the min-width attribute on the tabs. This is an arbitrary number and you may change to your liking. A side note, since min-width overrides width, this will affect the dropdown. You may want to omit this:
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
min-width: 500px;
}
I've included a snippet with the JSFiddle code edited:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
width:20%;
}
#navMenu ul li a {
text-align:center;
font-family:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
//width:150px;
width: 100%;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu ul li:hover li {
display:block;
width:100%;
}
#navMenu ul li ul {
width: 100%;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
}
#navMenu a:hover {
color: #000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<title>My Webpage</title>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
Related
How do I make the <h1> element and the <ul> element inline?
What I have tried so far:
body{
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
}
header h1{
margin:0;
display: inline;
}
nav ul{
margin:0;
display: inline;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
Just change the parent element <header> to a flexbox using display:flex; like this:
header{
display: flex;
/* other css properties below */
}
Check and run the following Code Snippet for a practical example of the above flexbox approach:
/* CSS */
body {
margin:0;
}
header{
background:#999;
color:white;
padding:15px 15px 0px 15px;
display: flex;
}
header h1{
margin:0;
}
nav ul{
margin:0;
}
nav ul li{
background:black;
color:white;
display: inline-block;
list-style-type: none;
padding:5px 15px;
}
nav ul li a {
color:white;
}
<!-- HTML -->
<header>
<h1>My Page</h1>
<nav>
<ul>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
<li>List Item</li>
</ul>
</nav>
</header>
I can't quite figure out why my drop down menu is hidden behind the div which contains the menu. I've tried positioning various elements relative and z-indexing the menu to a higher value than the div it's contained in but I've not had much luck.
My JS Fiddle link is here:
https://jsfiddle.net/Lj919ca6/
And the code for demonstrative purposes is here:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css" type="text/css">
<link href="https://fonts.googleapis.com/css?family=Abel" rel="stylesheet">
<title>Header 1</title>
</head>
<body>
<header id="header">
<div id="action-bar">
<div class="container">
<div>
<p class="ab-p">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<ul class="ab-ul top-bar-links">
<li>We Can Help</li>
<li>Something Random</li>
<li>More Random</li>
</ul>
</div>
</div>
</div>
<div class="main-header">
<div class="container">
<div>
<img class="logo" src="logo.png">
</div>
<div class="main-nav">
<nav id="primary_nav_wrap">
<ul>
<li class="current-menu-item">Home</li>
<li>Menu 1
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4
<ul>
<li>Deep Menu 1
<ul>
<li>Sub Deep 1</li>
<li>Sub Deep 2</li>
<li>Sub Deep 3</li>
<li>Sub Deep 4</li>
</ul>
</li>
<li>Deep Menu 2</li>
</ul>
</li>
<li>Sub Menu 5</li>
</ul>
</li>
<li>Menu 2
<ul>
<li>Sub Menu 1</li>
<li>Sub Menu 2</li>
<li>Sub Menu 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li class="dir">Sub Menu 1</li>
<li class="dir">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
<li>Category 4</li>
<li>Category 5</li>
</ul>
</li>
<li>Sub Menu 3</li>
<li>Sub Menu 4</li>
<li>Sub Menu 5</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
</div>
</header>
<img src="gentleman.jpg" />
</body>
</html>
CSS:
body{
margin:0;
}
p{
font-family: 'Abel', sans-serif;
-webkit-margin-before: 2px;
-webkit-margin-after: 2px;
}
a{
font-family: 'Abel', sans-serif;
}
li{
font-family: 'Abel', sans-serif;
}
ul{
list-style: none outside;
-webkit-margin-before: 0;
-webkit-margin-after: 0;
-webkit-margin-start: 0px;
-webkit-margin-end: 0px;
-webkit-padding-start: 0px;
}
ul li{
color:white;
display: inline-block;
margin-right: 6px;
padding-right: 6px;
border-right: 1px solid rgba(255,255,255,.1);
}
#header{
position: relative;
}
#action-bar{
left: 0;
top: 0;
width: 100%;
z-index: 30;
background: #242b33;
height:45px;
}
.container{
max-width: 1220px;
margin:0 auto;
position:relative;
overflow: hidden;
}
.ab-p{
color:#fff;
float:left;
padding:10px;
}
.top-bar-links{
float: right;
padding:10px;
}
.main-header{
position: static;
width: 100%;
background-color: #0c141d;
display:block;
overflow:auto;
}
.logo{
float: left;
width:300px;
height:auto;
}
.main-nav{
float:right;
}
#primary_nav_wrap ul
{
list-style: none;
position: relative;
float: left;
margin: 0;
padding: 0;
z-index: 201;
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
Any help appreciated greatly.
.container had overflow set to hidden that seems to be the culprit.
You have given two elements with overflow properties.
.container and #header, remove overflow and add the following css to main-header
min-height:200px; // depending on what you want the height to be.
Here is the code pen link : http://codepen.io/saa93/pen/qqdRZy
So yea, the menu bar won't extend 100% horizontally. It's only going half the way on my computer screen. Also, I want it to fit any screen 100%, so when I decrease the screen width, I want it to adjust properly, not just get all messy looking. Also, any advice on the coloring would be appreciated. Thanks so much for any help you bring forth.
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "HTTP://WWW.W3.ORG/tr/XHTML1/dtd/XHTML1-TRANSITIONAL.DTD">
<html>
<head>
<meta content="text/html; charset=utf-8" />
<title>My Webpage</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
<header>
My Webpage</header>
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
</body>
</html>
CSS:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #43a286;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #357e68;
}
#navMenu ul li:hover ul li a:hover {
background:#265a4a;
color: #000000;
}
#navMenu a:hover {
color:#000000;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
A little bit of math can be done.
I noticed that if I set the width of each main li in the nav to 100%, it would leave each to fit 100% of the viewport. However they would all be stacked upon one another like this:
body{
margin: 0;
padding: 0;
font-family: sans-serif;
}
header{
background: #00795f;
width: 100%;
padding: 40px 0;
color: white;
text-align: center;
}
#navMenu {
margin: 0;
padding: 0;
}
#navMenu ul {
margin:0;
padding:0;
line-height:30px;
}
#navMenu li {
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background-color: #00aeef;
width:100%;
}
#navMenu ul li a {
text-align:center;
font-famil:"Comic Sans MS", cursive;
text-decoration:none;
height:32px;
width:150px;
display:block;
color:#FFFFFF;
text-shadow:1px 1px 1px #000;
}
#navMenu ul ul {
position:absolute;
visibility:hidden;
top:32px;
}
#navMenu ul li:hover ul {
visibility:visible;
}
#navMenu li:hover {
background-color: #0076a3;
}
#navMenu ul li:hover ul li a:hover {
background:#0076a3;
color: #fff;
}
#navMenu a:hover {
color:#fff;
}
.clearFloat {
clear:both;
margin:0;
padding:0;
}
section{
line-height: 1.5em;
font-size: 0.9em;
padding: 40px;
width: 75%;
margin: 0 auto;
}
<div id="wrapper">
<div id="navMenu">
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<ul>
<li>Products
<ul>
<li>Link Item</li>
<li>Link Item</li>
<li>Link Item</li>
</ul>
</li>
</ul>
<br class ="clearFloat" />
</div>
</div>
<section>
Blabalalbalblababad;lkjfas;dkljf;alksjdf;aklsjdfk;alsdjkl;jasdfkl;ajsdf
a;kjldf;alksjdf;akljsdfa;klsdjf;alksdjfkl;asdjf;laksdfj;asdlkjf
a;sdlkjf;kljasdlfk;jas;dlkjfakl;sdjfa;lskjdf
ad;slkjf;laksjdf;lkajsdfkl;asjdfl;kajsdfk;ljasdfkljasdf
al;kjdf;lakjsdf;lkjasdfklj;alksj;dfak;ljdfakl;jdfklaj;fdkla;
</section>
So what I did was find out how many "Product" links you had and get that divided into 100%. In other words: 100% divided by how many "Product links". You have 5, so I set the width of each li to 20%
Here's your code: http://jsfiddle.net/DVJmS/40/
How can I create a drop down menu like the one in this picture:
What I already tried:
Check out this jsfiddle
I really can't get it to work, sorry for this noobish question and the code in the JSFiddle is all I have.
CSS:
#import url(http://fonts.googleapis.com/css?family=Homenaje);
#import url(http://fonts.googleapis.com/css?family=Open+Sans:400,700);
body {
font-family: 'Open Sans', sans-serif;;
color: #666666;
font-size: 14px;
background: url(../img/header.jpg) repeat-x;
margin: 0;
}
/*=============================*/
/*===== Functionality =====*/
/*=============================*/
/*===== Parents =====*/
#navMenu,
#navMenu ul,
#navMenu li {
display: block;
color: black;
font-size: 12px;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float:left;
position:relative;
width: 120px;
height:45px;
}
#navMenu ul li a {
line-height:45px;
display:block;
background-color: #333333;
margin-left: auto;
text-align: left;
color: white;
padding-left: 10px;
}
#navMenu ul li a:hover {
background-color: #03A6CF;
}
/*end Parents*/
/*===== Children =====*/
#navMenu ul ul {
position:absolute;
visibility:hidden;
margin-left: -13px;
}
#navMenu ul li:hover > ul {
visibility:visible;
}
/*end children*/
/*==========================*/
/*===== Prettyness =====*/
/*==========================*/
#navMenu ul li a {
text-decoration:none;
}
What about something like this? http://fiddle.jshell.net/Egg4t/
#navMenu ul,
#navMenu li {
display: block;
font-size: 12px;
margin: 0;
}
#navMenu {
position: relative;
}
#navMenu ul {
line-height:30px;
}
#navMenu li {
list-style:none;
float: left;
padding-right: 20px;
padding-left: 10px;
font-size: 14px;
}
#navMenu li li {
line-height: 25px;
color: #03A6CF;
float: left;
}
#navMenu li li li {
float: none;
display: block;
}
#navMenu ul li a {
display: block;
font-size: 12px;
line-height: 25px;
margin-left: auto;
text-align: left;
}
#navMenu ul ul {
position:absolute;
left: 0;
padding: 0;
width: 500px;
background-color: #333333;
visibility:hidden;
}
#navMenu ul ul ul {
position: static;
display: inline;
}
#navMenu ul li:hover ul {
visibility:visible;
}
<div id="navMenu" class="last-topnav">
<ul>
<li> Menu 1
<ul>
<li> Menu 1 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 1 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
<li> Menu 2
<ul>
<li> Menu 2 Column 1
<ul>
<li>item 1</li>
<li>item 2</li>
<li> Level 2
<ul>
<li>item 2</li>
<li>item 2</li>
</ul>
</li>
</ul>
</li>
<li> Menu 2 Column 2
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
<li> Column 3
<ul>
<li>
item 1
</li>
<li>item 2</li>
<li>item 3<li>
<li>item 4<li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:
<div id="navMain">
<ul>
<li>Forside
<ul>
<li>1111111111111</li>
<li>Link 1-2</li>
<!-- etc. -->
</ul>
</li>
<li>Om Os
<ul>
<li>Link 2-1</li>
<li>Link 2-2</li>
<!-- etc. -->
</ul>
</li>
<li>Link 3
<ul>
<li>Link 3-1</li>
<li>Link 3-2</li>
<!-- etc. -->
</ul>
</li>
</ul>
</div>
Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.
So how would i make all li in each inner ul the same size as the widest one?
Here you can find the CSS if needed.
Here. Notice I added a class to your menu li's and that I added a body background to your css, because I couldn't notice your menus. Finally the trick is done by making the li elements 100% width
body {
background-color: green;
}
.menu li {
width: 100%
}
#navMain {}
#navMain ul {
padding: 0;
margin: 0;
z-index: 2;
}
#navMain ul li {
margin-right: 5px;
text-align: center;
}
#navMain li a {
display: block;
text-decoration: none;
color: white;
padding-left: 10px;
padding-right: 10px;
}
#navMain li a:hover {
background-color: black;
}
#navMain ul li:last-child {
margin-right: 0px;
}
#navMain li {
position: relative;
float: left;
list-style: none;
margin: 0;
padding: 0;
font-size: 17px;
font-weight: bold;
color: #fff;
}
#navMain ul ul {
position: absolute;
top: 20px;
visibility: hidden;
background-image: url(img/alphaBg.png);
}
#navMain ul li ul li {
font-size: 12px;
margin-right: 0px;
text-align: left;
}
#navMain ul li ul li:first-child {
padding-top: 5px;
}
#navMain ul li:hover ul {
visibility: visible;
}
<html>
<head>
</head>
<body>
<div id="navMain">
<ul>
<li>Forside
<ul class="menu">
<li>1111111111111</li>
<li>Link 1-2</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
<li>Link 1-3</li>
</ul>
</li>
<li>Om Os
<ul class="menu">
<li>Link 2-1</li>
<li>Link 2-2</li>
<li>Link 2-3</li>
</ul>
</li>
<li>Link 3
<ul class="menu">
<li>Link 3-1</li>
<li>Link 3-2</li>
<li>Link 3-3</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
li {display:block} will make the list items as wide as the widest item in that parent container
body {
background: #ededed;
margin: 0 auto;
}
.wrapper {
width: 720px;
border: 1px solid red;
padding: 5px;
}
.menu {
padding: 0;
margin: 0;
width: 100%;
border-bottom: 0;
}
.menu li {
display: table-cell;
width: 1%;
float: none;
border: 1px solid green;
margin: 2px;
padding: 10px;
text-align: center;
}
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="wrapper">
<ul class="menu">
<li>menu 1</li>
<li>menu 2</li>
<li>menu 3</li>
<li>menu 4</li>
<li>menu 5</li>
</ul>
</div>
</body>
</html>