CODEWITHSUNDEEP
cssdrop-down-menu
Dmitry Makovetskiyd
Dmitry Makovetskiyd

Reputation: 7053

drop down menu links dont work

I build a simple list and added to it css. Now the vertical menu works.. the problem is in the section of the css. The list items area is bigger than the links themselves. That means that if the user clicks on the area, nothing happens cause the links area doesnt cover all the lists items area.

#sidebar1 li {
  list-style: none;
  position: relative;
  width: 120px;
  height: 30px;
  padding: 0 20px;
  background-color: black;
  line-height: 30px;
  cursor: pointer;
}

#sidebar1 li a {
  text-decoration: none;
  color: white;    
}

What I thought to do was to match the links padding or width to that of the lists width. So wherever the users clicks on the menu's item a link will be clicked. Thats problem is that i tried it and it didnt work

Upvotes: 0

Views: 151

Answers (2)

Diodeus - James MacFarlane
Diodeus - James MacFarlane

Reputation: 114367

Move most of the styling to the A-tag and fix a few things:

#sidebar1 li{
list-style: none;
position: relative;
margin:0 <-- added
padding:0  <-- added.
}

#sidebar1 li a{
text-decoration:none;
color: white;
width:120px;
height: 30px;
padding:0 20px;
background-color: black;
line-height: 30px;
cursor:pointer;
display:block <-- this is important
}

Upvotes: 1

David Thomas
David Thomas

Reputation: 253308

Just use display: block to make the a element fill the available horizontal width of the parent element:

#sidebar1 li a{
    text-decoration:none;
    color: white;
    display: block;
    height: 100%;
}

The height: 100% forces the a to inherit the full height of the parent element. Remove padding from the parent li, otherwise you'll enforce a space between the edges of the a and the li.

Further, in your li I've not only removed the padding (which simply causes problems as noted above), but also the cursor: pointer, as if the user hovers over the link the cursor will change automatically, if they're not over the link then the cursor's type, that of pointer, is merely confusing when clicking produces no effect:

#sidebar1 li {
    list-style: none;
    position: relative;
    width:120px;
    height: 30px;
    background-color: black;
    line-height: 30px;
}

Upvotes: 0

Related Questions