时间戳

首页 > 解决方案 > 嵌套列表不会出现在悬停css中

html - 嵌套列表不会出现在悬停css中

问题描述

我尝试了很多次来处理嵌套列表，但它出现在页面中间而不是在其父级之下。也不会出现使用悬停。我试过了，但没有任何效果。下面是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;

}

此致

标签： htmlcss

解决方案

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>

推荐阅读