CODEWITHSUNDEEP
jqueryhtmlcss
genxgeek
genxgeek

Reputation: 13367

CSS Dropdown Menu Styling

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:

http://jsfiddle.net/tdJnS/

Something like this:

enter image description here

Upvotes: 1

Views: 237

Answers (2)

Selvakumar Arumugam
Selvakumar Arumugam

Reputation: 79850

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;*/

Upvotes: 4

Justin Thomas
Justin Thomas

Reputation: 5848

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; 
}

Upvotes: 3

Related Questions