-2 
<header >
    <nav id = "nav_main">
        <ul>
            <li><a href="#">Company</a></li>
            <li><a href="#">News</a></li>
            <li><a href="#" id = "nav_project">Project</a>
                <ul>
                    <li><a href="#">Web Design</a></li>
                    <li><a href="#">User Experience</a></li>
                </ul>
            </li>
            <li><a href="#">Service</li>
            <li><a href="#">Help</a></li>
        </ul>
    </nav>
</header>


    header{
        background: #f37124;
    }

    #logo{

        margin:0 auto; display:block; 
    }

    #nav_main{
        background: #f37124;
        height: 51px;
        text-align: center; 
        margin:0 auto ;
        position:relative; 
        font:16px Tahoma, Sans-serif;
    }

    #main_img{
        margin:0 auto; 
        display:block;
    }
    a{
        text-decoration: none; 
    }




    nav ul ul {
        display: none;
    }

        nav ul li:hover > ul {
            background: #f37124;                
            display: block;
            margin: 10px;


        }




    nav ul {
        background: #f37124;
        list-style: none;
        position: static;
        display: block;
        padding-top: 15px;
    }
        nav ul:after {
            content: ""; 
            clear: both; 
            display: block;
        }


    nav ul li {
        float: left;
        position: relative;
        left: 50%;
        margin-left: 10px;
        margin-right: 10px;
    }
        nav ul li:hover {

        }
            nav ul li:hover a {
                                }

        nav ul li a {
            display: block; 
            /*padding: 25px 40px;*/
            color: #111111; 
            text-decoration: none;
            position: relative;

        }




    nav ul ul {
        background: #ffffff; 
        border-radius: 0px; 
        padding: 0px;
        position: absolute; 
        top: 100%;
    }
        nav ul ul li {
            float: none; 
            /*border-top: 1px solid #6b727c;*/
            position: relative;
        }
            nav ul ul li a {
                padding: 15px 40px;

            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

</style>

1.文本居中对齐

我想使文本居中。

我想在字符之间保持恒定的宽度。

2 右侧下拉菜单

悬停项目 ul 和下拉服务菜单，但我不能

应隔开。

你肯定出去了。

问题是保证金？？？或填充？

我找不到

4

2 回答 2

1

有点难以理解你在问什么，但我认为你是说你希望主要导航元素均匀分布，在那个单独的空间内居中？

尝试这个：

header
{
   background: #f37124;
}

#nav_main{
    background: #f37124;
    height: 51px;
    text-align: center; 
    margin:0 auto ;
    position:relative; 
    font:16px Tahoma, Sans-serif;
}


a{
    text-decoration: none; 
 }


nav ul ul {
    display: none;
}

nav ul li:hover > ul {
   background: #f37124;                
   display: block;
}

nav ul {
    background: #f37124;
    list-style: none;
    position: relative;
    display: block;
    padding-top: 15px;
}

nav ul li {
    float: left;
    position: relative;
    width: 20%;
}
nav ul li a {
   display: block; 
   color: #111111; 
   text-decoration: none;
   position: relative;
}

nav ul ul {
    background: #ffffff; 
    border-radius: 0px; 
    padding: 0px;
    position: absolute; 
    top: 100%;
}

nav ul ul li {
    float: none; 
    position: relative;
    width: auto;
}

nav ul ul li a {
     padding: 15px 40px;
}   

nav ul ul li a:hover {
    background: #4b545f;
}

此外，您缺少标签的关闭链接：

<li><a href="#">Service</li>应该<li><a href="#">Service</a></li>

JS 小提琴在这里：http: //jsfiddle.net/PzJnJ/

于 2013-10-15T10:37:53.640 回答
0

这就是我解决它的方法：

<style>
    header{
        background: #f37124;
    }
    #logo{

        margin:0 auto; display:block; 
    }
    #nav_main{
        background: #f37124;height: 51px;text-align: center;      margin:0 auto ;
        position:relative; 
        font:16px Tahoma, Sans-serif;
    }

    #main_img{
        margin:0 auto; 
        display:block;
    }
    a{
        text-decoration: none; 
    }




    nav ul ul {
        display: none;
    }

        nav ul li:hover > ul {
            background: none repeat scroll 0 0 #F37124;             display: block;             margin: 0;


        }




    nav ul {
        background: #f37124;
        list-style: none;
        position: static;
        display: block;
        padding-top: 15px;
    }
        nav ul:after {
            content: ""; 
            clear: both; 
            display: block;
        }


    nav ul li {
        float: left;
        position: relative;
        left: 50%;
        margin-left: 10px;
        margin-right: 10px;
    }
        nav ul li:hover {

        }
            nav ul li:hover a {
                                }

        nav ul li a {
            display: block; 
            /*padding: 25px 40px;*/
            color: #111111; 
            text-decoration: none;
            position: relative;

        }




    nav ul ul {
        background: #ffffff; 
        border-radius: 0px; 
        padding: 0px;
        position: absolute; 
        top: 100%;
    }
        nav ul ul li {
    float: left;
    left: 0;
    position: relative;
    text-align: left; }
            nav ul ul li a {
                   line-height: 4;
                padding: 0;

            }   
                nav ul ul li a:hover {
                    background: #4b545f;
                }

    nav ul ul ul {
        position: absolute; left: 100%; top:0;
    }

</style>
于 2013-10-15T10:46:37.427 回答