I tried making a dropdown menu only with css, now the problem is that my dropdown menu is hiding behing my content. I don't know why its not working, I tried using z-index but nothing worked. Here is a jsfiddle example and some code.
Please help me, thank you.
http://jsfiddle.net/42c6q/
HTML
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="images/logo.png" alt="De Pannenkoekenbus Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
</div>
</div>
</div>
CSS
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
background: url("images/kaart_bg.jpg");
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
overflow: hidden;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 50px;
margin-left: 30px;
width: 130px;
text-align: center;
margin-top: 40px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 15pt;
}
#main_menu .logo{
background: none;
width: 224px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 12pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
}
In your #main_menu you have this overflow:hidden remove that:
#main_menu{
margin:0;
padding:0;
height: 130px;
padding: 20px 0;
/*overflow: hidden; Remove this*/
z-index: 2;
}
The demo http://jsfiddle.net/42c6q/2/
Remove overflow: hidden from #main_menu
working demo
#main_menu {
overflow: hidden; /*remove overflow */
}
Related
I am new to HTML and CSS and was trying to make a random website about astronomy. And I can't figure out what my dropdown menu is not working. I googled a lot and saw many youtube videos, but still cannot find a solution. When I change the display in sub-menu in CSS to block, it shows the submenus but in a horizondal line. Should I rewrite the whole code or is it editable? I am new HTML and CSS so excuse my mistakes and lack of knowledge. Thanks.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets</li>
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
It's because you have to place your submenu inside the parent <li>.
Here's a working live Codepen.
*{
margin: 0;
padding: 0;
font-family: Century Gothic;
}
header{
background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../1.jpg);
height: 100vh;
background-size: cover;
background-position: center;
}
ul{
float: right;
list-style-type: none;
margin-top: 20px;
}
ul li{
display: inline-block;
}
ul li.active a{
background-color: #fff;
color: #000;
}
ul li a{
text-decoration: none;
color: #fff;
padding: 5px 20px;
border: 1px solid transparent;
transition: 0.6s ease;
}
ul li a:hover{
background-color: #fff;
color: #000;
}
.main{
max-width: 1200px;
margin: auto;
}
.title{
position: absolute;
top: 1%;
left: 1%;
}
.title h1{
font-size: 40px;
color: white;
}
.sub-menu{
display: none;
position: relative;
}
.rocks:hover .sub-menu{
display: block;
position: absolute;
margin: 10px;
}
<header>
<div class="main">
<ul>
<li class="active">Home</li>
<li class="rocks">Planets
<ul class="sub-menu">
<li>Mercury</li>
<li>Venus</li>
<li>Earth</li>
<li>Mars</li>
<li>Jupiter</li>
<li>Saturn</li>
<li>Uranus</li>
<li>Neptune</li>
</ul>
</li>
<li>Major Moons</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="title">
<h1>ASTRONOMY</h1>
</div>
</header>
Let me know in the comment if you need a help styling the dropdown menu.
I'm new to html and css. I follow a tutorial in youtube. This is all about navigational bar and drop down in html and css.
The name Ria, Kezia, and Gelia should be display when I hover my mouse in Support option.
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
<div id="container">
<ul>
<li>Support</li>
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
Add CSS styles to dropdown button and try this code.
<head>
<style>
*{
margin:0px;
padding:0px;
}
#container ul{
list-style:none; /*This will remove the bullet*/
}
#container ul li{
background-color:#3C4794; /*Adds a back-color.*/
width:150px;
border:1px solid white;
height:50px;
line-height:50px;
text-align:center; /*Show the text in the middle*/
float:left;
color:white; /*Font color*/
font-size:18px;
}
#container ul li:hover {
background-color:#388222; /*Change the color when hovering the mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
top:50px;
}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head>
<body>
<div id="container">
<ul>
<li>
<div class="dropdown">
<ul>
<li>Support</li>
</ul>
<div class="dropdown-content">
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</div>
</div>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</body>
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#container ul li ul {
display: none;
z-index: 100;
position: relative;
}
#container ul li:hover ul {
display: block;
}
<div id="container">
<ul>
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
You can do it this way:
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
position:absolute;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the mouse.*/
}
#sub {
display: none;
}
#container ul li:hover #sub {
display: block;
}
<div id="container">
<ul>
<li>Support
<ol id="sub">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ol>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
</div>
JSFiddle
Old JSFiddle (with JS)
You have to add some css property for dropdown. Here you code has been edited
* {
margin: 0px;
padding: 0px;
}
#container ul {
list-style: none;
/*This will remove the bullet*/
}
#container ul li {
background-color: #3C4794;
/*Adds a back-color.*/
width: 150px;
border: 1px solid white;
height: 50px;
line-height: 50px;
text-align: center;
/*Show the text in the middle*/
float: left;
color: white;
/*Font color*/
font-size: 18px;
}
#container ul li:hover {
background-color: #388222;
/*Change the color when hovering the
mouse.*/
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
<div id="container">
<ul>
<li class="dropdown">Support
<ul class="dropdown-content">
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
<li>CCD</li>
<li>Scanning</li>
<li>Claims</li>
</ul>
here i added some css code in your style and added some clss in your html elements
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
padding: 12px 16px;
z-index: 1;
}
.dropdown:hover .dropdown-content {
display: block;
}
You need to place your submenu in li element and hide it by CSS, then you can write styles for pseudo-class if you want that submenu to appear on hover
So, first that you need, move inner ul element in li, like that:
<li>Support
<ul>
<li>Ria</li>
<li>Kezia</li>
<li>Gelia</li>
</ul>
</li>
Further you need set right styles.
li need to have position: relative, this is let inner ul element take the right position
Inner ul should be hidden by default state and be appearing on hover on parent element;
This styles should help:
ul > li {
position: relative;
}
li > ul {
display: none;
bottom: 0;
left: 0;
}
li:hover > ul {
display: block
}
I am trying to make my DIV(MainPageImage) fill the entirety of the screen, between the header and the footer.
My HTML:
body {
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Aerial;
font-size: 18px;
}
#nav {
background-color: #222;
Height: 50px;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
text-align: center;
}
#nav ul li {
display: inline-block;
}
#nav ul li:hover {
background-color: #333;
}
#nav ul li a,
visited {
color: #F00;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul a:hover {
color: #C03;
text-decoration: none;
}
#nav ul li:hover ul {
display: block;
}
#nav ul ul {
display: none;
position: absolute;
background: #333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display: block;
}
#nav ul ul li a,
visited {
color: #F00;
}
#nav ul ul li a:hover {
color: #099;
}
footer {
position: fixed;
bottom: 0;
background-color: #333;
border: 5px solid grey;
color: #F00;
font-size: 24px;
text-align: center;
width: 100%;
Height: 40px;
padding-top: 15px;
}
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home
</li>
<li>About us
</li>
<li>Games
</li>
<li>Social
<ul>
<li>Youtube
</li>
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact me
<ul>
<li>Email
</li>
<li>Form
</li>
</ul>
</li>
<li>Bugs
</li>
</li>
</ul>
</div>
</div>
<div id="MainPageImage">
<img src="http://i.imgur.com/MHHu946.jpg" style="width:100%; height:auto;" >
</div>
<footer>
<p>Copyright #DcoltGaming 2016</p>
</footer>
</body>
</html>
I have tried to set the height to auto, and the other solutions that I have found don't seem to work.
I hope that someone can solve this.
Thanks
DcoltGaming
remove the image from html and add it in the css under body and add background-size: cover; like this
background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
here is a snippet
#charset "utf-8";
/* CSS Document */
body{
padding: 0;
margin: 0;
overflow-y: scroll;
font-family: Aerial;
font-size : 18px;
background: url("http://i.imgur.com/MHHu946.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#nav{
background-color: #222;
Height:50px;
}
#nav_wrapper{
width: 960px;
margin: 0 auto;
text-align: left;
}
#nav ul{
list-style-type: none;
padding:0;
margin: 0;
position:relative;
text-align:center;
}
#nav ul li{
display: inline-block;
}
#nav ul li:hover{
background-color: #333;
}
#nav ul li a,visited{
color: #F00;
display:block;
padding: 15px;
text-decoration:none;
}
# nav ul a:hover{
color: #C03;
text-decoration: none;
}
#nav ul li:hover ul{
display:block;
}
#nav ul ul{
display: none;
position: absolute;
background:#333;
border: 5px solid #222;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li{
display: block;
}
#nav ul ul li a,visited{
color: #F00;
}
#nav ul ul li a:hover{
color:#099;
}
footer{
position:fixed; bottom:0;
background-color:#333;
border:5px solid grey;
color:#F00;
font-size:24px;
text-align:center;
width:100%;
Height:40px;
padding-top: 15px;
}
<body>
<div id="nav">
<div id="nav_wrapper">
<ul>
<li>Home
</li>
<li>About us
</li>
<li>Games
</li>
<li>Social
<ul>
<li>Youtube
</li>
<li>Facebook
</li>
<li>Twitter
</li>
</ul>
<li>Contact me
<ul>
<li>Email
</li>
<li>Form
</li>
</ul>
</li>
<li>Bugs
</li>
</li>
</ul>
</div>
</div>
<div id="MainPageImage">
</div>
</body>
<footer>
<p>Copyright #DcoltGaming 2016</p>
</footer>
I would like to center the two containers horizontally on the site.
So that the menu with the logo on the right side and the contentblock should be centered.
I tried a lot of things, but nothing works.
Until now i worked with frames, but now i would like to use containers.
Can you please help me?
Thanks a lot!
Best regards, Ronny
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Containertest</title>
<style type="text/css">
body { margin:0; background-color: #333333;}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
/* background: url("ronny_logo.jpg"); */
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
}
/* MENU */
#main_menu{
margin:0px;
padding:0;
height: 150px;
/* width: 100%; /* Breite vom Hauptmenü Container */
padding: 0px 0;
/*overflow: hidden; Remove this*/
position: fixed;
background-color: black;
z-index: 2;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
/* COLORS */
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
/* CONTENT */
#content{
padding: 20px 0;
overflow: hidden;
margin: 0;
padding: 20px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="patterned">
<div class="container">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
</div>
</div>
<div class="container">
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</div>
</body>
</html>
Easiest way is to give your container a width and set the margin to 0 (top bottom) auto (left right) along with position: relative so the browser can work out where to position it based on the parent container in this instance your .wrapper class.
.patterned .container{width: 960px; margin: 0 auto; position: relative;}
.container{width: 960px; margin: 0 auto; position: relative;}
By putting the parent class in front of the child class you can selectively target a specific container so if you have two containers with the same class they can be targeted and styled differently.
Another solution using the flex property:
<style>
body {
width: 100%;
margin: 0;
padding: 0;
background-color: #333333;
}
.wrapper{
min-height: 100%;
height: auto !important;
height: 100%;
position: relative;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
z-index: 0;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu{
margin:0;
padding:0;
height: 150px;
padding: 0px 0;
position: fixed;
background-color: black;
z-index: 2;
width: 965px;
display: flex;
align-items: center;
justify-content: center;
}
#main_menu li{
list-style: none;
float: left;
line-height: 30px;
margin-left: 10px;
width: 130px;
text-align: center;
margin-top: 120px;
position: relative;
}
#main_menu li a, #footer_menu li a {
color: #FFFFFF;
text-shadow: 0px 1px 1px #000;
display: block;
font-family: 'PT Sans', sans-serif;
text-decoration: none;
font-size: 12pt;
}
#main_menu .logo{
background: none;
width: 445px;
margin: 0;
}
#main_menu li a:hover, #footer_menu li a:hover{
text-decoration: underline;
}
#main_menu li .submenu{
display: none;
margin: 0;
padding: 0;
z-index: 10;
position: absolute;
left: 0;
top:100%;
}
#main_menu li .submenu:hover{
display: block;
}
#main_menu li a:hover + .submenu{
display: block;
}
#main_menu li .submenu li{
margin: 0;
padding: 0;
}
#main_menu li .submenu li a{
font-size: 9pt;
}
.red, .red .submenu{ background-color: #ed3327; }
.blue, .blue .submenu{ background-color: #9dbdd5; }
.green, .green .submenu{ background-color: #6fb145; }
.orange, .orange .submenu{ background-color: #f5832e; }
.yellow, .yellow .submenu{ background-color: #f6ec35; }
#content{
overflow: hidden;
margin-top: 150px;
font-size: 9pt;
color: #FFFFFF;
background-color: #555555;
width: 965px;
}
</style>
<body>
<div class="wrapper">
<ul id="main_menu">
<li class="logo">
<a href="#">
<img src="ronny_logo.jpg" alt="Logo"/>
</a>
</li>
<li class="red">
Home
</li>
<li class="green">
Evenementen
<ul class="submenu">
<li>
Item
</li>
<li>
Item
</li>
<li>
Item
</li>
</ul>
</li>
<li class="blue">
Bus
</li>
<li class="orange">
Contact
</li>
</ul>
<div id="content">
<p>fadsfdsfdas</p>
<p>dfsadfaf</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p>d</p>
<p> </p>
<p>gg</p>
<p> </p>
<p>g</p>
</div>
</div>
</body>
There is absolutely no need for more divs.
Cheers!
my code of menu work fine, but only text is a href, how ever i try to make it a bit more user friendly so make even background in to work as href but its not working, can somebody help me to fix it?
My HTML:
<div id="menu">
<ul>
<li>GAMESITES<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>HRY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>SERVERY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>CLANKY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FORUM<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>DOWNLOADS<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>BLOGY<span class="arrow"></span></li>
<li class="spacer"> </li>
<li>FLASHOVKY<span class="arrow"></span></li>
</ul>
</div>
My CSS:
#menu{
background-image: url("images/menubg.png");
background-repeat: repeat-x;
height: 44px;
width: 983px;
margin: 0 22px;
}
.spacer{
background-image: url("images/menu_spacer.png");
background-repeat: no-repeat;
width: 1px;
height: 25px;
margin: 0px 12px;
}
#menu ul{
list-style-position: inside; /* Bodka v novom riadku vo vnutry */
list-style-type: none; /* bez bodky */
}
#menu ul li{
padding: 0px 5px 0px 0px;
display: inline-block;
color: #f7f7f7;
}
.arrow{
background-image: url("images/sipka.png");
background-repeat: no-repeat;
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Live preview: http://funedit.com/andurit/try4/
Your markup can be heavily simplified into this:
<div id="menu">
<ul>
<li>GAMESITES</li>
<li>HRY</li>
<li>SERVERY</li>
<li>CLANKY</li>
<li>FORUM</li>
<li>DOWNLOADS</li>
<li>BLOGY</li>
<li>FLASHOVKY</li>
</ul>
</div>
Flexbox solution
If you're willing to explore modern CSS specifications, you can always use flexbox instead of relying on inline-block to position your elements — check out the demo fiddle here: http://jsfiddle.net/teddyrised/9FZS8/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#menu ul li {
color: #f7f7f7;
flex: 1 1 auto;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
display: block;
padding: 14px 0;
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Non-Flexbox solution
Otherwise, you can always fallback to floating your individual <a> elements, but that requires you to calculate the padding for each of them carefully so the menu does not overflow: http://jsfiddle.net/teddyrised/9FZS8/2/
#menu {
background-image: url(http://funedit.com/andurit/try4/images/menubg.png);
background-repeat: repeat-x;
height: 44px;
width: 983px;
font-family: Arial;
}
#menu ul{
list-style: none;
margin: 0;
padding: 0;
overflow: hidden;
}
#menu ul li {
color: #f7f7f7;
}
#menu ul li a {
background-image: url(http://funedit.com/andurit/try4/images/menu_spacer.png);
background-repeat: no-repeat;
background-position: top right;
color: #f7f7f7;
float: left;
padding: 14px 15px; /* Disadvantage: you will have to adjust this padding MANUALLY */
text-decoration: none;
text-align: center;
}
#menu ul li:last-child a {
background: none;
}
#menu ul li a:after {
background-image: url(http://funedit.com/andurit/try4/images/sipka.png);
content: '';
width: 10px;
height: 8px;
margin-left: 8px;
display: inline-block;
}
Add to your links a padding of x and a margin of -x, for example:
#menu a {
padding: 20px;
margin: -20px;
}
Make link to take full space:
li > a{
display:inline-block;
width: 100%;
height: 100%;
}