CODEWITHSUNDEEP
htmlcss
jenna salva
jenna salva

Reputation: 195

How to add space between border line and menu item

I'm trying to add space between a bottom border line and my <li> item but no luck.

My code:

<div class="menuwrap">
    <div class="menu">
        <ul>
            <li><a href="#">Home</a>
            </li>
            <li><a href="#">Query</a>
            </li>
            <li><a href="#">Reports</a>
            </li>
        </ul>
    </div>
</div>

CSS styles:

.menu {
    color: #000;
    background: #FFF;
}
.menu ul {
    list-style: none;
    display: inline;
    float: left;
    padding-left: 40px;
    margin-top: 90px;
}
.menu li {
    float:left;
    margin-left:10px;
}
.menu li a:hover {
    padding: 0 10px 0 10px;
    font-size: xx-large;
    border-bottom: 1px solid white;
    border-spacing: 20px;
}
.menu li a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    font-size: large;
}
.menuwrap {
    overflow:hidden;
}

I tried couple of different things, but nothing worked so far. border-spacing is not doing what I want. I tried padding-bottom and that also didn't work. Can someone tell me how to achieve that? I want a space between the "li" item and its border-bottom.

Upvotes: 0

Views: 4002

Answers (2)

reggaemahn
reggaemahn

Reputation: 6648

Adding a padding-bottom or margin-bottom seems to be working. 

li:hover{
   padding-bottom: 10px;
}

Here's a FIDDLE

or

li:hover{
   margin-bottom: 10px;
}

Here's a FIDDLE

Update: After reading your comment and having a look at the fiddle you provided, I've created one which does what you are trying to do. It's different from the code you provided but it's easier to read and you can modify it according to your needs

.menu{
  list-style-type: none;
}

.menu li{
  display: inline-block;
  *display: inline;
  zoom: 1;
  margin: 10px;
}

.menu li a{
  text-decoration: none;
  color: #000;
  border-bottom: 2px solid #000;
  padding-bottom: 30px;
}

.menu li a:hover{
  font-size: 2em;
  font-weight: bold;
}

FIDDLE

Upvotes: 1

noob
noob

Reputation: 641

I guess you didn't give your styles. padding-bottom works. Please check http://jsfiddle.net/VZCrq/8/

Upvotes: 0

Related Questions