Question

我是html和css的新手。我在youtube上关注了一个教程。这完全是关于导航栏和html和css中的下拉。

当我将鼠标悬停在“支持”选项中时，应显示Ria，Kezia和Gelia这个名称。

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}

＆＃13;

<div id="container">
  <ul>
    <li>Support</li>
    <ul>
      <li>Ria</li>
      <li>Kezia</li>
      <li>Gelia</li>
    </ul>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>

＆＃13;

Answer 1

将CSS样式添加到下拉按钮并尝试此代码。

<head>
<style>
*{
    margin:0px;
    padding:0px;
}
#container ul{
    list-style:none;    /*This will remove the bullet*/
}

#container ul li{
    background-color:#3C4794;   /*Adds a back-color.*/
    width:150px;
    border:1px solid white;
    height:50px;
    line-height:50px;
    text-align:center;  /*Show the text in the middle*/
    float:left;
    color:white;    /*Font color*/
    font-size:18px;
}

#container ul li:hover {
    background-color:#388222;   /*Change the color when hovering the mouse.*/
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    top:50px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

</style>
</head>
<body>
    <div id="container">
        <ul>

            <li>
                <div class="dropdown">
                    <ul>
                        <li>Support</li>
                    </ul>

                    <div class="dropdown-content">
                            <ul>
                                    <li>Ria</li>
                                    <li>Kezia</li>
                                    <li>Gelia</li>
                                </ul>
                    </div>
                  </div>
            </li>

            <li>CCD</li>
            <li>Scanning</li>
            <li>Claims</li>
        </ul>
</body>

Answer 2

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}

#container ul li ul {
  display: none;
  z-index: 100;
  position: relative;
}

#container ul li:hover ul {
  display: block;
}

＆＃13;

<div id="container">
  <ul>
    <li>Support
      <ul>
        <li>Ria</li>
        <li>Kezia</li>
        <li>Gelia</li>
      </ul>
    </li>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>
</div>

＆＃13;

Answer 3

您需要将子菜单放在li元素中并通过CSS隐藏它，然后如果您希望该子菜单在悬停时显示，则可以为伪类编写样式

所以，首先你需要在li中移动内部ul元素，如：

        <li>Support
            <ul>
                <li>Ria</li>
                <li>Kezia</li>
                <li>Gelia</li>
            </ul>
        </li>

此外，您需要设置正确的样式。

li需要有位置：相对，这是让内部ul元素占据正确的位置
内部ul应默认状态隐藏，并在父元素上悬停时出现;

这种风格应该有所帮助：

ul > li {
  position: relative;
}

li > ul {
  display: none;
  bottom: 0;
  left: 0;
}

li:hover > ul {
  display: block
}

Answer 4

您必须为下拉列表添加一些css属性。这里你的代码已被编辑

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the 
        mouse.*/
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute; 
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}

＆＃13;

<div id="container">
  <ul>
    <li class="dropdown">Support
      <ul class="dropdown-content">
        <li>Ria</li>
        <li>Kezia</li>
        <li>Gelia</li>
      </ul>
    </li>
    <li>CCD</li>
    <li>Scanning</li>
    <li>Claims</li>
  </ul>

＆＃13;

这里我在你的风格中添加了一些css代码，并在你的html元素中添加了一些clss

.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;
}

Answer 5

你可以这样做：

＆＃13;

* {
  margin: 0px;
  padding: 0px;
}

#container ul {
  list-style: none;
  position:absolute;
  /*This will remove the bullet*/
}

#container ul li {
  background-color: #3C4794;
  /*Adds a back-color.*/
  width: 150px;
  border: 1px solid white;
  height: 50px;
  line-height: 50px;
  text-align: center;
  /*Show the text in the middle*/
  float: left;
  color: white;
  /*Font color*/
  font-size: 18px;
}

#container ul li:hover {
  background-color: #388222;
  /*Change the color when hovering the mouse.*/
}
#sub {
  display: none;
}
#container ul li:hover #sub {
    display: block;
}

＆＃13;

    <div id="container">
        <ul>
            <li>Support
                <ol id="sub">
                    <li>Ria</li>
                    <li>Kezia</li>
                    <li>Gelia</li>
                </ol>
            </li>
            <li>CCD</li>
            <li>Scanning</li>
            <li>Claims</li>
        </ul>        
     </div>

＆＃13;

JSFiddle

Old JSFiddle (with JS)

我没有看到下拉李

5 个答案: