Question

我使用HTML和CSS制作了一个下拉导航。当我尝试将导航向右浮动时，它既不起作用，也不会搞砸我在导航栏顶部和底部的边框。其他一切都很好，所以我不知道我错过了什么！任何帮助将不胜感激!!!

http://moses0613.aisites.com/portfolio/default.php

HTML：

<nav>
<ul id="menu">
    <li><a href="default.php">Home</a></li>
    <li><a href="about.php">About</a>
        <ul>
        <li><a href="resume.php">My Resume</a></li>
        </ul></li>
    <li><a href="pastwork.php">Past Work</a>
        <ul>
        <li><a href="print.php">Print Designs</a></li>
        <li><a href="web.php">Web Designs</a></li>
        </ul></li>
    <li><a href="services.php">Services</a>
        <ul>
        <li><a href="webdesign.php">Website Design</a></li>
        <li><a href="blog.php">Blog Design</a></li>
        <li><a href="logo.php">Logo Design</a></li>
        <li><a href="marketing.php">Marketing Materials</a></li>
        </ul></li>
    <li><a href="contact.php">Contact</a></li>
    <li><a href="specialthanks.php">Special Thanks</a></li>
</ul>
</nav><!--ends navigation-->

CSS：

nav {
    width: 100%;
    max-width: 800px;
    font-size: 16px; 
    border-top: 2px solid #C70D7D;
    border-bottom: 2px solid #C70D7D;
    margin-bottom: 2%;
}

nav ul {
    height: 35px;
    list-style: none;
    margin: 0;
    padding: 0;
}

nav li {
    float: left;
    padding: 0px;
}

nav li a {
    background: #000;
    display: block;
    font-weight: normal;
    line-height: 35px;
    margin: 0px;
    padding: 0px 25px;
    text-align: center;
    text-decoration: none;
}

nav > ul > li > a {
    color: #ffffff;
}

nav ul ul a {
    color: #ffffff;
}

nav li > a:hover,
nav ul li:hover > a {
    background: #c70d7d;
    color: #FFFFFF;
    text-decoration: none;
}

nav li ul {
    background: #000;
    display: none;
    height: auto;
    padding: 0px;
    margin: 0px;
    border: 2px solid #C70D7D;
    position: absolute;
    width: 10%;
    z-index: 200;
}

nav li:hover ul {
    display: block;
}

nav li li {
    display: block;
    float: none;
    margin: 0px;
    padding: 0px;
    width: 225px;
}

nav li:hover li a {
    background: none;
}

nav li ul a {
    display: block;
    height: 35px;
    font-size: 14px;
    font-style: normal;
    margin: 0px;
    padding: 0px 10px 0px 15px;
    text-align: left;
}

nav li ul a:hover,
nav li ul li:hover > a {
    border: 0px;
    color: #ffffff;
    text-decoration: none;
}

Answer 1

更改

nav li {
    float: left;
    padding: 0px;
}

到

nav li {
    float: right;
    padding: 0px;
}

并反转html

中导航项目的顺序

无法将导航向右移动

1 个答案: