0
4

2 回答 2

2 
#bg_menu { #000;

这个css是不正确的。我假设你的意思是：

#bg_menu { background-color: #000;
于 2013-06-08T02:36:25.417 回答
0

您需要将颜色声明放在<a>自身上，而不是放在<li>：

#navigation .menu_li:hover a {color: #000;}

关于高度问题，只需删除所有高度设置。避免设置高度。它只会引起问题。更好的选择是将lis设置display: inline-block为 54px 的行高。

关于p，将其更改为 aspan并将图像设置为vertical-align: middle。

编辑：这是更改的示例：http: //jsfiddle.net/n5VWn/

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address,
    big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center,
    dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside,
    canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time,
    mark, audio, video {
        margin: 0;
        padding: 0;
        border: 0;
        font-size: 100%;
        font: inherit;
        vertical-align: baseline;
        outline: none;
        text-decoration: none;
    }

    /* HTML5 display-role reset for older browsers */
    article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
        display: block; overflow: hidden;
    }

    body {
        line-height: 1;
    }

    ol, ul {
        list-style: none;
    }

    blockquote, q {
        quotes: none;
    }

    blockquote:before, blockquote:after, q:before, q:after {
        content: none;
    }

    table {
        border-collapse: collapse;
        border-spacing: 0;
    }


    @charset "UTF-8";
    /**
     * Cascading Style Sheet - CSS
     */

    /*Formating the navigation menu, it's same on all pages, changing only the active menu item. We also have the
    formatting of the base that will receive the contents of the pages.*/

    html, body {
        font-family: "Carrois Gothic", sans-serif; color: #444; background: #EEEBEB; font-size: 16px; height: 100%;
        /*Browser webkit font fix*/
        -webkit-text-size-adjust: none;
        /*improve the readability of the text avoiding aliasing in the fonts.*/
        -webkit-font-smoothing: antialiased; -moz-font-smoothing: antialiased; -o-font-smoothing: antialiased;
        -ms-font-smoothing: antialiased; font-smoothing: antialiased;
    }

    .bg { float: left; min-width: 1024px; width: 100%; }

    #bg_menu { #000; background: url('../img/bg_header.png') repeat-x; }

    #bg_content { min-height: 100%; height: auto; background: url('../img/dotted.jpg') repeat-x;
        box-shadow: inset  4px 6px 30px #969696; }

    .menu_content {margin: 0 auto; width: 1000px; color: #FFF; }

    .content { position: relative; width: 1000px; height: 300px; margin: 30px auto; border-radius: 4px;
        background-color: #FFF; box-shadow: 2px 2px 5px #A5A8AB; }

    .wrapper_navigation { float: left;  }

    .wrapper_options {  float: right; display: table; padding: 0 6px 0 6px; margin: 7px 12px 0 2px; }
    .wrapper_options p, .wrapper_options img { display: table-cell; vertical-align: middle;}

    .menu_list { display: table; text-align: center; vertical-align: middle; }

    .menu_li { display: inline-block; line-height: 54px; padding: 0 14px 0 14px; font-weight: bold; font-size: 90%;  }

    #li_option { padding: 2px; }

    #adminPhoto { }

    #adminName {  max-width: 200px; }

    .menu_li a { color: #FFF; }

    #navigation .menu_li:hover a {color: #000;}

    #navigation .menu_li:hover, .wrapper_options:hover { background-color:#FFF; color: #000;
        box-shadow: inset 0px 2px 2px #969696; }

</style>
</head>
<body>

<div id="bg_menu" class="bg">
            <header class="menu_content">
                <nav id="menu">
                    <div class="wrapper_navigation">
                        <ul id="navigation" class="menu_list">
                            <li class="menu_li"><a href="#">Veículos</a>

                            </li>
                            <li class="menu_li"><a href="#">Administração</a>

                            </li>
                            <li class="menu_li"><a href="#">Newsletter</a>

                            </li>
                            <li class="menu_li"><a href="#">Estatísticas</a>

                            </li>
                            <li class="menu_li"><a href="#">Manutenção</a>

                            </li>
                        </ul>
                    </div>
                    <div class="wrapper_options">

                                <img id="adminPhoto" src="${admin.img}" width="40px" height="40px" alt="Foto do Administrador" />
                                <p id="adminName">${admin.fullName}</p>

                    </div>
                </nav>
            </header>
        </div>

        <div id="bg_content" class="bg">
            <div class="content">

            </div>

        </div>

</body>
</html>
于 2013-06-08T02:54:55.300 回答