dlewis23
02-03-2010, 11:10 AM
I've got a problem with a simple css menu that I need to get working. I use this same menu on another site and don't have a problem. But when trying to use it this way, the menu is pushed off to the right by like 30 pixels and I can't figure out what is pushing it out. The menu should be touching the left side of the browser window.
Here is the menu: http://veeapps.com/menu.html
And the css...
#navigation ul#nav {
z-index: 5000;
background: #555 ;
}
#navigation ul#nav li {
list-style:none;
position: relative;
float: left;
text-align: center;
line-height: 1em;
width:175px;
}
#navigation ul#nav li a {
display: block;
padding: 12px 0;
color: #fff;
text-decoration: none;
border-right: 1px solid #ccc;
text-align: center;
background:#000;
}
#navigation ul#nav li a span {
padding: 0 15px 0 10px;
/* background: url(arrow.gif) no-repeat 100% 50%; optional */
}
#navigation ul#nav li ul {
display: block;
position: absolute;
left: -999em;/* this makes it more accessible than display:none; */
width: 162px;
padding: 3px 8px 3px 8px;
background:#555;
}
#navigation ul#nav li:hover ul,
#navigation ul#nav li.over ul /* This is for Internet Explorer 6 */
{
display: block;
left: 0;
top: 100%;
position: absolute;
z-index: 4000;
width: 146px;
}
#navigation ul#nav li ul li {
width: 146px;
height: auto;
background: transparent;
text-indent: 0;
padding: 0;
}
#navigation ul#nav li:hover ul li a,
#navigation ul#nav li.over ul li a {
display: block;
width: 126px;/*this is to adjust if used some background image for dropdown */
background: transparent;
padding: 15px 10px;
text-decoration: none;
margin: 0;
color: #eee;
text-indent: 0;
text-align: left;
border: 0;
white-space: nowrap;
}
#navigation ul#nav li ul li a:hover {
color: #fff;
background: #62686e;
}
#navigation ul#nav li.active a,
#navigation ul#nav li a:hover,
#navigation ul#nav li:hover a,
#navigation ul#nav li.over a {
background: #555;
}
Here is the menu: http://veeapps.com/menu.html
And the css...
#navigation ul#nav {
z-index: 5000;
background: #555 ;
}
#navigation ul#nav li {
list-style:none;
position: relative;
float: left;
text-align: center;
line-height: 1em;
width:175px;
}
#navigation ul#nav li a {
display: block;
padding: 12px 0;
color: #fff;
text-decoration: none;
border-right: 1px solid #ccc;
text-align: center;
background:#000;
}
#navigation ul#nav li a span {
padding: 0 15px 0 10px;
/* background: url(arrow.gif) no-repeat 100% 50%; optional */
}
#navigation ul#nav li ul {
display: block;
position: absolute;
left: -999em;/* this makes it more accessible than display:none; */
width: 162px;
padding: 3px 8px 3px 8px;
background:#555;
}
#navigation ul#nav li:hover ul,
#navigation ul#nav li.over ul /* This is for Internet Explorer 6 */
{
display: block;
left: 0;
top: 100%;
position: absolute;
z-index: 4000;
width: 146px;
}
#navigation ul#nav li ul li {
width: 146px;
height: auto;
background: transparent;
text-indent: 0;
padding: 0;
}
#navigation ul#nav li:hover ul li a,
#navigation ul#nav li.over ul li a {
display: block;
width: 126px;/*this is to adjust if used some background image for dropdown */
background: transparent;
padding: 15px 10px;
text-decoration: none;
margin: 0;
color: #eee;
text-indent: 0;
text-align: left;
border: 0;
white-space: nowrap;
}
#navigation ul#nav li ul li a:hover {
color: #fff;
background: #62686e;
}
#navigation ul#nav li.active a,
#navigation ul#nav li a:hover,
#navigation ul#nav li:hover a,
#navigation ul#nav li.over a {
background: #555;
}
