右对齐的下拉菜单内容    如果希望下拉菜单从右到左而不是从左到右，请添加 right: 0;：    实例 .dropdown-content {  right: 0;            更多实例    1 - 下拉式图像    如何在下拉框中添加图像和其他内容。    请把鼠标指针悬停在图像上：                2 - 下拉式导航    如何在导航栏中添加下拉菜单。    

   下拉式菜单    创建一个下拉菜单，并允许用户从列表中选择一个选项：    本例与上例相似，除了我们在下拉框内添加链接并为其设置了样式，以此匹配下拉按钮的样式：    实例 <style> /* 设置下拉按钮的样式 */ .dropbtn {  background-color: #4CAF50;  color: white;  padding: 16px;  font-size: 16px;  border: none;  cursor:

基础的下拉菜单

创建当用户将鼠标移到元素上时出现的下拉框。

实例

<style>
.dropdown {
  position: relative;
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  padding: 12px 16px;
  z-index: 1;
}
.dropdown:hover .dropdown-content {
  display: block;
}
</style>
<div class="dropdown">
  <span>Mouse over me</span>
  <div class="dropdown-content">
    <p>Hello World!</p>
  </div>
</div>

   CSS 下拉菜单    使用 CSS 创建可悬停的下拉列表。    演示：下拉式案例    实例    请把鼠标指针移动到下面的例子上：         .dropdown {  position: relative;  display: inline-block; } .dropspan {   width: 100%;   margin-top:5px;  } .dropdown-content {    display: n

   右对齐链接    通过将列表项向右浮动来右对齐链接（float:right;）：    实例 <ul>  <li><a href="#home">Home</a></li>  <li><a href="#news">News</a></li>  <li><a href="#contact&qu

水平导航栏实例

创建具有深色背景色的基础水平导航栏，并在用户将鼠标移到链接上方时改变链接的背景色：

实例

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
}
li {
  float: left;
}
li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}
/* 当鼠标悬停时把链接颜色更改为 #111（黑色） */
li a:hover {
  background-color: #111;
}

水平导航栏

   垂直导航居中链接以及添加边框，全高固定垂直导航栏    居中链接以及添加边框    把 text-align:center 添加到 <li> 或 <a>，使链接居中。    将 border 属性添加到 <ul>，在导航栏周围添加边框。如果您还希望在导航栏内添加边框，请为所有 <li> 元素添加 border-bottom，最后一个元素除外：    实例 ul {  border: 1px solid #555

垂直导航栏实例，活动/当前导航链接创建背景色为灰色的基础垂直导航栏，并在用户将鼠标移到链接上时改变链接的背景色：实例ul {   list-style-type: none;   margin: 0;   padding: 0;   width: 200px;   background-color: #f1f1f1; } li 

   CSS 垂直导航栏    垂直导航栏        如需构建垂直导航栏，除了上一章中的代码外，还可以在列表中设置 <a> 元素的样式：    实例 li a {  display: block;  width: 60px; }    例子解释：    display: block; - 将链接显示为块元素可以使整个链接区域都可以被单击（而不仅仅是文本），我们还可以指定宽度（如果需要，还可以指定内边距、外边距、高度等）。    w