Question

HTML ：

<!DOCTYPE html> 
<html>
    <head>
        <title>Roohi Health Screnning</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <link rel="stylesheet" type="text/css" href="roohiSTYLE.css">

        <!-- IE6-8 support of HTML5 elements --> <!--[if it IE 9]>
        <script src="//html5shim.googlecode.com/svn/trunk/html5.js"><script>
        <![endif]-->


    </head>
    <body>

    <div>
        <header>
            <h1>Roohisd page<h1> 
        </header>
        <section>
        <!-- Content Starts Here -->
        <header>
            <h1>Welcome to My Site</h1>
        </header>


        <div id="logo">
        <img src="images/Roohi-logo2.png">
        </div>

        <nav id="navigation">
            <ul id="navMain">
                <li><a href="index.html">Home</a></li>
                <li class="currentPage"><a href="#"> Visit our site</a></li>
                    <li><a href="#">About us</a>

                        <ul>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Home</a></li>
                        </ul>
                    </li>

                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Home</a></li>
                        <li><a href="index.html">Home</a></li>
                </ul>
        </nav>





        <!-- Content Ends Here -->
        </section>

    </div>
    </body>
</html>

CSS ：

body {
    background-image: url('images/backgorund-roohi.jpg');
}
#navMain {
    list-style: none;
    font-family: tahoma;
    font-size: 12px;
    border: 1px #a81b2f solid;
    float: right: width:940px;
    margin: 0;
    padding: 0;
    border-radius: 5px;
    -moz-border-radius: 5px;
    4-webkit-border-radous: 5px;
}
#navMain > li {
    float: left;
    position: relative;
    border-right: 1px solid #9b2838;
}
#navMain > li > a {
    color: #f4e4e6;
    float: left;
    text-decoration: none;
    padding: 11px 18px;
    border-right: 1px solid #bf3549;
}
#navMain a {
    background: rgb(99, 20, 32);
    background: rgb(99, 20, 32, 0.25);
}
#navMain ul {
    display: none;
}
#navMain ul {
    display: none;
    position: absolute;
    list-style: none;
    left: 0;
    padding: 0;
    margin: 0;
    border-top: 1px #a81b2f solid;
    background#e8edee;
}
#navMain ul li a {
    color: 5d6364;
    text-decoration: none;
    display: block;
    padding: 6px 7px;
    border-bottom: 1px solid #d3d9da;
    border-left: 1px solid #d3d9da;
    border-right: 1px solid #d3d9da;
    font-size: 13px;
}
#navMain li:hover ul {
    display: block;
    top: 39px;
    min-width: 200px;
}

这是我的代码我想将菜单移到页面右上角。我该怎么做？

我希望菜单显示在右上角。菜单显示在底部，而不是我想要的右上角。

Answer 1

这是你在找什么？ http://jsfiddle.net/34tCu/

#navigation { position: absolute; top:0; right:0;}

请更具体，如果这不是您的想法。

我想将菜单栏移到右上角

1 个答案: