Related
My website midwestwindowbroker.com is having an issue on my mobile phone (iPhone 6) where it is defaulting to a smaller screen size. When I test it on desktop with a small screen size, it adjusts perfectly, however, on the actual mobile device it is minimizing more than it should. I have been adjusting the media queries it for some time trying to find the piece that adjusts the issue but haven't found it.
I am pretty sure that the responsive menu (which I did not build) is throwing it off but as I read through the CSS I can't see where it would be.
Menu CSS:
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {margin: 0;
padding: 0;
position: relative;
z-index:50;}
#cssmenu:after,
#cssmenu ul:after {content: '';
display: block;
clear: both;}
#cssmenu a {color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;}
#cssmenu ul {list-style: none;}
#cssmenu > ul > li {float: left;}
#cssmenu > ul > li.active > a {
background: #d9d9d9 url(images/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(images/grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 35px;
filter: none;}
#cssmenu > ul > li a:hover {
background: #ffffff url(images/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;}
#cssmenu .has-sub:hover ul {display: block;}
#cssmenu .has-sub ul {display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
*width: 100%;}
#cssmenu .has-sub ul li {text-align: center;}
#cssmenu .has-sub ul li a {border-top: 0 none;
border-left: 1px solid #d2d2d2;
display: block;
font-size: 12px;
line-height: 120%;
padding: 9px 5px;
text-align: center;}
Page CSS:
.content ul, .content ol {padding: 0 15px 15px 40px; }
ul.nav {list-style: none;
margin-bottom: 15px;}
ul.nav li { }
ul.nav a, ul.nav a:visited {
padding: 5px 5px 5px 15px;
display: block;
width: 160px;
text-decoration: none;}
ul.nav a:hover, ul.nav a:active, ul.nav a:focus {background: #ccc;
color: #CCC;}
.image {margin: 0px 10px 0px 0px;}
/* ~~ miscellaneous float/clear classes ~~ */
.ia-container {width: 730px;
margin: 0 0 0px -20px;
overflow: hidden;}
.ia-container figure {position: absolute;
top: 0;
left: 50px;
width: 380px;
box-shadow: 0 0 0 1px rgba(255,255,255,0.6);
transition: all 0.3s ease-in-out;}
.ia-container > figure {position: relative;
left: 0 !important;}
.ia-container img {display: block;
width: 100%;}
.ia-container input {position: absolute;
top: 0;
left: 0;
width: 50px;
height: 100%;
cursor: pointer;
border: 0;
padding: 0;
opacity: 0;
z-index: 100;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;}
.ia-container input:checked{width: 5px;
left: auto;
right: 0px;}
.ia-container input:checked ~ figure {left: 330px;
transition: all 0.7s ease-in-out;}
.ia-container figcaption {width: 100%;
height: 100%;
background: none;
position: absolute;
top: 0px;
transition: all 0.2s linear;}
.ia-container figcaption span {position: absolute;
top: 30%;
margin-top: -30px;
right: 20px;
left: 20px;
overflow: hidden;
text-align: center;
line-height: 20px;
font-size: 18px;
opacity: 0;
text-transform: uppercase;
letter-spacing: 4px;
font-weight: 700;
padding: 20px;
color: #fff;
text-shadow: 1px 1px 1px rgba(0,0,0,0.1);}
.ia-container input:checked + figcaption,
.ia-container input:checked:hover + figcaption{background: rgba(87, 73, 81, 0);}
.ia-container input:checked + figcaption span {transition: all 0.4s ease-in-out 0.5s;
opacity: 1;
top: 50%;}
ia-container #ia-selector-last:checked + figcaption span {transition-delay: 0.3s;}
.ia-container input:hover + figcaption {background: rgba(87, 73, 81, 0.03);}
.ia-container input:checked ~ figure input{z-index: 1;}
#media screen and (max-width: 720px) {
.ia-container {width: 540px;}
.ia-container figure {left: 40px;
width: 260px;}
.ia-container input {width: 40px;}
.ia-container input:checked ~ figure {left: 260px;}
.ia-container figcaption span {font-size: 16px;}}
#media screen and (max-width: 374px) {
.ia-container {width: 320px;}
.ia-container figure {left: 20px;
width: 180px;}
.ia-container input {width: 20px;}
.ia-container input:checked ~ figure {left: 180px;}
.ia-container figcaption span {font-size: 12px;
letter-spacing: 2px;
padding: 10px;
margin-top: -20px;}
.mybgcarousel {display:none;}}
You logo image is having width:506; in mobile view change it to width:100%; it will work.
a img {
width: 100%; // added this
border: none;
}
I found a fix on the iOS Developer Library. In my html under,
<meta name="viewport" content="initial-scale=1.0">
I needed to add:
<meta name="viewport" content="width=590">
I managed to create a menu with drop-down-menu (sub menu) using CSS. But I can't able to add smooth drop down-menu effect to my coding. I tried to add -moz-transition and more. I didn't know where to add those transition to make my normal drop-down-menu as smooth drop down-menu effect.
Below is my HTML coding
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='#'><span>Products</span></a>
<ul>
<li class='has-sub'><a href='#'><span>Product 1</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Product 2</span></a>
<ul>
<li><a href='#'><span>Sub Item</span></a></li>
<li class='last'><a href='#'><span>Sub Item</span></a></li>
</ul>
</li>
</ul>
</li>
<li><a href='#'><span>About</span></a></li>
<li class='last'><a href='#'><span>Contact</span></a></li>
</ul>
</div>
Here is the css
<style media="screen" type="text/css">
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
border-bottom: 2px solid #db000b;
width: auto;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: linear-gradient(top, #fefefe 0%, #ececec 100%);
color: #000;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul {
float: left;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li > a {
color: #000;
font-size: 12px;
}
#cssmenu > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
}
#cssmenu > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #db000b;
margin-left: -10px;
}
#cssmenu > ul > li.active > a {
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
}
#cssmenu > ul > li:hover > a {
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
}
#cssmenu .has-sub {
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
}
#cssmenu .has-sub ul li a {
background: #db000b;
border-bottom: 1px dotted #ff0f1b;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
}
#cssmenu .has-sub ul li:hover a {
background: #a80008;
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#cssmenu .has-sub .has-sub ul li a {
background: #a80008;
border-bottom: 1px dotted #ff0f1b;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #8f0007;
}
</style>
When you wrote 'smooth CSS menu' you meant without javascript and only CSS ?
If so, use css level 3 transition.
#cssmenu ul ul {
/* this will apply to inner UL, adapt to your desired selector */
-webkit-transition: height 0.3s ease-in-out;
-o-transition: height 0.3s ease-in-out;
-moz-transition: height 0.3s ease-in-out;
transition: height 0.3s ease-in-out;
}
[EDIT]
If it is not working for your context, perhaps it is because there is no 'height to your inner UL element.
#cssmenu .has-sub:hover > ul {
display: block;
height:auto; /* add this */
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
height:0; /* add this */
top: 100%;
left: 0;
}
For more about the topic for a cross-browser solution, search the net for css transition generator
I'd recommend using something a little more extensive, such as jQuery, to give your desired effect. Here's a link to the 'accordion' effect that sounds like something you're going for. The layout of the accordion menu is completely adjustable - so don't worry if you don't like the design of the default layout.
http://jqueryui.com/accordion/#default
Adding jQuery to your webpage takes about 30 seconds, but gives you an eternity of useful additions, animations, and interactive content manipulation for your page!
u can use jquery for easing effects for your dropdwon menu here is one example
http://devsnippets.com/article/slick-drop-down-menu-with-easing-effect-using-jquery-css.html
I use this
http://cssdeck.com/labs/pure-css3-smooth-drop-down-menu
This menu is created only in CSS3 which is inspired from this post on Forrst! This consists of a nested ul structure to create the second level of the menu which is initially hidden with it's opacity set to 0. When the link is hovered, the respective ul shows up and slides down. This is achieved by setting its opacity to 1 and changing it's top offset when it's hovered in conjuction with the CSS3 transitions to animate the process smoothly.
Check out the code and play with it as much as you like :)
I have an issue with my CSS. The menu works fine but when you adjust the window from full screen to any other size, the menu cuts off at the right end and starts again on the left below the menu. I had a similar issue with a different page and I was able to fix it with position:absolute but this doesn't seem to resolve this. I'm not a beginner but I'm not a pro. If someone could help me figure out how to make the window scroll left to right instead of moving the menu options down, that would be great.
I have a div tag that my css menu goes in:
<div id='cssmenu' align='justify' style="z-index: 1;">
Then I have multiple menu's that go across the top of the page
<ul><br>
<li class='has-sub'> ~a href='index.html'>Home ~/a> ~/li>
<li class='has-sub'> ~a href='index.html'>General Info~/a> ~/li>
<li class='has-sub'> ~a href='index.html'>Downloads~/a> ~/li>
<li class='has-sub'> ~a href='index.html'> ~/a> ~/li>
<li class='has-sub'> ~a href='index.html'>Home ~/a> ~/li>
<li class='has-sub'> ~a href='index.html'>Home ~/a> ~/li>
<ul>
</code>
Here is my CSS.
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: auto;
padding: 0;
position: relative;
top: o;
z-index: 1;
}
#cssmenu {
height: 49px;
border-radius: 5px 5px 0 0;
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #eee9f0));
background: -webkit-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -o-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #eee9f0 100%);
background: linear-gradient(top, #fefefe 0%, #eee9f0 100%);
border-bottom: 2px solid #a30813;
width: auto;
z-index: 1;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
z-index: 1;
}
#cssmenu a {
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #ececec));
background: -webkit-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -o-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: -ms-linear-gradient(top, #fefefe 0%, #ececec 100%);
background: linear-gradient(top, #fefefe 0%, #ececec 100%);
color: #000;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
z-index: 1;
}
#cssmenu ul {
list-style: none;
z-index: 1;
}
#cssmenu > ul {
float: left;
z-index: 1;
}
#cssmenu > ul > li {
float: left;
padding-left: 45px; /* This value moves the menu to the left*/
z-index: 1;
position: relative;
}
#cssmenu > ul > li > a {
color: #000;
font-size: 12px;
z-index: 1;
position: relative;
display:block;
}
#cssmenu > ul > li:hover:after {
content: '';
display: relative;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
z-index: 0 !important;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #a30813;
margin-left: -10px;
float:left;
margin-top:0px !important;
z-index: 1;
}
#cssmenu > ul > li:first-child > a {
border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
float:left;
margin-top:0px !important;
z-index: 1;
}
#cssmenu > ul > li.active:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
z-index: 1;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #a30813;
margin-left: -10px;
float:left;
margin-top:0px !important;
z-index: 1;
}
#cssmenu > ul > li.active > a {
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
z-index: 1;
margin-top:0px !important;
z-index: 1;
}
#cssmenu > ul > li:hover > a {
background: #ececec;
background: -moz-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ececec), color-stop(100%, #ffeeff ef));
background: -webkit-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -o-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: -ms-linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
background: linear-gradient(top, #ececec 0%, #ffeeff ef 100%);
-moz-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
-webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.1);
z-index: 1;
margin-top:0px !important;
z-index: 1 !important;
}
#cssmenu .has-sub {
z-index: 1;
padding-left: 50px;
z-index: 1;
}
#cssmenu .has-sub:hover > ul {
display: block;
z-index: 1;
padding-left: 50px;/* this value is used to align the menu*/
z-index: 1;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
z-index: 1;
}
#cssmenu .has-sub ul li {
*margin-bottom: -1px;
z-index: 1;
padding-left: 0px;
z-index: 1;
}
#cssmenu .has-sub ul li a {
background: #a30813;
border-bottom: 1px dotted #d40a19;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
color: #ffffff;
top:0;
z-index: 1;
}
#cssmenu .has-sub ul li:hover a {
background: #72060d;
margin-top:0px !important;
z-index: 1 !important;
padding-left:55px; /*this value moves the text to the left when highlighted*/
}
#cssmenu .has-sub .has-sub:hover > ul {
display: block;
margin-top:0px !important;
z-index: 1 !important;
padding-left:0; /* this keeps the sub-menu close to the drop down menu*/
}
#cssmenu .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top:0;
z-index: 1;
}
#cssmenu .has-sub .has-sub ul li a {
background: #72060d;
border-bottom: 1px dotted #d40a19;
padding-left:5px; /* this aligns the txt to the left for the sub-menu */
z-index: 1;
}
#cssmenu .has-sub .has-sub ul li a:hover {
background: #5a040b;
margin-top:0px !important;
z-index: 1 !important;
padding-left:50px; /* this moves the text on the sub-menu when hovered over*/
}
Basically, the <li> element is floating left-to-right. It breaks off and starts on a new row when the width of the combined list-elements exceeds that of the <ul>.
What you can do is give the <div> a width:100% and overflow:hidden, so that you cannot see anything drop and start a new row.
Then you can give the <ul> a width:1000px, so that the <li> would be able to fit across the screen and be cut-off, but still somewhat visible. Here is what it would look like.
The problem after that is that you would need to resize the <li> items, either by font or padding; best to resize with media queries if working with multiple layouts. If you want them to resize dynamically, you can write a javascript function to handle the sizing/spacing.
I am trying to get a div to have it's own background image, but every time I add the image it makes the div transparent so the main back ground shows through. I've scoured this site and others but to no avail.
<!DOCTYPE HTML>
<HTML>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer." />
<meta name="fb_admins_meta_tag" content="USER_ID"/>
<meta property="og:title" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="og:type" content="website"/>
<meta property="og:url" content="http://www.wegotgamez.com/"/>
<meta property="og:site_name" content="WeGotGamez| Mobile Video Game Party"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description" content="Mobile video game parties offering the ultimate gaming experience. All inside a top of the line mobile gaming trailer."/>
<META NAME="robot" CONTENT="index,follow">
<META NAME="refresh" CONTENT="120">
<head>
<title> Mobile Video Game Party| WeGotGamez| Mobile Gaming, Sacramento </title>
<head>
<link rel="stylesheet" type="text/css" href="homepage3.css">
<style>
body
{
background-image:url('drkdp.jpg');
}
</style>
</head>
<body>
<div id="container" style="width:1060px;">
<div style="clear: both;"></div>
<img src="c:\users\wgg1\desktop\websitemaint\gallery\hdrimg.png" style="float: right; width: 500px; height: 150px; margin-right: -100px; margin-left: 15px;"/><img src="C:\Users\WGG1\Desktop\WebsiteMaint\logo.png" style="float: left;margin-top: 0px; margin-left: 0px; width: 400px; height: 135px;"/><h3 style="float:right;">3201 Evergreen Ave Ste 360</br>West Sacramento, CA, 95691</br>(916)945-0837</br><a href=https://www.facebook.com/WEGOTGAMEZ><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\fb16x16.png"/></a><a href=https://twitter.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\twt16x16.png"/></a><a href=http://instagram.com/wegotgamez><img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\Icons\igrm16x16.png"/></a>
</div>
</br>
</div>
<div id='cssmenu' style="margin-left: 0px; margin-top: 150px; margin-bottom: 25px;">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
<ul>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
<li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Party Packages</span></a>
<ul>
<li class='last'><a href='#'><span>Schedule An Event</span></a></li>
</ul>
</li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
<li><a href='#'><span>About US</span></a></li>
<li><a href='#'><span>Game Library</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
<li><a href='#'><span>FAQ</span></a></li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
</div>
<div class="photobanner">
<img class="first" src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\008.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\019.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\026.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\033.jpg" alt="">
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\041.jpg" alt="">
</div>
<div id="col1"><h4 style="text-align:left; margin-left:5px">Let<b> We Got Gamez</b> and our friendly game coaches bring the ultimate in gaming experiences to your next event.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> Whether it be a birthday party, block party, wedding, or even an office team building event, we've got you covered.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> With our unique trailer set up and our extensive game libraries, your event will be the one everyone will be talking about for weeks to come!</h4>
<h4 style="text-align:left; margin-left:5px"><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font>
</h4>
<h4 style="text-align:left; margin-left:5px">Check out the competition and you will see that we offer the most advanced and savvy mobile gaming platforms anywhere.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> Our gaming trailer comes equipped with 8 individual gaming stations each boasting an XBOX 360, PS3, gaming chair, stereo headset, and 24" t.v screens.<br><br><font face="wingdings"> « </font><font face="wingdings"> « </font><font face="wingdings"> « </font><br><br> We conform to the most popular gaming tournament standards and regulations, giving you a professional feel for house tournaments.</h4>
</div>
<div id="col2"><h4 style="text-align:center;margin-right:15px;margin-left:15px;margin-top:15px">Our Mobile Gaming Trailer brings the party right to your house !</h4>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\042.jpg" style="align:center;width:450px;height:250px;margin-top:5px;">
</hr>
<h4 style="text-align:center;margin-left:15px;margin-right:15px;">No crowding around a single bench to play. Get a truly immersive experience with our unique gaming stations.</h4>
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\052.jpg" style="align:center;width:450px;height:250px;margin-bottom:15px">
<h4 style="text-align:center;margin-left:15px;margin-right:15px;">Our portable game cubes fit anywhere , inside or outside your business or home !</h4>
</div>
<div id="col3"><h4 style="text-align:center;">Affiliations:</h4>
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\astro.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\avngr.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\skulc.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
<img src="C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\sponsorimg\sqdgrp.png" style="align:center;width:150px;height:100px;margin-bottom:15px">
<br>
</div>
<br>
<br>
<div id='cssmenu1' style="margin-left: -25px; margin-right: 35px; margin-top: 15px; margin-bottom: -25px; display:inline-block; position:relative">
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li class='has-sub'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\equipment.html'><span>Equipment</span></a>
<ul>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingtrailer.html'><span>Mobile Gaming Trailer</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\mobilegamingcube.html'><span>Portable Gaming Stations</span></a></li>
<li class='last'><a href='C:\Users\WGG1\Desktop\WebsiteMaint\retroarcade.html'><span>Retro Arcade's</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='#'><span>Party Packages</span></a>
<ul>
<li class='last'><a href='#'><span>Schedule An Event</span></a></li>
</ul>
</li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\tournaments.html'><span>Tournaments</span></a></li>
<li><a href='#'><span>About US</span></a></li>
<li><a href='#' target='_blank'><span>Game Library</span></a></li>
<li><a href='C:\Users\WGG1\Desktop\WebsiteMaint\gallery.html'><span>Gallery</span></a></li>
<li><a href='#'><span>FAQ</span></a></li>
<li class='last'><a href='#'><span>Contact Us</span></a></li>
</ul>
<p style="color:blue; margin-top:-5px">© 2013 by We Got Gamez, Custom Upfits, and Electrical Service Specialties</p>
</div>
</body>
</html>
html {
text-align: center;
}
body{
margin-right: 40px ;
margin-left: 70px;
width: 1200px;
margin-bottom: 10px;
margin-top: 5px;
overflow-x: hidden;
overflow-y: hidden;
height: 100%;
}
#wrapper {
width: 1000px;
margin-right: 40px;
margin-left: 70 px;
height: 100%;
}
h1 {
color:#FBF2EF;
font-family: 'times new roman';
}
h2{
color:#fbf2ef;
}
h3
{
color:#fbf2ef;
font-family: 'times new roman'
}
hr {
color: #f00;
background-color: #f00;
height: 1px;
}
p {
font-color:'white';
}
button {
height: 100px;
width: 200px;
padding:5px;
background-color: #dcdcdc;
border: 1px solid #666;
color:#000;
text-decoration:none;
}
strong{
font-weight:bold;
}
#col1
{
float: left;
width: 20%;
margin-bottom: 10px;
background-image:url('C:\Users\WGG1\Desktop\WebsiteMaint\Gallery\dpimg3.jpg');
background-repeat: no-repeat;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col2
{
float: left;
width: 48%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col3
{
float: left;
width: 20%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#col4{
position:center;
width: 48%;
margin-left: 3%;
background-color: grey;
margin-bottom: 10px;
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
div .body{
border:double 7px #000000;
-moz-border-radius: 0px;
-webkit-border-radius: 0px;
border-radius: 0px;
}
#footer {
margin-top: 150px; /* negative value of footer height */
height: 5px;
margin-bottom: 5px;
min-width: 1200px;
}
#cssmenu ul,
#cssmenu li,
#cssmenu span,
#cssmenu a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu:after,
#cssmenu ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu a {
color: #ffffff;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu ul {
list-style: none;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu > ul > li.active a {
background: #646464 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu > ul > li a:hover {
background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu .has-sub:hover ul {
display: block;
}
#cssmenu .has-sub ul {
display: none;
position: absolute;
top: 36px;
left: -1px;
min-width: 100%;
text-align: center;
/* IE7 */
*width: 100%;
}
#cssmenu .has-sub ul li {
text-align: center;
}
#cssmenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
.photobanner {
height: 65px;
width: 960px;
margin-bottom: 80px;
margin-right:100px;
margin-top: 5px;
margin-left: 105px;
}
.photobanner img {
height: 85px;
width: 150px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.photobanner img:hover {
-webkit-transform: scale(2.0);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;
-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}
div.container {
border: 1px solid #000000;
overflow: auto;
width: 100%
}
#cssmenu1{
height: 50px;
margin-bottom: -100px;
}
#cssmenu1 ul,
#cssmenu1 li,
#cssmenu1 span,
#cssmenu1 a {
margin: 0;
padding: 0;
position: relative;
}
#cssmenu1:after,
#cssmenu1 ul:after {
content: '';
display: block;
clear: both;
}
#cssmenu1 a {
color: #ffffff;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #333333;
}
#cssmenu1 ul {
list-style: none;
}
#cssmenu1 > ul > li {
float: left;
}
#cssmenu1 > ul > li.active a {
background: #646464 url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-moz-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
-webkit-box-shadow: inset 0 0 10px #222222, inset 0 10px 10px #222222;
filter: none;
}
#cssmenu1 > ul > li.active a:hover {
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(100%, #4a4a4a));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#646464', endColorstr='#4a4a4a', GradientType=0);
filter: none;
}
#cssmenu1 > ul > li a {
box-shadow: inset 0 0 0 1px #8a8a8a;
-moz-box-shadow: inset 0 0 0 1px #8a8a8a;
-webkit-box-shadow: inset 0 0 0 1px #8a8a8a;
background: #4a4a4a url(grad_dark.png) repeat-x left top;
background: -moz-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8a8a8a), color-stop(50%, #707070), color-stop(51%, #626262), color-stop(100%, #787878));
background: -webkit-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -o-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: -ms-linear-gradient(top, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
background: linear-gradient(to bottom, #8a8a8a 0%, #707070 50%, #626262 51%, #787878 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
border-bottom: 1px solid #5d5d5d;
border-top: 1px solid #5d5d5d;
border-right: 1px solid #5d5d5d;
line-height: 34px;
padding: 0 35px;
filter: none;
}
#cssmenu1 > ul > li a:hover {
background: #8a8a8a url(grad_dark.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #646464), color-stop(50%, #4a4a4a), color-stop(51%, #3b3b3b), color-stop(100%, #525252));
background: -webkit-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -o-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: -ms-linear-gradient(top, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
background: linear-gradient(to bottom, #646464 0%, #4a4a4a 50%, #3b3b3b 51%, #525252 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#8a8a8a', endColorstr='#787878', GradientType=0);
filter: none;
}
#cssmenu1 > ul > li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #5d5d5d;
}
#cssmenu1 > ul > li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#cssmenu1 .has-sub:hover ul {
display: block;
}
#cssmenu1 .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
bottom: 100%;
/* IE7 */
*width: 100%;
}
#cssmenu1.has-sub ul li {
text-align: center;
}
#cssmenu1 .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #5d5d5d;
display: block;
line-height: 120%;
padding: 9px 5px;
text-align: center;
}
If you use image with transparency it could happen.
Maybe some CSS like:
div.your_div_class{
background: url('some_image.png') #fff;
}
would help.
Use color like #fff(white) in background to not make it transparent.
You could use background-color: #fff; separately too.
To expand on Michael's answer...
Assuming that you have a transparent image that is allowing the previous background to leak through, you'll need to define a background color on the new div.
But keep in mind that if you use the compound attribute that it will override all the background attributes defined before it.
So in this case, all you'll see is white:
div.your_div_class {
background-image: url('your_image.png');
background: #FFF;
}
But if you use the specific image and the color background attributes they're additive. So in this case you'll get the image with a white background:
div.your_div_class {
background-image: url('your_image.png');
background-color: #FFF;
}
So if you want to see my menu go here.
Since I know you'll want my source, here's the HTML:
<div id='menu-container'>
<ul id='menu' class="menu">
<li class='active'><a href='/'><span>Home</span></a></li>
<li class='has-sub'><a href='/games/'><span>Games</span></a>
<ul>
<li><a href='/games/dota-2/'><span>Dota 2</span></a></li>
<li><a href='/games/cs-go/'><span>CS: GO</span></a></li>
<li><a href='/games/css/'><span>CS: Source</span></a></li>
<li><a href='/games/terraria/'><span>Terraria</span></a></li>
<li class='last'><a href='/games/minecraft/'><span>Minecraft</span></a></li>
</ul>
</li>
<li class='has-sub'><a href='/about.html'><span>About Us</span></a>
<ul>
<li><a href='http://www.youtube.com/user/'><span>Our YouTube Channel</span></a></li>
<li><a href='/faq-list.html'><span>Our FAQs/Q&A List</span></a></li>
<li><a href='/feed-news.rss'><span>Our RSS Feed</span></a></li>
<li><a href='/wiki/'><span>Our Wiki</span></a></li>
<li><a href='/wiki/'><span>Our Blog</span></a></li>
<li class='last'><a href='/privacy.html'><span>Privacy Policy</span></a></li>
</ul>
</li>
<li class='has-sub last'><a href='/contact.html'><span>Contact Us</span></a>
<ul>
<li class='last'><a href='/forums/'><span>Forums</span></a></li>
</ul>
</li>
</ul>
And here's my CSS:
* {
margin: 0px;
}
#menu-container ul,
#menu-container li,
#menu-container span,
#menu-container a {
margin: 0;
padding: 0;
position: relative;
}
#menu-container {
height: 49px;
border-radius: 0px 0px 0 0;
-moz-border-radius: 0px 0px 0 0;
-webkit-border-radius: 0px 0px 0 0;
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
border-bottom: 2px solid #0fa1e0;
}
#menu-container:after,
#menu-container ul:after {
content: '';
display: block;
clear: both;
}
#menu-container a {
background: #141414;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALElEQVQImWMwMrJi+v//PxMDw3+m//8ZoPR/qBgDEhuXGLoeYswhXg8R5gAAdVpfoJ3dB5oAAAAASUVORK5CYII=) 100% 100%;
background: -moz-linear-gradient(top, #32323a 0%, #141414 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #32323a), color-stop(100%, #141414));
background: -webkit-linear-gradient(top, #32323a 0%, #141414 100%);
background: -o-linear-gradient(top, #32323a 0%, #141414 100%);
background: -ms-linear-gradient(top, #32323a 0%, #141414 100%);
background: linear-gradient(to bottom, #32323a 0%, #141414 100%);
color: #ffffff;
display: inline-block;
font-family: Helvetica, Arial, Verdana, sans-serif;
font-size: 12px;
line-height: 49px;
padding: 0 20px;
text-decoration: none;
}
#menu-container ul {
list-style: none;
}
#menu-container > ul {
float: left;
}
#menu-container > ul > li {
float: left;
}
#menu-container > ul > li:hover:after {
content: '';
display: block;
width: 0;
height: 0;
position: absolute;
left: 50%;
bottom: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid #0fa1e0;
margin-left: -10px;
}
#menu-container > ul > li:first-child > a {
border-radius: 0px 0 0 0;
-moz-border-radius: 0px 0 0 0;
-webkit-border-radius: 0px 0 0 0;
}
#menu-container > ul > li:last-child > a {
border-radius: 0 0px 0 0;
-moz-border-radius: 0 0px 0 0;
-webkit-border-radius: 0 0px 0 0;
}
#menu-container > ul > li.active > a {
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
}
#menu-container > ul > li:hover > a {
background: #070707;
background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAxCAIAAACUDVRzAAAAA3NCSVQICAjb4U/gAAAALklEQVQImWNQU9Nh+v//PxMDw3+m//8ZkNj/mRgYIHxy5f//Z0BSi18e2TwS5QG4MGB54HL+mAAAAABJRU5ErkJggg==) 100% 100%;
background: -moz-linear-gradient(top, #26262c 0%, #070707 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #26262c), color-stop(100%, #070707));
background: -webkit-linear-gradient(top, #26262c 0%, #070707 100%);
background: -o-linear-gradient(top, #26262c 0%, #070707 100%);
background: -ms-linear-gradient(top, #26262c 0%, #070707 100%);
background: linear-gradient(to bottom, #26262c 0%, #070707 100%);
box-shadow: inset 0 0 3px #000000;
-moz-box-shadow: inset 0 0 3px #000000;
-webkit-box-shadow: inset 0 0 3px #000000;
}
#menu-container .has-sub {
z-index: 1;
}
#menu-container .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub ul {
display: none;
position: absolute;
width: 200px;
top: 100%;
left: 0;
}
#menu-container .has-sub ul li {
*margin-bottom: -1px;
}
#menu-container .has-sub ul li a {
background: #0fa1e0;
border-bottom: 1px dotted #6fc7ec;
filter: none;
font-size: 11px;
display: block;
line-height: 120%;
padding: 10px;
}
#menu-container .has-sub ul li:hover a {
background: #0c7fb0;
}
#menu-container .has-sub .has-sub:hover > ul {
display: block;
}
#menu-container .has-sub .has-sub ul {
display: none;
position: absolute;
left: 100%;
top: 0;
}
#menu-container .has-sub .has-sub ul li a {
background: #0c7fb0;
border-bottom: 1px dotted #6db2d0;
}
#menu-container .has-sub .has-sub ul li a:hover {
background: #095c80;
}
#menu-container {
-moz-box-shadow: 0 0 10px #888;
-webkit-box-shadow: 0 0 10px #888;
box-shadow: 0 0 10px #888;
}
It's much, but if I don't give it you'll report me so how to align the menu to the center of my page (since I didn't code this, it was my friend)? And I also want the menu only, without the empty grey space. Is it possible?
Here is a fiddle that shows you how to align your menu to the center of the screen. You can search for my changes in the css by searching for "EDITED". I marked all 3 changes that way.
Here is what I did.
1.Remove the rule that makes the whole menu float left :
#menu-container > ul {
float: left;
}
2.Specify on his parent element that you want it in the center of the page :
#menu-container {text-align:center;}
3.Then for each menu element, change the following rule :
#menu-container > ul > li {
float: left;
}
to
#menu-container > ul > li {
display: inline-block;
}
As for your last question (I also want the menu only, without the empty grey space), I don't understand what you mean. You want to remove the grey color from the menu bar?