CODEWITHSUNDEEP
htmlcss
Raaj Lokanathan
Raaj Lokanathan

Reputation: 479

Increase <li> tag hovering using CSS

I am having trouble to set my <li> tag hovering height. Below is my jsfiddle of my html and css code. Can anyone help me with this. I would be happy if there is someone to help me with this.

My menubar jsfiddle

Below is my html code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>Home</title>
   <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
   <div id="logo">

   </div>
   <div id="navigation">
      <ul>
        <li id="left"><a href="#home">Home</a></li>
        <li id="left"><a href="#home">About Us</a></li>
        <li id="left"><a href="#home">Events</a></li>
        <li id="left"><a href="#home">Contact Us</a></li>
        <li id="right"><a href="#home">Login</a></li>
      </ul>

   </div>
   <div id="imgbanner">

   </div>
   </body>
   </html>

This is my css code:

#logo {
   border-bottom: 2px solid black;
   width: 100%;
   height: 100px;
}

#navigation {
    background-color: #fff;
    border: 1px solid #dedede;
    border-radius: 4px;
    box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.055);
    color: #888;
    display: block;
    margin: 0;
    overflow: hidden;
    width: 100%; 
}

#navigation ul {
    list-style-type: none;
    margin: 0;
    padding: 0;

}

#navigation li {
    display: inline;
    /*padding: 20px;*/
    -webkit-transition: all 0.2s;
    -moz-transition: all 0.2s;
    -ms-transition: all 0.2s;
    -o-transition: all 0.2s;
    transition: all 0.2s; 
 }

 #navigation li:hover {
    background-color: rgb( 251,184,41);
/*  padding: 20px;
*/
}

#navigation a {
    color: #026475;
    display: inline-block;
    line-height: 56px;
    padding: 0 24px;
    text-decoration: none;
}

/*#imgbanner {
   position: absolute;
   border: 2px solid black; 
}
 */
 ul #right {
    float: right;
 }

li #right{
    float: left;
}

Once I run this current code, I can hover in both of my <li> tags but then the height is different for the last <li> tag

Upvotes: 0

Views: 115

Answers (2)

Eric Mahieu
Eric Mahieu

Reputation: 327

I don't see why you're only adding "float: left" to the last <li>, I would change it into:

 li {
     float: left;
 }

Upvotes: 0

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Updated fiddle: http://jsfiddle.net/eve8nsau/1/

change 

#navigation li {
    display: inline;
    ...

into

#navigation li {
    display: inline-block;
    ...

now, you may notice a small gap between list-items but you can remove it using various techniques already discussed on SO

Preview (on hover)

enter image description here

Upvotes: 1

Related Questions