如何在html中将多个下拉菜单移动到右侧？答案

【问题标题】：How to move multiple dropdown menu to right side in html?如何在html中将多个下拉菜单移动到右侧？
【发布时间】：2020-02-15 02:06:08
【问题描述】：

当我从根 ul 标记中删除左边距、边距和填充值到 0px 时所有菜单显示在左侧和下拉菜单大小匹配

我想将所有菜单和下拉菜单向右移动。我在根 ul 标记中使用 margin-left、margin: 15px 和 padding 15px 将菜单向右移动，它可以工作，但下拉菜单大小不匹配，请查看图片。

[本页输出][1]：https://i.stack.imgur.com/jLZnO.png

[期望输出][2]：https://i.stack.imgur.com/wvOLY.png

ul {
  margin: 15px;
  padding: 15px;
  list-style: none;
  margin-left: 50%;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: blue;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background-color: green;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<ul class="menu">
  <li> <a>sport</a>
    <ul>
      <li><a href="#">football</a> </li>
      <li><a href="#">soccer</a> </li>
      <li><a href="#">basketbal</a></li>
    </ul>
  </li>
  <li> <a>more info</a>
    <ul>
      <li><a href="#">#</a> </li>
      <li><a href="#"> #</a> </li>
      <li><a href="#">#</a></li>
    </ul>
  </li>

</ul>

【问题讨论】：

标签： javascript html css

【解决方案1】：

您只需要在 css 中的 ul 部分添加 float:right。还要删除margin-left: 65%;，因为它会使您的设计无响应，因为您的按钮具有固定宽度。

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  float: right;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: blue;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background-color: green;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<ul class="menu">
  <li> <a>sport</a>
    <ul>
      <li><a href="#">football</a> </li>
      <li><a href="#">soccer</a> </li>
      <li><a href="#">basketbal</a></li>
    </ul>
  </li>
  <li> <a>more info</a>
    <ul>
      <li><a href="#">#</a> </li>
      <li><a href="#"> #</a> </li>
      <li><a href="#">#</a></li>
    </ul>
  </li>

</ul>

【讨论】：

如果我在 ul 标签的根中给出 margin:15px 和 padding:15px 怎么样
我想我明白你的意思，但我不确定它是否适合响应式.. 你试过吗？
我试了很多次都没搞明白。为什么会这样

【解决方案2】：

这样试试

HTML

<!DOCTYPE html>  
    <html lang="en">
       <head>
          <title> sport </title>
          <link rel="stylesheet" href="sport.css">
       </head>
       <body>

            <ul class="menu">
                <li > <a>sport</a>
                    <ul>
                        <li ><a  href="#">football</a> </li>
                        <li ><a  href="#">soccer</a> </li>
                        <li ><a  href="#">basketbal</a></li>
                    </ul>
                </li>
                <li > <a>more info</a>
                    <ul>
                    <li ><a  href="#">#</a> </li>
                    <li ><a  href="#"> #</a> </li>
                    <li ><a  href="#">#</a></li>
                    </ul>
                </li>

            </ul>

       </body>
    </html>

css

ul{
    margin: 0px;
    padding: 0px;
    list-style: none;
}
ul li{
    width: 200px;
    height: 40px; 
    background-color:blue;
    opacity: .8;
    line-height: 40px;
    text-align: center;
    font-size: 20px;
    position: relative;

}
ul li ul{
  display:none;
  position:absolute;
  right:-200px;
  top:0;

}
ul li a{
    text-decoration: none;
    color: white;
    display: block;
}
ul li a:hover{
    background-color: green;
}
ul li:hover ul{
    display: block;
}

【讨论】：

如果我在 ul 标签的根中给出 margin:15px 和 padding:15px 怎么样
为什么要给 15px 的 tat？

【解决方案3】：

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  float:right;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: blue;
  opacity: .8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: block;
}

ul li a:hover {
  background-color: green;
}

ul li ul li {
  display: none;
}

ul li:hover ul li {
  display: block;
}

<html>
<head>
<style>
</style>
</head>
<body>

<ul class="menu">
  <li> <a>sport</a>
    <ul>
      <li><a href="#">football</a> </li>
      <li><a href="#">soccer</a> </li>
      <li><a href="#">basketbal</a></li>
    </ul>
  </li>
  <li> <a>more info</a>
    <ul>
      <li><a href="#">#</a> </li>
      <li><a href="#"> #</a> </li>
      <li><a href="#">#</a></li>
    </ul>
  </li>

</ul>

</body>
</html>

添加 ul 样式

ul{
    float: right;
  }

【讨论】：

如果我在 ul 标签的根中给出 margin:15px 和 padding:15px 怎么样
这将只是填充和边距到根 ul
它将像我在输出图片中一样显示输出。那么，有没有办法使下拉菜单大小相等
等于是什么意思？上述样式本身具有相同的。

【解决方案4】：

试试这个例子

HTML

 <ul class="menu">
      <li> <a>sport</a>
        <ul>
          <li><a href="#">football</a> </li>
          <li><a href="#">soccer</a> </li>
          <li><a href="#">basketbal</a></li>
        </ul>
      </li>
      <li> <a>more info</a>
        <ul>
          <li><a href="#">#</a> </li>
          <li><a href="#"> #</a> </li>
          <li><a href="#">#</a></li>
        </ul>
      </li>

    </ul>

CSS

  ul.menu {
        width: 200px;
    }
    ul.menu>li{
      position:relative;
    }
    ul {
      margin: 0px;
      padding: 0px;
      list-style: none;

    }

    ul li {
      float: right;
      width: 100%;
      height: 40px;
      background-color: blue;
      opacity: .8;
      line-height: 40px;
      text-align: center;
      font-size: 20px;
    }

    ul li a {
      text-decoration: none;
      color: white;
      display: block;
    }

    ul li a:hover {
      background-color: green;
    }

    ul li ul {
      display: none;
    }

    ul li:hover ul  {
      display: block;
      position:absolute;
      left: 200px;
      top: 0px;
      width:200px;
    }

【讨论】：

如果你想要免费的引导 HTML 主题、模板和代码片段。你可以去freebootstrapui.com网站

【解决方案5】：

使用这个 CSS：

    ul.menu{
        margin: 0px;
        padding: 0px;
        list-style: none;
        margin-left:65%;
    }
    ul.menu li{
        float: left;
        width: 200px;
        height: 40px; 
        background-color:blue;
        opacity: .8;
        line-height: 40px;
        text-align: center;
        font-size: 20px;

    }
    ul li a{
        text-decoration: none;
        color: white;
        display: block;
    }
    ul li a:hover{
        background-color: green;
    }
    ul li ul li{
        display: none;
    }
    ul li:hover ul li{
        display: block;
    }
    li {
        position: relative;
    }
    li ul {
        position: absolute;
        left: 0;
        margin: 0;
        padding: 0;
        display: block;
        width: inherit;
    }

【讨论】：