html - 向右移动下拉菜单 - CSS

Question

我想将下拉菜单栏移到右侧。

我尝试了右对齐和文本对齐:右对齐，结果菜单向右移动，但下拉菜单没有。

现在我有以下下拉菜单，但在左侧:

使用以下 CSS:

#headermenu {
}
#headermenu a:hover, #headermenu a:active, #headermenu a:focus, #headermenu a.thispage {
color: #39729B;
}
#headermenu ul {
padding:0;
list-style: none;
position: relative;
display:block;
}   
#headermenu ul li {
float:left;
display:list-item;
list-style: none; 
}
#headermenu ul li a {
display:block;
padding:5px;    
color:#FFFFFF;
text-decoration: none;
width: 70px;
text-align: center;
border-color: #39729B;
border-width: thin;
border-right-style: solid;
background-color: #062134;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ''; } 
li > a:only-child:after { content: ''; }    
/* The Dropdown Styles */
/* =================== */

/* Hide Dropdowns by Default */
#headermenu ul ul {
display: none;
position: absolute;
}
/* Display Dropdowns on Hover */
#headermenu ul li:hover > ul {
display:list-item;
}   
/* Fisrt Tier Dropdown */
#headermenu ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}

<div id="headermenu">
  <ul>
    <li><a href="../About.html">About</a></li>
    <li><a href="../JobsMainpage.php" class="this">Jobs</a>
    <!-- First Tier Drop Down -->
    <ul class="lol">
        <li><a href="../Jobs.php">Available Jobs</a></li>
        <li><a href="../MyJobs.php">My Jobs</a></li>
        <li><a href="../PostJob.php">Post Job</a></li>
        <li><a href="../MyPage.php">My Page</a></li>
    </ul>        
    </li>
    <li><a href="../index.php?logout">Log out</a></li>
    <!-- First Tier Drop Down -->
  </ul>
</div>

如何将带有下拉菜单的菜单移动到页面右侧？

Answer 1

在#headermenu css中添加float: right;，如下图:

#headermenu {
    float: right;
}
#headermenu a:hover, #headermenu a:active, #headermenu a:focus, #headermenu a.thispage {
color: #39729B;
}
#headermenu ul {
padding:0;
list-style: none;
position: relative;
display:block;
}   
#headermenu ul li {
float:left;
display:list-item;
list-style: none; 
}
#headermenu ul li a {
display:block;
padding:5px;    
color:#FFFFFF;
text-decoration: none;
width: 70px;
text-align: center;
border-color: #39729B;
border-width: thin;
border-right-style: solid;
background-color: #062134;
}
/* Change this in order to change the Dropdown symbol */
li > a:after { content: ''; } 
li > a:only-child:after { content: ''; }    
/* The Dropdown Styles */
/* =================== */

/* Hide Dropdowns by Default */
#headermenu ul ul {
display: none;
position: absolute;
}
/* Display Dropdowns on Hover */
#headermenu ul li:hover > ul {
display:list-item;
}   
/* Fisrt Tier Dropdown */
#headermenu ul ul li {
width:170px;
float:none;
position: relative;
border-bottom:none;
}

<div id="headermenu">
  <ul>
    <li><a href="../About.html">About</a></li>
    <li><a href="../JobsMainpage.php" class="this">Jobs</a>
    <!-- First Tier Drop Down -->
    <ul class="lol">
        <li><a href="../Jobs.php">Available Jobs</a></li>
        <li><a href="../MyJobs.php">My Jobs</a></li>
        <li><a href="../PostJob.php">Post Job</a></li>
        <li><a href="../MyPage.php">My Page</a></li>
    </ul>        
    </li>
    <li><a href="../index.php?logout">Log out</a></li>
    <!-- First Tier Drop Down -->
  </ul>
</div>