title: How to style menu in CSS to look like a button
body: <p>I would like to style joomla 3.x menu to look like a button - it looks like a button, changing colours on hover, active item displayed correctly but link does not work in the way I want - I must point with the mouse directly on the text to open the link and I would like to point anywhere in the button area to open the link....</p>
  
  <p>My page code looks like this:</p>
  
  <pre><code>&lt;ul class="nav menu"&gt;
  &lt;li class="item-101 current active parent"&gt;&lt;a href="/" &gt;Item 1&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-102 parent"&gt;&lt;a href="/index.php/item2" &gt;Item 2&lt;/a&gt;&lt;/li&gt;
  &lt;li class="item-103 parent"&gt;&lt;a href="/index.php/item3" &gt;Item 3&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>my CSS looks like this:</p>
  
  <pre><code>#menu /* layout main menu */
  {
    clear:both;
    float:left;
    margin-top:1em;
    padding-bottom:1em;
    width:100%;
    background-color:gimgrey;
    background-image:url('/templates/swimming/images/logo.png');
    background-repeat:no-repeat;
  
  }
  
  ul.menu
  {
     display: table;
     margin-left: auto;
     margin-right: 0em;
  }
  
  div#menu li /* horizontal menu layout */
  {
    display: inline;
    padding: 0.7em 1em 0.7em 1em;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    margin-right:30px;
    background-color: #4180dd;
  }
  
  div#menu li a:hover /* link style on-mouse-over */
  {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
  
  }
  
  div#menu li:hover  /* button style on-mouse-over */
  {
    padding: 0.7em 1em 0.7em 1em;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
  }
  
  div#menu li a /* link style */
  {
    color:#FFFFFF;
    font-size: 1em;
    text-transform: uppercase;
    text-decoration: none;
    display: inline-block;
  }
  
  div#menu li.active a /* active menu item style */
  {
    color:#FFFFFF;
    text-transform: uppercase;
    text-decoration: none;
  }
  
  div#menu li.active /* active menu button style */
  {
    padding: 0.7em 1em 0.7em 1em;
    border: 3px solid #FFFFFF;
    border-radius: 10px;
    background-color: #dd417f;
  }
  </code></pre>
  
  <p>Without joomla I would do it vice versa <code>&lt;a href&gt;&lt;li&gt;&lt;/li&gt;&lt;/a&gt;</code> to get the effect I need (to have as a link whole li area not only the text). </p>
  
  <p>What am I doing wrong? Any advice?</p>
  
  <p>Thanks,
  Zdenka</p>