Hi,
I am creating a new pure CSS menu for our website.
it looks now: http://www.1tm.com/test/test.html
-
I need the menu items a solid color instead of an image.
-
I need the “website design” and “SSL” menus to point left instead of right. (Cause if its right it points off the page.)
-
I need 0 border on the menus.
-
I need the text in the menus to be on the left hand. (Instead of centered)
Thank you all!
Quirks mode rocks!
Just to update everyone I fixed #1 and #4 I just need help pointing the CSS dropdown to the left for “website design” and “SSL” & making the dropdown 0 borders.
Could anyone help on this?
#nav{
float:left;
width:100%;
font: bold 24px Arial;
list-style:none;
border: 1px solid #625e00;
border-width: 0px 0;
background: black url(blockdefault.gif) center center repeat-x;
}
#nav li{
float:left;
margin-right:0px;
position:relative;
display:block;
}
#nav li a{
display:block;
padding: 9px 14px;
font: bold 14px Arial;
color: white;
background: black url(blockdefault.gif) center center repeat-x;
text-decoration:none;
border-right: 1px solid white;
}
#nav li a:hover{
color:#fff;
text-decoration:underline;
background: transparent url(blockactive.gif) center center repeat-x;
}
/— DROPDOWN —/
#nav ul{
list-style:none;
position:absolute;
left:-9999px; /* Hide off-screen when not needed (this is more accessible than display:none;) */
opacity:0; /* Set initial state to transparent */
text-align: left;
}
#nav ul li{
float:none;
}
#nav ul a{
white-space:nowrap; /* Stop text wrapping and creating multi-line dropdown items */
display:block;
}
#nav li:hover ul{ /* Display the dropdown on hover /
left:0; / Bring back on-screen when needed /
opacity:1; / Fade to opaque /
}
#nav li:hover a{ / Set styles for top level when dropdown is hovered */
background: transparent url(blockactive.gif) center center repeat-x;
text-decoration:none;
}
#nav li:hover li a {color:#FFF; background:#980E10;
}
}
#nav li:hover ul a{ /* Override some top level styles when dropdown is hovered /
padding: 9px 14px;
top:-2px;
text-decoration:none;
border-style:solid;
border-width:0px;
}
#nav li:hover ul li a:hover{ / Set styles for dropdown when items are hovered */
background:#E13C40;
border-style:solid;
border-width:0px;
}