增加 <li> 使用CSS悬停标签

Question

I am having trouble to set my <li> tag hovering height. 我无法设置<li>标签的悬停高度。 Below is my jsfiddle of my html and css code. 以下是我的html和css代码的jsfiddle。 Can anyone help me with this. 谁能帮我这个。 I would be happy if there is someone to help me with this. 如果有人可以帮助我，我会很高兴。

My menubar jsfiddle 我的菜单栏jsfiddle

Below is my html code: 以下是我的html代码：

<!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: 这是我的CSS代码：

#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 一旦运行了当前代码，就可以将鼠标悬停在两个<li>标记中，但是最后一个<li>标记的高度是不同的

Answer 1

Updated fiddle : http://jsfiddle.net/eve8nsau/1/ 更新的小提琴 ： 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 现在，您可能会注意到列表项之间的间隙很小，但是您可以使用已经在SO上讨论过的各种技术将其删除

Preview (on hover ) 预览（ hover ）

在此处输入图片说明

Answer 2

I don't see why you're only adding "float: left" to the last <li> , I would change it into: 我不明白为什么只在最后一个<li>上添加“ float：left”，我将其更改为：

 li {
     float: left;
 }

增加 <li> 使用CSS悬停标签

问题描述

2 个解决方案

解决方案1
1 已采纳 2015-02-25 14:26:18

解决方案2
0 2015-02-25 14:27:08

增加 <li> 使用CSS悬停标签

问题描述

2 个解决方案

解决方案1 1 已采纳 2015-02-25 14:26:18

解决方案2 0 2015-02-25 14:27:08

解决方案1
1 已采纳 2015-02-25 14:26:18

解决方案2
0 2015-02-25 14:27:08