CODEWITHSUNDEEP
cssbuttonmenu
tgun926
tgun926

Reputation: 1633

Horizontal menu, not entire box clickable in CSS

I've tried for the past 3 hours to try and get this to work properly with no luck, and am so frustrated.

I have a horizontal menu with links, but I can't get the entire button to be clickable. I then ran into trouble with centering the menu.

Page looks like this (it's centered on the website, container width 900px)

https://i.sstatic.net/cFKpf.png

HTML: 

<div id="container">
         <div id="title">
            <h1>Welcome to my website</h1>
         </div>
         <div id="menu">
            <ul>
               <li><a href="">Home</a></li>
               <li><a href="">About</a></li>
               <li><a href="">Contacts</a></li>
               <li><a href="">FAQ</a></li>
            </ul>
         </div>
         <div id="content"></div>
</div>

CSS:

#container{
   background-color: whitesmoke;
   width: 900px;
   margin: 0px auto;
   padding-bottom: 20px;

}

#menu, #menu ul {
   width: 100%;
   height: 35px;
   background-color: #333;
   color: whitesmoke;
   margin: 0px auto;
   padding: 0px;
   float: left;
   display: table;
   text-align: center;
   font-weight: bold;
}

#menu li{
   display: table-cell;
   padding: 0px 50px;
   vertical-align: middle;
   border: solid 1.5px olive;
   }

#menu a, #menu a:visited {
   color: whitesmoke;
   text-decoration: none;
   }



#menu li:hover {
   background-color: olive;
   color: white;
}

Any help on how to get the entire button clickable while maintaining the look of the page?

Thanks

Upvotes: 2

Views: 1598

Answers (2)

rauberdaniel
rauberdaniel

Reputation: 1033

You shouldn't give the li a padding. You should set the a to display: block; and give them the padding. Doing that the a will fill the whole box, because there won't be any padding between li and a.

Upvotes: 1

Simone
Simone

Reputation: 21262

Just set display: block on the anchors:

#menu a {
  display: block;
}

Upvotes: 0

Related Questions