CODEWITHSUNDEEP
htmlcss
torbenrudgaard
torbenrudgaard

Reputation: 2541

Styling the <a> tags inside <ul> <li>

I would like to add a hover effect when user moves the mouse over one of the menu links.

I would also like a bit of space between each line in the menu.

Is there a way to add this to .menuitems or will I have to add a class to each of the elements inside the <ul> scope?

CSS :

.menuitems {
    font-size: 20px;
    font-family: 'Roboto';
    color: #337AB7;
    position: relative;
    display: block;
    width: 180px;
}

a:hover .menuitems {
    background-color: yellow;
}

HTML: 

<md-menu-content>
    <ul class="menuitems">
        <li md-ink-ripple>
            <a ui-sref="book">New Booking</a>
        </li>
        <li md-ink-ripple>
            <a ui-sref="admin.home">Admin</a>
        </li>
        <li md-ink-ripple>
            <a ui-sref="admin_logout">Logout</a>
        </li>
    </ul>
</md-menu-content>

Upvotes: 0

Views: 467

Answers (3)

Antara
Antara

Reputation: 1

Just remove .menuitems from a:hover .menuitems.

CSS

.menuitems {
font-size: 20px;
font-family: 'Roboto';
color: #337AB7;
position: relative;
display: block;
width: 180px;
}
/*For hover */
    a:hover{
        background-color: yellow;       
    }
/* To make space between two lines */
    li {
    margin-bottom: 5px;
    }

It will work.

Upvotes: 0

Rithwik
Rithwik

Reputation: 1198

Use the following CSS selector, to refer to the <a>

.menuitems li a:hover

For adding space after the lines you can use margins.

.menuitems li {
margin-bottom: 5px;
}

See for reference : CSS Selectors

.menuitems {
  font-size: 20px;
  font-family: 'Roboto';
  color: #337AB7;
  position: relative;
  display: block;
  width: 180px;
}

.menuitems li a:hover {
  background-color: yellow;
}

.menuitems li {
  margin-bottom: 5px;
}
<ul class="menuitems">
  <li md-ink-ripple>
    <a ui-sref="book">New Booking</a>
  </li>
  <li md-ink-ripple>
    <a ui-sref="admin.home">Admin</a>
  </li>
  <li md-ink-ripple>
    <a ui-sref="admin_logout">Logout</a>
  </li>
</ul>

Upvotes: 1

Minar_Mnr
Minar_Mnr

Reputation: 1405

Remove class name from hover css will give you yellow background color and add padding-bottom will give you extra space. Working Example

CSS : 

.menuitems {
    font-size: 20px;
    font-family: 'Roboto';
    color: #337AB7;
    position: relative;
    display: block;
    width: 180px;
    padding-bottom: 24px;
}
.menuitems li {
   padding-bottom: 10px;
}

.menuitems li a:hover {
    background-color: yellow;
}

Upvotes: 1

Related Questions