CODEWITHSUNDEEP
htmlcssnavigationbar
user2631279
user2631279

Reputation: 127

Containing background color to individual cells in a navigation menu

The background color in my menu is displayed in "block" while my menu items have rounded corners. How do i contain the color to the cells? Also i want to create space in between each item. Thanks.

JsFiddle

P.S. Background color is only red to demonstrate my issue better.

CSS

/*MAIN MENU*/
.hovermenu ul {
 z-index: 5;
 font: bold 20px Tahoma;
 padding-left: 0;
 margin-left: 0;
 display:inline-block;
 background-color:red;
 }

.hovermenu ul li {
  display: block;
  position: relative;
  float: left;
  margin: 0;         
  padding: 0; 

 }
.hovermenu li ul { display: none; }
.hovermenu ul li a {
  display: block;
  text-decoration: none;
  color: black;
  border: 2px solid #000000;
  padding: 3px 0.5em;
  border-radius: 10px;
  }
.hovermenu ul li a:hover 
{
background-color:#fdff30;
border-style: outset; 
 }
.hovermenu li:hover ul {
  display: block;
  position: absolute;
}
.hovermenu li:hover li {
  float: none;
  font-size: 20px;
}
.hovermenu li:hover a { background: #eaeaeb; }
.hovermenu li:hover li a:hover { background: #fdff30; }
html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}

Upvotes: 0

Views: 76

Answers (3)

A.Sharma
A.Sharma

Reputation: 2799

If you want to make a different color for the navigation items meaning if you want to make the nav buttons be a different color than the red of the div, then you would add a background color of the .hovermenu ul li a class.

But I'm guessing by saying cells you mean you want to contain the color within the actual navigation items instead of the whole div (remove the red from the background and keep it in the navigation buttons). Is that true?

To do this you need to increase the margin and put the background color in the .hovermenu ul li a class:

.hovermenu ul li a {
 display: block;
 text-decoration: none;
 color: black;
 border: 2px solid #000000;
 padding: 3px 0.5em;
 border-radius: 10px;
 background-color:red; 
 margin: 0 5px 0 5px;
 }

You also need to take the background color out of the .hovermenu ul class.

.hovermenu ul {
z-index: 5;
font: bold 20px Tahoma;
padding-left: 0;
margin-left: 0;
display:inline-block;

-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px; /* future proofing */
-khtml-border-radius: 10px; /* for old Konqueror browsers */;
}

http://jsfiddle.net/xr9XB/7/

Upvotes: 0

Serlite
Serlite

Reputation: 12258

To contain the red background colour within the rounded edges of the menu items, move the styling to the <a> from the <ul>. Also, you can add padding to the <li> elements to create spacing between them. So:

.hovermenu > ul > li{
    padding:0 20px; /* Adds space to either side of items */
}
.hovermenu ul li a {
    background-color:red; /* Moved from .hovermenu ul */
}

Here's a JSFiddle to demonstrate. Hope this helps! Let me know if you have any questions.

EDIT: By the way, just in case you're wondering why I used the child selector (>) in the CSS to apply the padding, this is to prevent the style from cascading down to your submenu items as well. (Otherwise, they'll get shifted over by their own padding too, which probably isn't desirable.)

Upvotes: 1

V31
V31

Reputation: 7666

Have border radius property to round them off

Fiddle

Code Snippet:

.hovermenu ul {
 z-index: 5;
 font: bold 20px Tahoma;
 padding-left: 0;
 margin-left: 0;
 display:inline-block;
 background-color:red;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px; /* future proofing */
 -khtml-border-radius: 10px; /* for old Konqueror browsers */;
 }

To have spacing add margin:

.hovermenu ul li {
  display: block;
  position: relative;
  float: left;
  margin: 0 5px 0 0;         
  padding: 0; 
 }

UPDATED FIDDLE WITH BOTH SPACING AND ROUND CORNERS

Upvotes: 0

Related Questions