On my Page i have a navigationbar. But if i zoom inside the navigationbar disappers. The navi got the position: fixed. I dont know how to correct it, that when i zoom inside that i can still see the navigationbar.
Code:
*{
margin: 0px;
padding: 0px;
font-family: 'Muli', sans-serif;
font-size: 20px;
}
body{
background-color: #4A3A47;
height: 5000px;
}
section{
width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
height: 100%;
}
.divbox{
vertical-align: top;
display: inline-block;
width: 250px;
border: 4px solid #D7E8D5;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: #D7E8D5;
}
.divbox:hover{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
/* Bildern noch eine Klasse geben */
.divbox:hover img{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
img{
transition: all 0.5s;
}
/*margin-left: -602px;---------------*/
nav {
margin-left: -602px;
position: fixed;
left: 50%;
transform: translate(-100%);
top: 100px;
width: 250px;
background-color: #E8ED76;
}
nav h3{
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background-color: #FFCD57;
}
nav li{
list-style-type: none;
}
nav ul ul li a{
color: black;
text-decoration: none;
font-size: 20px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.5s;
}
nav ul ul li a:hover{
background-color: #FFCD57;
border-left: 5px solid #4A3A47;
}
nav ul ul{
display: none;
}
nav li.active ul{
display: block;
}
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
$("nav h3").click(function(){
//slide up all the link lists
$("nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
</head>
<body>
<nav>
<ul>
<li><h3>Bereich 1</h3>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<div class="divbox">
<img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
</div>
</article>
</section>
</body>
</html>
Here i have fixed this for you.
*{
margin: 0px;
padding: 0px;
font-family: 'Muli', sans-serif;
font-size: 20px;
}
body{
background-color: #4A3A47;
height: 5000px;
}
section{
width: 1200px;
margin-left: auto;
margin-right: auto;
overflow: hidden;
text-align: center;
height: 100%;
}
.divbox{
vertical-align: top;
display: inline-block;
width: 250px;
border: 4px solid #D7E8D5;
margin: 0 50px;
transition: all 0.5s;
margin-top: 200px;
margin-bottom: 200px;
background-color: #D7E8D5;
}
.divbox:hover{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
/* Bildern noch eine Klasse geben */
.divbox:hover img{
border-bottom-right-radius: 75px;
border-bottom-left-radius: 75px;
}
img{
transition: all 0.5s;
}
/*margin-left: -602px;---------------*/
nav {
position: fixed;
top:90px;
left:0px;
width: 250px;
background-color: #E8ED76;
z-index:100;
}
nav h3{
font-size: 12px;
line-height: 34px;
padding: 0 10px;
cursor: pointer;
background-color: #FFCD57;
}
nav li{
list-style-type: none;
}
nav ul ul li a{
color: black;
text-decoration: none;
font-size: 20px;
line-height: 27px;
display: block;
padding: 0 15px;
transition: all 0.5s;
}
nav ul ul li a:hover{
background-color: #FFCD57;
border-left: 5px solid #4A3A47;
}
nav ul ul{
display: none;
}
nav li.active ul{
display: block;
}
<html>
<head>
<title>Startseite</title>
<link rel="stylesheet" href="index.css">
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Muli' rel='stylesheet' type='text/css'>
<!-- prefix free to deal with vendor prefixes -->
<script src="http://thecodeplayer.com/uploads/js/prefixfree-1.0.7.js" type="text/javascript" type="text/javascript"></script>
<!-- jQuery -->
<script src="http://thecodeplayer.com/uploads/js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
/*jQuery time*/
$(document).ready(function(){
$("nav h3").click(function(){
//slide up all the link lists
$("nav ul ul").slideUp();
//slide down the link list below the h3 clicked - only if its closed
if(!$(this).next().is(":visible"))
{
$(this).next().slideDown();
}
})
})
</script>
</head>
<body>
<nav>
<ul>
<li><h3>Bereich 1</h3>
<ul>
<li>Link 1.1</li>
<li>Link 1.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
<li><h3>Bereich 2</h3>
<ul>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
<li>Link 2.1</li>
<li>Link 2.2</li>
</ul>
</li>
</ul>
</nav>
<section>
<article>
<div class="divbox">
<img src="http://ipadminibackgrounds.com/assets/Battlefield-3-Game-iPad-mini-wallpaper-250x250.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="http://static.planetminecraft.com/files/resource_media/screenshot/1341/11Minecraft-Creeper-Wallpaper-1080p-HD-250x250up_6509836_lrg.jpg" width="250" height="250" />
</div>
<div class="divbox">
<img src="https://lh5.googleusercontent.com/-Nv-tRjOe0Ww/AAAAAAAAAAI/AAAAAAAAAMQ/81G-ZfxzYNc/photo.jpg" width="250" height="250" />
</div>
</article>
</section>
</body>
</html>
Related
I've been trying to figure out how to make a Navbar with a drop down menu. I feel like I'm super close, but for some reason when I hover over my main list element, it shows the entire contents of the submenus as well.
This is the point I keep getting stuck, I've tried adding in, switching around li, and ul in my CSS, but its just not working.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height: 2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding: 10px;
line-height: 1.6em;
width: 100%;
}
nav>ul>li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
nav>ul>li>ul {
background-color: blue;
list-style: none;
position: absolute;
/*display: none;*/
width: 100%;
}
nav>ul>li:hover ul li {
display: block;
}
nav>ul>li>ul>li>ul {
list-style: none;
background-color: black;
position: absolute;
left: 100%;
top: 0px;
width: 40%;
display: none;
}
nav>ul>li>ul>li:hover ul {
display: block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css" href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing 1
</li>
<li>Thing 2
</li>
<li>Thing 3
</li>
<li>Thing 4
</li>
<li>Thing 5
</li>
<li>Thing 6
</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
The first drop-down items should be centered with the Navbar element (Music).
Every sub-menu after that should appear top 0px; left 100%, of the list item (Song 1 in this case). You can see the expected results in my CSS.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: white;
font-family: Arial, Helvetica, san-serif;
}
body {
background-color: pink;
}
h1 {
text-align: center;
margin: auto;
padding-top: .4em;
background-color: coral;
height:2em;
width: 100%;
}
nav {
background: red;
margin: auto;
padding:10px;
line-height: 1.6em;
width: 100%;
}
nav > ul >li {
position: relative;
text-align: center;
color: yellow;
background-color: purple;
width: 31%;
height: auto;
}
/* i added only following codes */
nav ul li ul li ul {
display:none;
}
nav ul li ul li:hover ul {
display:block;
}
<!DOCTYPE html>
<html>
<head>
<title>Web Page</title>
<link rel="stylesheet" type="text/css"
href="C:\Users\geek\Desktop\positions\styles.css">
</head>
<header>
<H1>My Web Page</H1>
</header>
<body>
<div class="wrapper">
<nav>
<ul>
<li>Music
<ul>
<li>Song 1
<ul>
<li>Thing
1</li>
<li>Thing
2</li>
<li>Thing
3</li>
<li>Thing
4</li>
<li>Thing
5</li>
<li>Thing
6</li>
</ul>
</li>
<li>Song 2</li>
<li>Song 3</li>
<li>Song 4</li>
</ul>
</li>
</ul>
</nav>
</div>
</body>
</html>
A very similar example of what you are trying to achieve, in this case is on click but you can get the idea on how to do it on :hover
https://codepen.io/Angel-SG/pen/JwXRZo
I have a main menu bar that has a drop down menu and that menu has a sub menu. How do I get the sub drop down menu to display to the left of "drop down 2" link in the first drop down menu? I would also like to align the top of the sub menu to the top of the "drop down 2" link. Right now it's appearing below and to the left of the link.
HTML:
<img src="#" width="100%" height="100px">
<div class="TopMenuBar">
<ul>
<li>Side</li>
<li class="dropdown">menu
<div class="dropdown-menu">
<ul>
<li>drop down 1</li>
<li class="sub-dropdown">drop down 2
<div class="sub-dropdown-menu">
<ul>
<li>sub drop down 1</li>
<li>sub drop down 2</li>
</ul>
</div>
</li>
<li>drop down 3</li>
</ul>
</div>
</li>Bar</li>
</ul>
</div>
<div class="SideMenuBar">
<ul>
<li>Side</li>
<li>Menu</li>
<li>Bar</li>
</ul>
</div>
<h1>h1 Header</h1>
<main>
<h2>h2 Header</h2>
<p>Main paragraph</p>
Main link
<ul>
<li>Main list item</li>
<li>Main list item</li>
<li>Main list item</li>
</ul>
<h2>h2 Header</h2>
<p>Main paragraph</p>
Main link
<ul>
<li>Main list item</li>
<li>Main list item</li>
<li>Main list item</li>
</ul>
</main>
CSS:
.TopMenuBar {
border: none;
background-color: purple;
width: 100%;
margin: 0;
padding: 0;
}
.TopMenuBar>ul {
display: flex;
justify-content: space-between;
margin: 0;
padding: 0;
}
.TopMenuBar>ul, .dropdown-menu>ul, .sub-dropdown-menu>ul{
list-style-type: none;
margin: 0;
padding: 0;
}
.TopMenuBar>li {
display: inline;
}
.TopMenuBar a, .dropdown-menu a, .sub-dropdown-menu a{
color: white;
text-decoration: none;
padding: 20px;
display: block
}
/* Applys to all links under class TopMenuBar on hover */
.TopMenuBar a:hover {
background-color: #b14eb1;
color: black;
}
.dropdown-menu {
}
.dropdown-menu, .sub-dropdown-menu{
display: none;
background-color: purple;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
position: absolute;
z-index: 1;
}
/* Applys to all links under class TopMenuBar */
.dropdown-menu a {
color: white;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown:hover .dropdown-menu{
display: block;
}
.sub-dropdown:hover .sub-dropdown-menu{
display: table;
}
.SideMenuBar {
background-color: orange;
margin-left: 20px;
margin-top: 0;
display: flex;
height: 100vh;
float: left;
}
.SideMenuBar ul {
padding: 0;
margin: 0;
list-style-type: none;
justify-content: space-between;
display: flex;
flex-direction: column;
}
.SideMenuBar li a {
color: white;
text-decoration: none;
padding: 20px;
display: list-item;
}
.SideMenuBar li a:hover {
background-color: #fcbf7e;
color: black;
}
main {
padding-left: 10px;
display: table
}
h1 {
text-align: center;
}
here is a working model at codepen
Add this to the bottom of your stylesheet.
.sub-dropdown{
position: relative;
}
.sub-dropdown-menu{
left: 100%;
top: 0;
}
more here http://codepen.io/hunzaboy/pen/jyRoWB
See This code example, It may help you
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
.dropdown-submenu {
position: relative;
}
.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
display: block;
}
.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
</style>
</head>
<body>
<div class="container">
<br>
<div class="row">
<div class="dropdown">
<a id="dLabel" role="button" data-toggle="dropdown" class="btn btn-primary" data-target="#" href="/page.html">
Dropdown <span class="caret"></span>
</a>
<ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">
<li>Some action</li>
<li>Some other action</li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Hover me for more options</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Second level</a></li>
<li class="dropdown-submenu">
Even More..
<ul class="dropdown-menu">
<li>3rd level</li>
<li>3rd level</li>
</ul>
</li>
<li>Second level</li>
<li>Second level</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</body>
</html>
How to keep space between these three items on top?
I have tried few ways but when I try them they skip to next line. I have added the code I'm trying. And how to keep the size of width at 1000px?
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 auto;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
Where I want to make spaces is shown below:
You just need to add margin to the middle item ()
<!doctype html>
<html>
<body>
<title>AquaSL</title>
<link rel="icon" type="image/png" href="image/asl2.png"
<head>
<style>
p {
display: inline-block;
float: left;
}
ul {
list-style-type: none;
width:33%;
margin: 0 10px;
padding: 0;
overflow: hidden;
background-color: #339cff;
display: inline-block;
float: left;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 17px;
text-decoration: none;
}
li a:hover:not(.active) {
background-color: #345cff;
}
.active {
background-color: #ff9333;
}
</style>
<meta charset="utf-8">
<p><b><font color="white" size="+3">M Y W E B</font></b></p>
<body>
<ul>
<li><a class="active" href="#home">HOME</a></li>
<li>NEWS</li>
<li>Page 2</li>
<li>page3</li>
<li>page4</li>
<li>ABOUT US</li>
</ul>
<img src="image/facebook-icon.png" width="54" height="55">
</body>
<body background="image/background2.jpg"
<br>
<h5 style="position: fixed; bottom: 0; width:100%;text-align: center">
<font color="yellow"><strong> Copyright © MY WEB 2016 All Rights Reserved.
</strong></font></h5>
<img src="/image/strip.jpg" style="width:100%;">
</body>
</html>
I am trying to achieve a fully centered page, however when I add CSS code to center it, the navigation bar does not move. It only moves when i remove its tags. This is my original code. The nav bar works as it should. (buttons are green, lined up properly, however all items are left justified.
<!DOCTYPE html>
<html lang="en-us">
<body bgcolor="black">
<head>
<link rel="stylesheet" href="style.css">
<title>Title</title>
</link>
<img src="img.png"></img>
</head>
<body>
<div id="menubar">
<ul
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
</body>
<body>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
<div id="items">
<ul>
<p>Item 1</p>
<p>Item 2</p>
</ul>
</div>
</a>
</body>
</body>
</div>
</html>
Heres the original CSS.
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
float: left;
margin-right: 0.5em;
}
To center the page, i add the following css code:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
{
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
And added these lines at the beginning and end of the page.
If you try out the code, the entire page centers EXCEPT the nav bar. As you can probably tell, I am fairly new to this.
Works for me. The only problem is that your code structure. Your code format should be
body {
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
}
#menubar {
width: 800px;
text-align: center;
border: 0px;
padding: 0px;
margin: 0 auto;
}
#menubar ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#menubar a {
display: block;
width: 8.5em;
color: black;
background-color: #7FFF00;
text-decoration: none;
text-align: center;
}
#menubar a:hover {
background-color: 6666aa;
}
#menubar li {
display: inline-block;
margin-right: 0.5em;
}
<!DOCTYPE html>
<html lang="en-us">
<head>
<link rel="stylesheet" href="style.css" />
<title>Title</title>
</head>
<body bgcolor="black">
<div id="menubar">
<ul>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
</ul>
</div>
<a style="color: #7FFF00">
<pre> </pre>
<p>Some text</p>
</a>
<div id="items">
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
</body>
</html>
Correct css is:
body
{
margin: 0;
padding: 0;
padding-top: 10px;
text-align: center;
width: 800px;
text-align: left;
border: 0px;
padding: 0px;
margin: 0 auto;
}
you had unnecessary buckles in your code.
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>