文章/答案/技术大牛

发布

问HTML放下移动所有东西
EN

Stack Overflow用户

提问于 2019-01-06 16:28:48

回答 2查看 49关注 0票数 1

html,body
{

  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

li {
  float: right;
}

li a {

  display: block;
  color: white;
  text-align: center;
  padding: 28px 32px;
  text-decoration: none;
}
li h1
{
  position: relative;
  color: white;

  right: 550px;
}

li a:hover {
  background-color: #111;
}

h1
{
  color: Green;
  font-family: "Alex Brush"; font-size: 26px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Marie-Claude</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
  </head>
  <body>
    <nav>
      <ul>
        <li><a href="home_fr.html">Francais</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About Me</a></li>
          <ul>
            <li> CV</li>
          </ul>  
        <li><a href="#">Home</a></li>
        <li><h1 style="color:#C0C0C0">Marie-Claude Brossard</h1> </li>
      </ul>
    </nav>
  </body>
</html>

如您所见，ul li正在移动所有东西(如果您从代码中删除它，网站看起来很好)，我如何修复它，并得到下拉菜单，谢谢！

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2019-01-06 17:09:45

html,body
{

  margin: 0;
  padding: 0;
}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: red;
  min-width: 160px;
  padding: 12px 16px;
  z-index: 1;
}

li:hover .dropdown-content {
  display: block;
}
li {
  float: right;
}

li a {

  display: block;
  color: white;
  text-align: center;
  padding: 28px 32px;
  text-decoration: none;
}
li h1
{
  position: relative;
  color: white;

  right: 550px;
}

li a:hover {
  background-color: #111;
}

h1
{
  color: Green;
  font-family: "Alex Brush"; font-size: 26px;
}

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Marie-Claude</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href='https://fonts.googleapis.com/css?family=Alex Brush' rel='stylesheet'>
  </head>
  <body>
    <nav>
      <ul class ="dropdown">
        <li><a href="home_fr.html">Francais</a></li>
        <li><a href="#">Links</a></li>
        <li><a href="#">Contact</a></li>
        <li><a href="#">About Me</a>
          <div class="dropdown-content">
  <ul><li>Something</li></ul>
  </div>
        </li>
         
        <li><a href="#">Home</a></li>
        <li><h1 style="color:#C0C0C0">Marie-Claude Brossard</h1> </li>
      </ul>
    </nav>
  </body>
</html>

票数 1

Stack Overflow用户

发布于 2019-01-06 16:59:50

这个怎么样？

如果您想要菜单中的子菜单，ul标记必须在li标记本身内。

 <ul>
     <li><a href="home_fr.html">Francais</a></li>
     <li><a href="#">Links</a></li>
     <li><a href="#">Contact</a></li>
     <li><a href="#">About Me</a>
       <ul>
         <li> CV</li>
       </ul></li>
     <li><a href="#">Home</a></li>
     <li><h1 style="color:#C0C0C0">Marie-Claude Brossard</h1> </li>
   </ul>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/54063572

复制

相似问题

问HTML放下移动所有东西
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML放下移动所有东西EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问HTML放下移动所有东西
EN