如何将一个 li 向右对齐并从中下拉列表？

Question

所以我是一个网络初学者designer/programmer，我只是想做一些东西来学习自己CSS和HTML（和JavaScript），但我似乎将 'Archive' 对齐到列表右侧、搜索框下方并使下拉列表显示在菜单下方 class 和 'over' 主要内容区域下方时出现问题。我试过将它浮动，但列表元素只是 'floated' 比其他元素高一点。另外，当我将鼠标悬停在主列表上方时

如果您喜欢，请对网页的外观和感觉以及我可以进一步做的事情提出一些建议。
这是菜单的CSS：

.menu {
    margin-left: 10px;
}

.menu ul li{
    display: inline-block;
    transition: all 0.3s;
}

.menu ul li ul {
    display: none;
    opacity: 0;
}

.menu ul li ul li {
    float: right;
}

.menu ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

.menu ul li ul li a:hover {
    background-color: #333;
}

.menu ul li:hover {
    background-color: #333;
}

.menu ul li a {
    color: #fff;
    display: inline-block;
    padding: 5px;
    margin: 2px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

Answer 1

最后一里用这个css

.menu ul li:last-child{
    float:right;
  text-align: right;
  display:inline;
}

在此处查看更新：http://codepen.io/anon/pen/QwYKBq

Answer 2

HTML

<html>
<header>
<title></title>
<link rel="stylesheet" href="css/main.css" />
<link rel="stylesheet" href="" />
<meta charset="utf-8">

<!--- Fontene brukt på nettstedet -->
<link href='http://fonts.googleapis.com/css?family=Open+Sans:300italic,400,600,300,700' rel='stylesheet' type='text/css'>
<meta>
</header>
<body>
  <div class="wrapper">
    <div class="innerWrapper">
      <div id="header">
        <a href="#">Test<span>Page</span></a>
        <form action="" autocomplete="off">
          <input type="text" value="Search..." id="search" style="padding: 3px; color:#666"></input>
          <input type="button" value="Go!" style="display:none; padding: 3px;" id="searchBtn"></input>
        </form>
      </div>

<!--- 686px is min-width for desktop and tablet -->
    <div class="menu">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">About</a></li>

      </ul>
      <ul class="rigthUL">
      <li>
          <a href="#" id="menu-item-left">Archive &or;</a>
          <ul class="underMenu">
            <li><a href="#">December</a></li>
            <li><a href="#">January</a></li>
            <li><a href="#">February</a></li>
            <li><a href="#">March</a></li>
            <li><a href="#">April</a></li>
          </ul>
        </li>
      </ul>
    </div>

  <div class="container-big">
    <div class="blogPost generalBox">
      <h2>blogTest</h2>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repudiandae, culpa dolorem veritatis, incidunt nobis quae fugiat. Ex architecto illo soluta obcaecati in cumque, est voluptas earum voluptatibus aliquid sequi neque! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officiis, quasi recusandae eius illum nisi, reprehenderit accusamus nam molestias blanditiis consequuntur, quisquam! Quibusdam fuga tenetur unde, neque repellendus, quae error sint?
      </p>
    </div>
  </div>

  </div>
  </div>
  </div>
  <script src="js/main.js"></script>
  <script></script>
  </body>
</html>

CSS

.rigthUL {
  position: absolute;
  right: 203px; \adjust according to your Page
  top: 50px;
  text-align: right;
}
.menu ul li ul {
  display: none;
  opacity: 0;
  z-index: 10;
  position: fixed;
  right: 203px;
  top: 85px;
  background-color:grey;
}

DEMO

Answer 3

这样试试：Demo

HTML:

<div class="menu clearfix">
 <div class="image-left">
  <ul>
   <li><a href="#">Home</a></li>
   <li><a href="#">Contact</a></li>
   <li><a href="#">Work</a></li>
   <li><a href="#">About</a></li>
  </ul>
 </div>
 <div class="image-right">
  <ul>
   <li><a href="#" id="menu-item-left">Archive &or;</a>...</li>
  </ul>
 </div>
</div>

CSS:

.clearfix:after {
    clear: both;
    content: ".";
    display: block;
    height: 0;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}
.clearfix {
    display: block;
}

如何将一个 li 向右对齐并从中下拉列表？

How do I align one li to the right and have a dropdown list down from it?

html

javascript

css

web