So now what we're going to do is we are going to add some accent borders to our different link states. That is, what I want to have here is when I hover over this, let's refresh that. I don't know if we've changed something. When I hover over this, I want a different color border that shows up on the bottom that indicates that either it's in its hover state or it's in a current state. And then I want that border to be essentially invisible when it's in its typical link state.
So we'll come back over here and we are going to say under typical menu item styles, that we want to customize the typical item border. We'll go ahead and hit save to that. And then once we've said that we want to change our typical item border style, now it asks us 2 settings questions. And the first one that we should answer first which is, do we want to configure each link state border separately? That is, do you want to have one border for the link, one border for a current, one border for a hover, another border for a parent? So what we're going to do here is we're going to configure each link state border separately. Now if we didn't check that, we could have all of the borders depending upon their link state be the same but we might not want the border all the way around each menu item to be the same. And so if we want the link and the hover and the current all to be the same color and same width and style then you wouldn't check this. But if we only want a bottom margin for all of those then we would check this. And so those are your two different options when we start talking about a border style. Well, we are going to configure our links differently. So we'll go ahead and select that and hit save.
And then once we have selected that, now we have these options. We have the link border style, hover border style, current border style, and current parent border style. And if you expand that, you can see again, we have this choice. Do we want each side of the border to be different? Now since the only border we want to address is the bottom border, the answer to this is yes. So we say yes, allow each side to be different and we're going to do that for each of these so each of these borders is going to be different. Now we can say save again.
And now if we look at our link border style, now we have the option to set a top, a right, a bottom, and a left border. So what we're going to do here is we're going to say no top border, no right border, and no left border. But our bottom border, we're going to give it 5 pixels and then the color, we are going to use... we got to go back and get from our menu settings. So we can open up this in a new tab and look at our nav menu settings. And so the link background color is 333, okay. So then our back down here to our bottom border style, we want it to be 5 pixels wide and we want 333333. Okay so that's that color.
Now for our hover style, we again want no top border and no right border and no left border but we'll make it a 5 pixel width for our bottom border. And then I'm going to get a nice yellowish orange color there for the hover. So that'll be the hover color then, this color here. You know actually, I'm just going to take this color so that the text and the border are the same. Okay and we're also choosing a solid border style rather than any of the other choices.
And then for our current, we're going to say no top border and no right border and no left border but our bottom border, again, is going to be 5 pixels. And then we're going to pick another color for that and we're not going to use one of those existing colors. I think what we'll do is we'll pick a... yeah, we'll pick a bluish gray color. There we go. And that's going to be our current border style. We're going to use the same one for current parent. And so we're going to have no top border, no right border, bottom border will be 5 pixels, that color solid and we'll have no left border. You see we've got tons and tons of options here. That would be really difficult to wade through if you could see them all the time. So we only see that set of options when we want to see that set of options.
And now that we've saved that, we can come back over and look at our page and refresh it. Okay and so here's our current condition. These are our link conditions. Oh, look at that. I've got a funny little side border thing happening here. I need to go figure out what's causing... oh, it's a hover. Isn't that interesting? I've got a little border that shows up in hover but does not show up anywhere else so I must have missed a setting here. So if I go down to hover border style, no top border, no right border, no bottom border, see no left border. That's what I missed. Hit save and refresh.