CSS水平菜单,带2张图片;悬停状态&位置

时间:2011-11-27 00:02:16

标签: html css

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

我的问题是:

  1. 悬停图片显示在每个列表项的正确全宽上, 但是当悬停文本时,它只是一个链接(显示手)。
  2. 我尝试使用双类属性调整悬停图像在第一个/最后一个列表项上的位置不起作用。看来这个代码永远不会到达..?因此,如图像所示,我没有调整悬停图像的x位置。
  3. 请注意我几天前开始使用CSS,因此可能还有一些我尚未理解的基本概念。

    enter image description here

        <!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;
    }
    

2 个答案:

答案 0 :(得分:1)

有关

  1. 您需要确保a标记填充li父级,方法是将其设置为blockinline-block,并调整填充,边距等。它的边缘匹配li边缘。这将为您提供整个空间的链接,而不仅仅是文本。
  2. 您在li课程后列出了li,因此您需要:

    .ul_nav .nav-item-first:hover
    

    .ul_nav  .nav-item-first li:hover
    

答案 1 :(得分:0)

我建议您通过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>