Question

我知道像这样制作一个导航栏

http://rj-va.uphero.com/Screen%20Shot%202014-08-20%20at%202.59.38%20PM.png

但是我有这个

http://rj-va.uphero.com/Screen%20Shot%202014-08-20%20at%202.59.54%20PM.png

我使用的代码是

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Untitled Document</title>
<style>
/*Initialize*/

ul#menu{
    background:url(http://rj-va.uphero.com/lib/skins/crystal1/images/navbg.jpg) no-repeat;
    width:627px;
    height:55px;
}


#menu ul.sub-menu li a{
    background:url(http://rj-va.uphero.com/lib/skins/crystal1/images/ul.jpg) no-repeat;
    width:98px;
    height:25px;
    padding:0px;
    display:block;
/*  background:#202224;
    width:98px;
    height:25px;
    border-bottom: 2px #161719 solid;*/
}



ul#menu li a{
    color:#b1b0af;
}

ul#menu, ul#menu ul.sub-menu {
    padding:0;
    margin: 0;
}
ul#menu li, ul#menu ul.sub-menu li {
    list-style-type: none;
    display: inline-block;
}
/*Link Appearance*/
ul#menu li a, ul#menu li ul.sub-menu li a {
    text-decoration: none;
    padding:5px;
    display:inline-block;
}
/*Make the parent of sub-menu relative*/
ul#menu li {
    position: relative;
}
/*sub menu*/
ul#menu li ul.sub-menu {
    display:none;
    position: absolute;

    left: 0;
}
ul#menu li:hover ul.sub-menu {
    display:block;
    padding-top:17px;
}

#menu ul.sub-menu {
    width:98;
    height:25px;
}
#menu img{
    display:inline-block;
}
</style>
</head>

<body>
<ul id="menu">
    <li>
        <a href="#"><img src="http://rj-va.uphero.com/lib/skins/crystal1/Home.png"/>Home</a>
    </li>
    <li><a href="#">Rja-Info</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
            <li>
                <a href="#">Sub Menu 3</a>
            </li>
            <li>
                <a href="#">Sub Menu 4</a>
            </li>
             <li>
                <a href="#">Sub Menu 5</a>
            </li>
        </ul>
    </li>
    <li><a href="#">Rules</a>

    </li>
    <li><a href="#">Top's</a>

        <ul class="sub-menu">
            <li>
                <a href="#">Sub Menu 1</a>
            </li>
            <li>
                <a href="#">Sub Menu 2</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Flight op's</a>
        <ul class="sub-menu">
         <li>
                <a href="#">Sub Menu 1</a>
            </li>
              <li>
                <a href="#">Sub Menu 2</a>
            </li>
              <li>
                <a href="#">Sub Menu 3</a>
            </li>
              <li>
                <a href="#">Sub Menu 4</a>
            </li>
        </ul>
    </li>
    <li>
        <a href="#">Admin</a>
    </li>
    <li>
        <a href="#">Log Out</a>
    </li>
</ul>
</body>
</html>

所以请帮帮我

我使用了2张图片

rj-va.uphero.com/lib/skins/crystal1/images/navbg.jpg
rj-va.uphero.com/lib/skins/crystal1/images/ul.jpg

尺寸是 1.导航栏宽度627px X 55px 2. ul宽度98px X 23px

Answer 1

您的链接比背景框更高，因此请将其设置为：

#menu ul.sub-menu li a{ height:13px }

..而不是25px

Css下拉导航栏菜单

1 个答案: