Question

我尝试了很多次来处理嵌套列表，但是它出现在页面的中间而不是其父列表的下方。使用悬停也不会出现。我尝试了一个尝试，但没有用。下面是html和CSS。我应该使用什么边距和头寸？悬停有什么问题？

<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>

<body>
<div id="header">
    <img height="200px "  width="200px" src="logo.jpg">
    <h1> Life Clinck
    </h1>
<hr>

</div>

<nav class="navClass">
<ul>
<li> <a href="">map </a></li>


        <li> <a href=""> apponintment</a></li>
        <li>  <a href="">contact </a></li>
        <li> <a href=""> clincks  </a> </li>
                <ul class="submenu">
            <li> <a href=""> 1</a> </li>
                <li> <a href="">2</a></li>
                <li> <a href=""> 3 </a></li>
                <li><a href=""> 4 </a></li>
                <li> <a href="">5 </a></li>                
</ul>               
</ul>
</nav>
</body>
</html>

这是CSS代码

body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;

}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;

}
h1{

text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{

list-style: none;

}
.navClass > ul > li{ 

padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}

ul.submenu{


list-style: none;
margin-left: -10px;
display: none;
}



ul.submenu > li{
font-family: "Tahoma";
}


.navClass li:hover 
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;

}

最好的问候

Answer 1

body {
background-image: linear-gradient(to top, #c1dfc4 0%, #deecdd 100%);
text-align: center;

}
#header {
background: #FFFFFF;
width: 100%;
height:280px;
margin: 0px auto;

}
h1{

text-align: center;
font-family: "Times new Romans";
font: 28pt;
color:#CC0000;
}
hr
{
color: #dfcaca;
height:10pt;
width: 100%;
}
.navClass > ul{

list-style: none;

}
.navClass > ul > li{ 

padding: 5px 25px;
display: inline-block;
position: relative;
}
a {
text-decoration: none;
}

ul.submenu{


list-style: none;
margin-left: -10px;
display: none;
}



ul.submenu > li{
font-family: "Tahoma";
}


.navClass li:hover 
{
background: #FFFFFF;
left: 0;
}
.navClass li:hover .submenu {
display: block;

}

<html>
<head>
<title> Life Clinck </title>
<link href="style.css" type="text/css" rel="stylesheet" >
</head>

<body>
<div id="header">
    <img height="200px "  width="200px" src="logo.jpg">
    <h1> Life Clinck
    </h1>
<hr>

</div>

<nav class="navClass">
<ul>
<li> <a href="">map </a></li>


<li> <a href=""> apponintment</a></li>
<li>  <a href="">contact </a></li>
<li> <a href=""> clincks  </a> 
    <ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
        <li> <a href=""> 1</a> </li>
        <li> <a href="">2</a></li>
        <li> <a href=""> 3 </a></li>
        <li><a href=""> 4 </a></li>
        <li> <a href="">5 </a></li> 
    </ul>
</li>
                    
</ul>
</nav>
</body>
</html>

移动li内的嵌套ul使其起作用。看到片段... 看到下面的更改...

<li> <a href=""> apponintment</a></li>
<li>  <a href="">contact </a></li>
<li> <a href=""> clincks  </a> 
    <ul class="submenu"> /*---> Moved this ul inside upper li, and done...*/
        <li> <a href=""> 1</a> </li>
        <li> <a href="">2</a></li>
        <li> <a href=""> 3 </a></li>
        <li><a href=""> 4 </a></li>
        <li> <a href="">5 </a></li> 
    </ul>
</li>

Answer 2

您需要将<ul>放在父<li>内。

赞：

<ul>
<li>test</li>
<li>test
  <ul>
    <li>sub-item</li>
    <li>sub-item</li>  
  </ul>  
</li>
<li>test</li>
<ul>

嵌套列表未显示在悬停CSS

2 个答案: