CSS水平菜单，带有2张图像；悬停状态和位置

Question

我正在设计一个水平菜单，在该菜单中，我使用整个菜单栏的简单单色图像和第二个图像作为悬停状态，这有点暗。 实际上，我只制作了一张包含两者的图像，但这不是重点。

我的问题是：

悬停图像显示在每个列表项的正确全宽上，但是当悬停文本时，它只是一个链接（显示手）。
我尝试使用双重属性来调整悬停图像在第一个/最后一个列表项上的位置，但此操作不起作用。 似乎从未达到此代码。 因此，如图所示，我没有调整悬停图像的x位置。

请注意，几天前我开始使用CSS，所以可能有一些我尚未理解的基本概念。

在此处输入图片说明

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>index</title>
        <meta name="author" content="SS" />
        <!-- Date: 2011-11-26 -->
        <link href="site2.css" rel="stylesheet"type="text/css" />
    </head>
    <body>
        <div class="header-wrap">
            header
        </div>
        <div class="main-wrap">
            <div class="main-content">
                <div class="inner-header">
                    inner header
                </div>
                <div class="navbox">
                    <div class="navmenu">
                        <ul class="ul_nav">
                            <li class="nav-item nav-item-first">
                                <a href="index.html">Home</a>
                            </li>
                            <li class="nav-item">
                                <a href="">Page1</a>
                            </li>
                            <li class="nav-item">
                                <a href="">Page2</a>
                            </li>
                            <li class="nav-item nav-item-last">
                                <a href="">Page3</a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="lower-content">
            lower-content
        </div>
        <div class="footer">
            footer
        </div>
    </body>
</html>

CSS：

    /* Basics */
body {
    background: #888 url() center 30px;
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    color: #000;
    text-align: center;
    margin: 0 auto;
}
/* Main divs */
.header-wrap {
    background: #ddd;
    height: 35px;
    color: #00f;
}
.main-wrap {
    background: #000 url(07h600a.png) no-repeat center 0;
    margin: 0 auto;
}
.main-content {
    overflow: hidden;
    position: relative;
    z-index: 10;
    background: transparent; /* to be transparent*/
    height: 600px;
    margin: 0 auto;
    width: 980px;
}
.lower-content {
    background: #000;
    color: #888;
    height: 100px;
}
.footer {
    background: #777;
    height: 100px;
    margin: 0 auto;
}
/* Content */
/* Menu */
.navbox {
    background: #660;
    position: relative;
    padding: 0px 0 0 0;
    margin: 0 auto 0px;
    font-weight: bold;
    font-size: 12px;
    line-height: 40px;
    height: 50px;
    width: 980px;
    margin: 0 auto;
}
.navmenu {
    margin: 0 auto 0px;
    padding: 0 0 0 0;
    width: 980px;
}
.ul_nav {
    margin: 0;
    padding: 0;
    list-style: none outside none;
    text-transform: uppercase;
}
.navmenu .ul_nav {
    width: 980px;
    position: relative;
    display: table;
}
.ul_nav li {
    display: table-cell;
}
.ul_nav a, .ul_nav a:visited {

    padding: 0 0;
    text-decoration: none;
    color: #fff;
}
.navmenu .nav-item {
    background: transparent url(MenuGray.png) no-repeat scroll;
    background-position: 50% -10px;

}
.navmenu .nav-item-first {
    background-position: 0px -10px;
}
.navmenu .nav-item-last {
    background-position: 100% -10px;
}
/* Menu hover */
.ul_nav  .nav-item-first li:hover {
        background: transparent url(MenuGray.png) no-repeat scroll;
    background-position: 0px -50px;
}
.ul_nav  .nav-item-last li:hover {
    background-position: 100% -50px;
}
.ul_nav li:hover {
    background-position: 50% -60px;
}

/* Menu font */
.ul_nav_color a, .ul_nav_color a:visited {
    color: #FFF;
}

Answer 1

对于

您需要通过将其设置为显示block或行inline-block并调整填充，边距等以使其边缘与li边缘匹配来确保a标记填充li父代。 这将为您提供整个空间的链接，而不仅仅是文本。

您在li的课程后列出了li ，因此您需要：

 .ul_nav .nav-item-first:hover

不

 .ul_nav .nav-item-first li:hover

Answer 2

我建议您浏览http://css.maxdesign.com.au/listutorial/index.htm，以获得一些做水平列表的好例子。 可能避免将列表设置为表。

这是一个简单的水平列表，用于设置锚点的宽度/高度，您可以根据需要将其更改为图像。

的CSS

.newnav ul {margin:0; padding:0; list-style-type: none;}
.newnav ul li { display:inline-block;margin:0; padding:0; }
.newnav ul li a { text-decoration: none; background-color: #aaa; display:inline-block; width: 150px; height: 50px; line-height: 50px; }
.newnav ul li a:hover{background-color: #ddd;}

html

<div class="newnav">
                    <ul>
                        <li class="nav-item nav-item-first"><a href="index.html">Home</a></li>
                        <li class="nav-item"><a href="">Page1</a></li>
                        <li class="nav-item"><a href="">Page2</a></li>
                        <li class="nav-item nav-item-last"><a href="">Page3</a></li>
                    </ul>
                </div>

CSS水平菜单，带有2张图像；悬停状态和位置

问题描述

2 个解决方案

解决方案1
1 已采纳 2011-11-27 00:26:39

解决方案2
0 2011-11-27 00:41:19

CSS水平菜单，带有2张图像； 悬停状态和位置

问题描述

2 个解决方案

解决方案1 1 已采纳 2011-11-27 00:26:39

解决方案2 0 2011-11-27 00:41:19

CSS水平菜单，带有2张图像；悬停状态和位置

解决方案1
1 已采纳 2011-11-27 00:26:39

解决方案2
0 2011-11-27 00:41:19