How can I get rid of the horizontal borders that divide each menu item per the following example but maintain the overall outer border of the active menu:
Something like this:
Add a comment
|
2 Answers
Remove border-top from the li -> a.
See DEMO here
CSS changes below,
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
/*border-top: 1px solid #EEEEEE;*/ <-- Commented
...
...
and
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a
{
/*border-top: 1px solid #EEEEEE;*/ <-- Commented
...
...
Edit:
It should work if you add a border to ul and remove the margin-left: -1 and margin-top: -1 from the li > a.
Also Please note that removing margin's would give a different feel from what you had before.
DEMO here
/*newly added - Change to any color to #EEEEEE if that is what you want */
ul#navmenu-h ul
{
border: 1px solid black;
}
and Commented below,
ul#navmenu-h li:hover li a,
ul#navmenu-h li.iehover li a {
/*border-top: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
border-bottom: 1px solid #EEEEEE;
margin-left: -1px; */
ul#navmenu-h li:hover a,
ul#navmenu-h li.iehover a
{
/*border-top: 1px solid #EEEEEE;*/
/*margin-top: -1px;*/
answered Jan 12, 2012 at 22:47
Selvakumar Arumugam
79.9k15 gold badges123 silver badges139 bronze badges
2 Comments
genxgeek
Hi, I still do need the top border for uppermost main menu item so it looks like a tab select.
Selvakumar Arumugam
@JaJ: See my edit. Basically added border for ul and removed margin left and top.
Remove border-top from this:
ul#navmenu-h li.iehover li a {
border-bottom: 1px solid #EEEEEE;
border-right: 1px solid #EEEEEE;
border-left: 1px solid #EEEEEE;
margin-left: -1px;
float: none;
background: #FFF;
font-weight: normal;
font-size: 10px;
}
2 Comments
genxgeek
Hi, that didn't do it unless I'm missing somethin. See my update for final output example (facebook like tab menu).
Justin Thomas
There's a second one you also have to remove