Mat Fox
Mat Fox

Reputation: 11

Make whole <li> menu as link

I know this has been up a lot of times before, but I couldn't find any solution in my specific case. I've a navigation bar, where the whole <li>'s should be "clickable". Now only the (message/text) is "clickable". I use HTML and CSS. Here are the Codes:

HTML:

<!--mainmenu-->
<ul id="Navigation">
  <li><a href="./index.html" title="">Shop</a></li>
  <li>About</li>
  <li>
    Fenster
    <ul id="Navigation">
      <li> Studio</li>
      <li>Home</li>
      <li>Ambiente</li>
    </ul>
  </li>
  <li>Küchen</li>
  <li>Türen</li>
  <li class="menuitem"><a href="./contact.html" title=""><div class="menulink">Contact</div></a></li>
  <li>Sale %</li>
</ul>

CSS:

@charset "utf-8";
/* CSS Document */

body {
  font-size: 13px;
  text-align: center;
}


#Navigation {
  text-align: left;
  display: inline;
  margin: 0;
  padding: 15px 4px 17px 0;
  list-style: none;
}

#Navigation li {
  font: bold 12px/18px sans-serif;
  display: inline-block;
  margin-right: -4px;
  position: relative;
  padding: 15px 20px;
  background: #fff;
  cursor: pointer;
  -webkit-transition: all 0.2s;
  -moz-transition: all 0.2s;
  -ms-transition: all 0.2s;
  -o-transition: all 0.2s;
  transition: all 0.2s;
    font-size: 16px;
}
#Navigation li:hover {
  background: #555;
  color: #fff;
}
#Navigation li:visited {
  color: #fff;
}
#Navigation li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 150px;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  display: none;
  opacity: 0;
  visibility: hidden;
  -webkit-transiton: opacity 0.2s;
  -moz-transition: opacity 0.2s;
  -ms-transition: opacity 0.2s;
  -o-transition: opacity 0.2s;
  -transition: opacity 0.2s;
}
#Navigation li ul li { 
  background: #555; 
  display: block; 
  color: #fff;
  text-shadow: 0 -1px 0 #000;
}
#Navigation li ul li:hover { background: #666; }
#Navigation li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

#Navigation li a {;
text-decoration: none;
color: black;
margin: 0px;
display:block;
width:100%;
height:100%;
}

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

Do anyone have a neat solution to this?

Upvotes: 1

Views: 330

Answers (1)

Ryan Kinal
Ryan Kinal

Reputation: 17732

The best way to do this is to add size and padding to the a instead of the li. You'll also have to make it display: block.

<ul>
    <li><a href="#yes">Yes</a></li>
    <li><a href="#no">No</a></li>
    <li><a href="#maybe">Maybe</a></li>
    <li><a href="#so">So</a></li>
</ul>

CSS:

li {
    margin: 3px 0;
}

li a {
    display: block;
    width: 100px;
    padding: 10px 15px;
    text-align: center;
    border: solid #F00 1px;
}

li a:hover {
    background-color: #600;
    color: #FFF;
}

Fiddle:

http://jsfiddle.net/2xjctwv9/

Upvotes: 5

Related Questions