html - Css 导航菜单文本

标签 html css

我是 Stackoverflow 的新手,只想构建简单的 CSS 导航菜单。如何将这些元素从左到右对齐,并在鼠标焦点上创建子元素?

<html>

<head>
    <title>Test App</title>
    <style>
    li{
        list-style:none;
    }
    ul{
        background-color: green;
    }
    </style>
</head>

<body>
    <ul>
        <li>
            George
        </li>

        <li>
            Belly
        </li>

        <li>
            Mac
        </li>
    </ul>
</body>

</html>

最佳答案

这些是 CSS 背后非常基本的思想,所以我不会解释它们。希望这能让你开始。

.nav {
  list-style-type: none;
}
.nav li {
  display: inline-block;
  height:55px;
  box-sizing:border-box;
  text-align:center;
  line-height:15px;
  padding:20px 10px;
}
.nav li:hover{
  background-color:darkgreen;
  }
<html>

<head>
  <title>Test App</title>
  <style>
    li {
      list-style: none;
    }
    ul {
      background-color: green;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>
      George
    </li>

    <li>
      Belly
    </li>

    <li>
      Mac
    </li>
  </ul>
</body>

</html>

关于html - Css 导航菜单文本,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40326200/

相关文章:

javascript - 使用 Javascript 增加 Div 使其像进度条一样工作

html - 跨度内的 CSS 样式异常?

html - Flexbox - 如何创建这种布局

javascript - 只有一个复选框被 div 勾选了可能性复选框

Android字符串编码和html实体转换

css - 可接受的 CSS 修改/修复

html - 溢出 :scrol doesn't show the scroll

html - 如何在圆的边缘放置图标

jquery - 抓取 div 的 bg-color 并使用 jquery 应用于另一个

html - 如何在 wordpress 中的每个类别中只显示两个帖子?