个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-30 10:05:51 26 4
gpt4 key购买 nike

这是网页:http://codepen.io/anon/pen/QwYKQM

所以我是一个初学者网页设计师/程序员，我只是想做一些东西来学习自己的 CSS 和 HTML(和 JavaScript)，但我似乎无法将“存档”对齐到列表的右侧，在搜索框下方，并使下拉列表出现在菜单类下方和主要内容区域“上方”。我试过将其正确 float ，但列表元素只是“ float ”在其他元素之上一点。此外，当我将鼠标悬停在主列表上方时

如果您喜欢，请对网页的外观和感觉以及我可以进一步做些什么提出一些建议。
这是菜单的 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);
}

最佳答案

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

关于javascript - 如何将一个 li 向右对齐并从中下拉列表？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/29229922/

26 4 0
文章推荐： javascript - 将简单数组转换为对象数组
文章推荐： java - 在@Before 之外使用@InjectMocks
文章推荐： java - 根据枚举参数选择 Spring bean
文章推荐： xcode - 无法将类型 'UInt32!' 的值转换为预期参数类型 'UIFontDescriptorSymbolicTraits'
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com