Could you please tell me how to remove the white gap between the red line and the nav bar.
CSS:
/* Main */
#menu{
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background: #111;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px #9c9c9c;
-webkit-box-shadow: 0 2px 1px #9c9c9c;
box-shadow: 0 2px 1px #9c9c9c;
}
#menu li{
float: left;
padding: 0 0 10px 0;
position: relative;
}
#menu a{
float: left;
height: 25px;
padding: 0 25px;
color: #999;
text-transform: uppercase;
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: #fafafa;
}
*html #menu li a:hover{ /* IE6 */
color: #fafafa;
}
#menu li:hover > ul{
display: block;
}
/* Sub-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background: #444;
background: -moz-linear-gradient(#444, #111);
background: -webkit-gradient(linear,left bottom,left top,color-stop(0, #111),color-stop(1, #444));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
*html #menu ul a{ /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html #menu ul a{ /* IE7 */
height: 10px;
width: 150px;
}
#menu ul a:hover{
background: #0186ba;
background: -moz-linear-gradient(#04acec, #0186ba);
background: -webkit-gradient(linear, left top, left bottom, from(#04acec), to(#0186ba));
background: -webkit-linear-gradient(#04acec, #0186ba);
background: -o-linear-gradient(#04acec, #0186ba);
background: -ms-linear-gradient(#04acec, #0186ba);
background: linear-gradient(#04acec, #0186ba);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
#menu ul li:first-child a:after{
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Clear floated elements */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
* html #menu { zoom: 1; } /* IE6 */
*:first-child+html #menu { zoom: 1; } /* IE7 */
.navbar { margin-bottom: 0; }
HTML:
<head>
<title> Welcome to the home page </title>
<link rel="stylesheet" href="css.css">
</head>
<body>
<hr size="50px" color=red>
<ul id="menu">
<li>Home</li>
<li>
Categories
<ul>
<li>CSS</li>
<li>Graphic design</li>
<li>Development tools</li>
<li>Web design</li>
</ul>
</li>
<li>Work</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
</body>
</html>
The Problem
http://i.stack.imgur.com/Qa10j.png
I have added the code at the bottom of the CSS, however this did not seems to make much difference
With CSS, there's a bunch of options.
You could try
hr {
margin-botton: 0;
}
Or instead of using an hr, you could add some padding to the menu, and a top border to it. Size and add padding to get the desired effect.
#menu {
border-top: 1px solid red;
}
The hr has a margin of 8px on top and bottom. Get rid of the bottom margin.
Related
I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too. I want the menu to be in the center of the page in the browser. I add my CSS file in question. I kind of wrote everything correctly, you can help me fix the error. The table is centered and I want the menu too.
My CSS file
html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
width: 20%;
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>
html, body {
background: black;
font: 100% helvetica, arial, sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
#container {
margin: 40px auto;
width: 800px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#header {
border-bottom: 1px solid white;
margin: 0 0 20px;
overflow: hidden;
padding: 0 0 10px;
}
a {
color: white;
background: red;
font-weight: bold;
text-decoration: none;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
}
a:hover {
color: white;
}
/*============================*/
/* Main Navigation
/*============================*/
#nav {
height: 50px;
line-height: 50px;
width: 100%;
text-align: center;
}
#nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
float: left;
position: relative;
/* width: 20%; */
}
#nav li:first-child, #nav li:first-child a {
-webkit-border-radius: 3px 0 0 3px;
-moz-border-radius: 3px 0 0 3px;
border-radius: 3px 0 0 3px;
}
#nav li:last-child, #nav li:last-child a {
-webkit-border-radius: 0 3px 3px 0;
-moz-border-radius: 0 3px 3px 0;
border-radius: 0 3px 3px 0;
}
#nav a {
border-right: 1px solid red;
border-left: 1px solid red;
color: white;
display: block;
font-size: 14px;
height: 50px;
overflow: hidden;
text-align: center;
text-shadow: 0 -1px 0 red;
-webkit-box-shadow: inset 0 0 10px transparent;
-moz-box-shadow: inset 0 0 10px transparent;
padding: 0 60px;
}
#nav a:after {
background: rgba(255,255,255,.07);
content: "";
height: 25px;
left: 0;
position: absolute;
width: 100%;
}
#nav li:hover > a {
background: black;
border-left-color: #222;
color: white;
text-shadow: 0 1px 0 #000;
-webkit-box-shadow: inset 0 0 10px #111;
-moz-box-shadow: inset 0 0 10px #111;
box-shadow: inset 0 0 10px #111;
}
#nav span {
position: relative;
}
#nav a:active span {
color: red;
position: relative;
top: 1px;
}
#nav li:first-child a {
border-left: none;
}
#nav li:last-child a {
border-right: none;
}
.dropdown > a span:after {
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #ccc;
content: "";
right: -13px;
position: absolute;
top: 3px;
}
.dropdown:hover > a span:after {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #fff;
content: "";
right: -15px;
position: absolute;
top: 6px;
}
/*============================*/
/* Sub Navigation
/*============================*/
#nav ul ul {
opacity: 0;
position: absolute;
top: 50px;
visibility: hidden;
width: 0;
-moz-transition: all 300ms ease-out;
-webkit-transition: all 300ms ease-out;
-ms-transition: all 300ms ease-out;
transition: all 300ms ease-out;
left: 0;
}
#nav ul li:hover ul {
opacity: 1;
visibility: visible;
width: 100%;
}
#nav ul ul li {
background: white;
float: none;
line-height: 0;
width: 100%;
}
#nav ul ul li:nth-child(odd) {
background: white;
}
#nav ul ul li:first-child, #nav ul ul li:first-child a {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
#nav ul ul li:last-child, #nav ul ul li:last-child a {
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
#nav ul ul li a {
border-right: none;
border-left: none;
border-top: 1px solid white;
color: #555;
font-size: 12px;
height: 36px;
line-height: 36px;
padding: 0 0 0 15px;
text-align: left;
text-shadow: 0 -1px 0 #eee;
}
#nav ul li ul li a:after {
background: rgba(0,0,0,.02);
content: "";
height: 18px;
left: 0;
position: absolute;
top: 19px;
width: 100%;
}
#nav ul ul li a:hover {
background: white;
color: #111;
text-shadow: 0 1px 0 #fff;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
#nav ul ul a:active span {
color: white;
position: relative;
top: 1px;
}
.login-form {
position:absolute;
width:200px;
height:150px;
left:50%;
top:50%;
margin-left:-100px;
margin-top:-100px;
}
<div id="container">
<div id="header">
</div>
<div id="nav">
<ul>
<li><span>Главная</span></li>
<li class="dropdown"><span>Студенты</span>
<ul>
<li><span>Список студентов</span></li>
<sec:authorize access="hasRole('ADMIN') || hasRole('USER')">
<li><span>Добавить студента</span></li>
</sec:authorize>
</ul>
</li>
<sec:authorize access="!isAuthenticated()">
<li class="dropdown"><span>Войти</span>
</li>
</sec:authorize>
<sec:authorize access="!isAuthenticated()">
<li><span>Выйти</span></li>
</sec:authorize>
</ul>
</div>
</div>
Please change the following two class:-
#container {
width: 100%; //Change width to 100%
height: 100vh; //Add height 100vh
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
#nav {
height: 50px;
line-height: 50px;
width: 80%; // Change width to 80%
margin: 0 auto; // Add margin 0 auto
}
you can use margin to #nav tag, just add the following code in your css.
#nav
{ margin-left:11%;}
Add the below lines in your code. This will help you:
#nav ul {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
}
#nav li {
background: white;
background-image: -o-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -moz-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -ms-linear-gradient(bottom, #222222 0%, #555555 100%);
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #222222),color-stop(1, #555555));
background-image: linear-gradient(bottom, #222222 0%, #555555 100%);
position: relative;
width: 20%;
display: inline-block;
}
the menu for my website has some issues. When i hover an item from the "first level", the other items around get closer. But the fact is that the menu works perfectly on Firefox, but has issues on IE and chrome. There is the fiddle : https://jsfiddle.net/sxfxjja5/ and the CSS:
#menu{
width: 57%;
-webkit-width:60%;
margin-left: 22%;
-webkit-height:15%;
-webkit-margin-left:18%;
margin-top: 0%;
padding: 10px 0 0 0;
-webkit-padding:15px 0 0 0;
list-style: none;
background: linear-gradient(green, white);
height: 5%;
-moz-border-radius: 50px;
-webkit-border-radius:50px;
border-radius: 50px;
-moz-box-shadow: 0 2px 1px white;
-webkit-box-shadow: 0 2px 1px white;
box-shadow: 0 2px 1px white;
position:absolute;
z-index: 22;
}
#menu li{
float: left;
padding: 0 0 10px 0;
-webkit-padding:0 0 20px 0;
position: relative;
}
#menu a{
float: left;
-webkit-width: 100%;
padding: 0 20%;
-webkit-padding-left:20%;
color: antiquewhite; /*couleur police onglets lvl 1 */
text-transform: uppercase;
font: bold 77%/25px Arial, Helvetica;
width: 100%;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a{
color: green;
}
#menu li:hover > ul{
display: block;
}
/* Sous-menu */
#menu ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
z-index: 99999;
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
#menu ul li{
float: none;
margin: 0;
padding: 0;
display: block;
-moz-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
-webkit-box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
box-shadow: 0 1px 0 #111111, 0 2px 0 #777777;
}
#menu ul li:last-child{
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a{
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover{
background: linear-gradient(white, green);
}
#menu ul li:first-child a{
-moz-border-radius: 5px 5px 0 0;
-webkit-border-radius: 5px 5px 0 0;
border-radius: 5px 5px 0 0;
}
/*Le petit triangle */
#menu ul li:first-child a:after{
}
#menu ul li:first-child a:hover:after{
border-bottom-color: #04acec;
}
#menu ul li:last-child a{
-moz-border-radius: 0 0 5px 5px;
-webkit-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
}
/* Rétablissement du flottement */
#menu:after{
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
/*Sous menu lvl 3 */
#menu ul li ul{
list-style: none;
margin: 0;
padding: 0;
display: none;
margin-left:100%;
top: 0%;
z-index: 99999;
background: linear-gradient(#444, #111);
-moz-border-radius: 5px;
border-radius: 5px;
}
Is anyone knows how to make it works on all browser please?
I removed a few things in your code, like -webkit-padding, -webkit-height and so on.
It's not needed.
I have also removed the fluid padding on links and do a fixed padding on li which are floating elements in that case.
Also removed absolute position of the menu and apply a 100% width.
See it here
Here's the js fiddle : http://jsfiddle.net/7dbemt0k/
I used below code to make divider.
box-shadow: 1px 0 #111111,
2px 0 #777777;
But I want it to be longer, from very top to very bottom across border-bottom.How do I increase the length or shall I use something like vertical tag? Please advise.Thanks.
HTML
<ul class="sf-menu">
<li>
<a href="<?php echo $data['config']['SITE_DIR']; ?>/">
<img src='<?php echo $data['config']['THEME_DIR']."/img/home_1.png"; ?>'></a>
</li>
<li>
About Us
<ul>
<li>
Centre-Point of Web Projects
</li>
</ul>
</li>
<li>
Branches
<?php Core::getHook('block-branches'); ?>
</li>
<li>
News
</li>
<li>
Events
</li>
<li>
Contact Us
</li>
</ul>
<div class="clear"></div>
CSS
/* Main */
.sf-menu {
width: 100%;
margin: 0;
padding: 10px 0 0 0;
list-style: none;
background-color: #2D2D2D;
/*background-image: linear-gradient(#444, #111);*/
border-bottom:6px solid #072438;
/*border-radius: 50px;*/
/* box-shadow: 0 2px 1px #9c9c9c;*/
box-shadow: 2px 1px #393939;
}
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
.sf-menu a {
float: left;
height: 20px;
padding: 0 25px;
color: #999;
/* text-transform: uppercase;*/
font: bold 12px/25px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
.sf-menu li:hover > a {
color: #fafafa;
}
*html .sf-menu li a:hover { /* IE6 */
color: #fafafa;
}
.sf-menu li:hover > ul {
display: block;
}
/* Sub-menu */
.sf-menu ul {
list-style: none;
margin: 0;
padding: 0;
display: none;
position: absolute;
top: 35px;
left: 0;
z-index: 99999;
background-color: #2D2D2D;
border-bottom:none;
/* background-image: linear-gradient(#444, #111); */
/*-moz-border-radius: 5px;*/
/*border-radius: 5px;*/
}
.sf-menu ul li {
float: none;
margin: 0;
padding: 0;
display: block;
box-shadow: 0 1px 0 #111111,
0 2px 0 #777777;
border-bottom:none;
}
.sf-menu ul li:last-child {
box-shadow: none;
}
.sf-menu ul a {
padding: 10px;
height: auto;
line-height: 1;
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
.sf-menu ul a:hover{
margin-left:10px;
}
*html .sf-menu ul a { /* IE6 */
height: 10px;
width: 150px;
}
*:first-child+html .sf-menu ul a { /* IE7 */
height: 10px;
width: 150px;
}
/* active menu*/
/*end */
.sf-menu ul a:hover {
/*background-color: #0186ba;
background-image: linear-gradient(#04acec, #0186ba);*/
}
.sf-menu ul li:first-child a {
/*border-radius: 5px 5px 0 0;*/
}
.sf-menu ul li:first-child a:after {
content: '';
position: absolute;
left: 30px;
top: -8px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 8px solid #072438;
}
.sf-menu ul li:first-child a:hover:after {
border-bottom-color: #072438;
}
.sf-menu ul li:last-child a {
/*border-radius: 0 0 5px 5px;*/
}
/* Clear floated elements */
.sf-menu:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.sf-menu ul li a:last-child{
box-shadow: 0 0 #111111,
0 0 #777777;
}
* html .sf-menu { zoom: 1; } /* IE6 */
*:first-child+html .sf-menu { zoom: 1; } /* IE7 */
remove padding: 10px 0 0 0; from .sf-menu and change the padding on .sf-menu li to padding: 10px 0;
FIDDLE
UPDATE
Because the box-shadow is outside of the element's natural width you just have to add some spacing to the li's using margin
.sf-menu li {
float: left;
padding: 10px 0;
margin: 0 0 0 2px; <---- //add margin
position: relative;
box-shadow: 1px 0 #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
}
NEW FIDDLE
.sf-menu li {
float: left;
padding: 0 0 10px 0;
position: relative;
box-shadow: 1px 0px #111111,
2px 0 #777777;
border-bottom:6px solid #393939;
**height:40px;**
}
I don't quite understand yr question but u mentioned that u wanted to increase the vertical divider, you just have to set the height of the li
I know what you're thinking - who cares about IE anyway? Well, my client does. The problem is that a dotted outline appears around the menu bar links when you click on one. I tried it in IE 11 and there's no problem. So it's only a problem for people using older versions of IE. Also fine in Chrome, Firefox, and any other relevant browser, but I figured I'd ask anyway.
The website is precisionimagerycorp.com
The HTML
<ul id="menu-bar">
<li>Home |</li>
<li> About |</li>
<li>Blog |</li>
<li>Contact |</li>
<li>Client Login</li> <br /><br />
<li><a href="register.php">
The CSS
a:link{
color:#003;
text-decoration:none;
}
a:visited{
color:#003;
text-decoration:none;
}
#menu-bar {
margin-left: 0px;
margin-top: 0px;
padding: 25px 0px 0px 115px;
height: 34px;
line-height: 100%;
/*border-radius: 24px;
-webkit-border-radius: 24px;
-moz-border-radius: 24px;
box-shadow: 2px 2px 3px #666666;
-webkit-box-shadow: 2px 2px 3px #666666;
-moz-box-shadow: 2px 2px 3px #666666;
background: #8B8B8B;
filter:alpha(opacity:0);
background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#000));
background: -moz-linear-gradient(top, #FFF, #000);
border: none;*/
}
#menu-bar li {
margin: 0px 0px 0px 0px;
padding: 0px 0px 6px 0px;
float: left;
position: relative;
list-style: none;
}
#menu-bar a {
font-weight: bold;
font-family: arial;
font-style: normal;
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
display: block;
padding: 8px 20px 8px 0px; /*The value on the far right determines menu bar placement */
margin: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
text-shadow: 2px 2px 3px #000000;
}
/*#menu-bar .current a, #menu-bar li:hover > a {
background: #0399D4;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#EBEBEB, endColorstr=#A1A1A1);
background: -webkit-gradient(linear, left top, left bottom, from(#EBEBEB), to(#A1A1A1));
background: -moz-linear-gradient(top, #EBEBEB, #A1A1A1);
color: #570058;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
text-shadow: 2px 2px 3px #FFFFFF;*/
}
#menu-bar .current a, #menu-bar li:hover > a {
}
#menu-bar ul li:hover a, #menu-bar li:hover li a {
background: none;
border: none;
color: #666;
-box-shadow: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
}
#menu-bar ul a:hover {
background: #0399D4 !important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#04ACEC, endColorstr=#0186BA);
background: -webkit-gradient(linear, left top, left bottom, from(#04ACEC), to(#0186BA)) `enter code here`!important;
background: -moz-linear-gradient(top, #04ACEC, #0186BA) !important;
color: #FFFFFF !important;
border-radius: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
text-shadow: 2px 2px 2px #FFFFFF;
}
#menu-bar ul {
background: #DDDDDD;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#FFFFFF, endColorstr=#CFCFCF);
background: -webkit-gradient(linear, left top, left bottom, from(#FFFFFF), to(#CFCFCF));
background: -moz-linear-gradient(top, #FFFFFF, #CFCFCF);
display: none;
margin: 0;
padding: 0;
width: 180px;
position: absolute;
top: 30px;
left: 0;
border: 0;
border-radius: 10px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-box-shadow: 2px 2px 3px #222222;
-moz-box-shadow: 2px 2px 3px #222222;
box-shadow: 2px 2px 3px #222222;
}
#menu-bar li:hover > ul {
display: block;
}
#menu-bar ul li {
float: none;
margin: 0;
padding: 0;
}
#menu-bar ul a {
padding:10px 0px 10px 15px;
color:#424242 !important;
font-size:12px;
font-style:normal;
font-family:arial;
font-weight: normal;
text-shadow: 2px 2px 3px #FFFFFF;
}
#menu-bar ul li:first-child > a {
border-top-left-radius: 10px;
-webkit-border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
border-top-right-radius: 10px;
-webkit-border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
}
#menu-bar ul li:last-child > a {
border-bottom-left-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
-moz-border-radius-bottomright: 10px;
}
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar {
display: inline-block;
}
html[xmlns] #menu-bar {
display: block;
}
* html #menu-bar {
height: 1%;
}
I am sorry in advance, I know multiple postings on this topic is a drag.. But I have tried at least 10 different solutions and cannot figure out why this menu will not center.
Here is the menu as a live screen shot that I would like centered:
Here is the life page if you want to see the full source:
https://www.orangeinsurance.com/contractors-NEW.html
Thanks in advance.
CSS
#menu, #menu ul {
margin: 0;
padding: 0;
list-style: none;
}
#menu {
width: 50%;
margin: 2px auto;
border: 1px solid #222;
background-color: #111;
background-image: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background-image: -webkit-linear-gradient(#444, #111);
background-image: -o-linear-gradient(#444, #111);
background-image: -ms-linear-gradient(#444, #111);
background-image: linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
#menu:before,
#menu:after {
content: "";
display: table;
}
#menu:after {
clear: both;
}
#menu {
zoom:1;
}
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
#menu a {
float: left;
padding: 12px 15px;
color: #999;
text-transform: uppercase;
font: bold 12px Arial, Helvetica;
text-decoration: none;
text-shadow: 0 1px 0 #000;
}
#menu li:hover > a {
color: #fafafa;
}
*html #menu li a:hover { /* IE6 only */
color: #fafafa;
}
#menu ul {
margin: 20px 0 0 0;
_margin: 0; /*IE6 only*/
opacity: 0;
visibility: hidden;
position: absolute;
top: 38px;
left: 0;
z-index: 1;
background: #444;
background: -moz-linear-gradient(#444, #111);
background-image: -webkit-gradient(linear, left top, left bottom, from(#444), to(#111));
background: -webkit-linear-gradient(#444, #111);
background: -o-linear-gradient(#444, #111);
background: -ms-linear-gradient(#444, #111);
background: linear-gradient(#444, #111);
-moz-box-shadow: 0 -1px rgba(255,255,255,.3);
-webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.3);
box-shadow: 0 -1px 0 rgba(255,255,255,.3);
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
-ms-transition: all .2s ease-in-out;
-o-transition: all .2s ease-in-out;
transition: all .2s ease-in-out;
}
#menu li:hover > ul {
opacity: 1;
visibility: visible;
margin: 0;
}
#menu li:last-child
{
border-right: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul ul {
top: 0;
left: 150px;
margin: 0 0 0 20px;
_margin: 0; /*IE6 only*/
-moz-box-shadow: -1px 0 0 rgba(255,255,255,.3);
-webkit-box-shadow: -1px 0 0 rgba(255,255,255,.3);
box-shadow: -1px 0 0 rgba(255,255,255,.3);
}
#menu ul li {
float: none;
display: block;
border: 0;
_line-height: 0; /*IE6 only*/
-moz-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
-webkit-box-shadow: 0 1px 0 #111, 0 2px 0 #666;
box-shadow: 0 1px 0 #111, 0 2px 0 #666;
}
#menu ul li:last-child {
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul a {
padding: 10px;
width: 130px;
_height: 10px; /*IE6 only*/
display: block;
white-space: nowrap;
float: none;
text-transform: none;
}
#menu ul a:hover {
background-color: #0186ba;
background-image: -moz-linear-gradient(#67c6dd, #0186ba);
background-image: -webkit-gradient(linear, left top, left bottom, from(#67c6dd), to(#0186ba));
background-image: -webkit-linear-gradient(#67c6dd, #0186ba);
background-image: -o-linear-gradient(#67c6dd, #0186ba);
background-image: -ms-linear-gradient(#67c6dd, #0186ba);
background-image: linear-gradient(#67c6dd, #0186ba);
}
#menu ul li:first-child > a {
-moz-border-radius: 3px 3px 0 0;
-webkit-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0;
}
#menu ul li:first-child > a:after {
content: '';
position: absolute;
left: 40px;
top: -6px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid #444;
}
#menu ul ul li:first-child a:after {
left: -6px;
top: 50%;
margin-top: -6px;
border-left: 0;
border-bottom: 6px solid transparent;
border-top: 6px solid transparent;
border-right: 6px solid #3b3b3b;
}
#menu ul li:first-child a:hover:after {
border-bottom-color: #67c6dd;
}
#menu ul ul li:first-child a:hover:after {
border-right-color: #0299d3;
border-bottom-color: transparent;
}
#menu ul li:last-child > a {
-moz-border-radius: 0 0 3px 3px;
-webkit-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
}
/* Mobile */
#menu-trigger {
display: none;
}
#media screen and (max-width: 600px) {
/* nav-wrap */
#menu-wrap {
position: relative;
}
#menu-wrap * {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
/* menu icon */
#menu-trigger {
display: block; /* show menu icon */
height: 40px;
line-height: 40px;
cursor: pointer;
padding: 0 0 0 35px;
border: 1px solid #222;
color: #fafafa;
font-weight: bold;
background-color: #111;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -moz-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -webkit-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -o-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, -ms-linear-gradient(#444, #111);
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAPCAMAAADeWG8gAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjE2QjAxNjRDOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjE2QjAxNjREOUNEOTExRTE4RTNFRkI1RDQ2MUYxOTQ3Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6MTZCMDE2NEE5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6MTZCMDE2NEI5Q0Q5MTFFMThFM0VGQjVENDYxRjE5NDciLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz42AEtnAAAABlBMVEX///////9VfPVsAAAAAnRSTlP/AOW3MEoAAAAWSURBVHjaYmAgFzBiACKFho6NAAEGAD07AG1pn932AAAAAElFTkSuQmCC) no-repeat 10px center, linear-gradient(#444, #111);
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
-webkit-box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
box-shadow: 0 1px 1px #777, 0 1px 0 #666 inset;
}
/* main nav */
#menu {
margin: 0; padding: 10px;
position: absolute;
top: 40px;
width: 100%;
z-index: 1;
background-color: #444;
display: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu:after {
content: '';
position: absolute;
left: 25px;
top: -8px;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 8px solid #444;
}
#menu ul {
position: static;
visibility: visible;
opacity: 1;
margin: 0;
background: none;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul ul {
margin: 0 0 0 20px !important;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu li {
position: static;
display: block;
float: none;
border: 0;
margin: 5px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu ul li{
margin-left: 20px;
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
#menu a{
display: block;
float: none;
padding: 0;
color: #999;
}
#menu a:hover{
color: #fafafa;
}
#menu ul a{
padding: 0;
width: auto;
}
#menu ul a:hover{
background: none;
}
#menu ul li:first-child a:after,
#menu ul ul li:first-child a:after {
border: 0;
}
}
#media screen and (min-width: 600px) {
#menu {
display: block !important;
}
}
/* iPad */
.no-transition {
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
opacity: 1;
visibility: visible;
display: none;
}
#menu li:hover > .no-transition {
display: block;
}
body,td,th {
font-family: Calibri;
color: #333;
}
Rather than using floats on your li elements, use display:inline-block; You'll have to either increase the overall size of your ul or reduce the padding/margins of your li elements since they have a total width of more than 50% of the page...
Change this:
#menu li {
float: left;
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
position: relative;
}
To this:
#menu li {
border-right: 1px solid #222;
-moz-box-shadow: 1px 0 0 #444;
-webkit-box-shadow: 1px 0 0 #444;
box-shadow: 1px 0 0 #444;
display: inline-block;
}
If you create a fiddle I can show you a working example...
#menu li {
/* float: left; --> Delete this*/
display: inline-block; /*use this */
}