Html 子列表父级中的CSS菜单布局
我一直在利用我的空闲时间来提高我的HTML知识在我的假期 在我设计CSS菜单的时候。我面临一些问题,不知道如何解决 我试着从谷歌上搜索。因为我的英语不好,我找不到解决办法,所以我在这里寻求帮助 问题: 我试图设计一个带有可扩展子菜单的CSS菜单。 为什么子菜单的父列表没有更改 正如你从截图上看到的。产品菜单与其他菜单不同 有什么解决办法吗 屏幕截图 由于我的声誉,我无法提供截图,因此我将提供一个链接: CSS3编码Html 子列表父级中的CSS菜单布局,html,css,Html,Css,我一直在利用我的空闲时间来提高我的HTML知识在我的假期 在我设计CSS菜单的时候。我面临一些问题,不知道如何解决 我试着从谷歌上搜索。因为我的英语不好,我找不到解决办法,所以我在这里寻求帮助 问题: 我试图设计一个带有可扩展子菜单的CSS菜单。 为什么子菜单的父列表没有更改 正如你从截图上看到的。产品菜单与其他菜单不同 有什么解决办法吗 屏幕截图 由于我的声誉,我无法提供截图,因此我将提供一个链接: CSS3编码 body{ position: relative; heigh
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
li#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
ul li {
list-style: none;
}
li {
margin: 5px 0 0 0;
}
ul#expList li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url(border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul#expList li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
<ul id="expList">
<li class="home"><a href="">Home</a></li>
<li class="freebies">Product
<ul>
<li><a href="">List 1</a></li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a></li>
</ul>
</li>
<li class="about"><a href="">Register</a></li>
<li class="about"><a href="">About Us</a></li>
</ul>
HTML编码
body{
position: relative;
height: 100%;
background: -webkit-gradient(linear, left top, left bottom, from(#ccc), to(#fff));
}
.navbox {
position: relative;
float: left;
}
ul#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
li#expList {
list-style: none;
display: block;
width: 200px;
position: relative;
padding: 60px 0 60px 0;
background: url(shad2.png) no-repeat;
-webkit-background-size: 50% 100%;
}
ul li {
list-style: none;
}
li {
margin: 5px 0 0 0;
}
ul#expList li a {
-webkit-transition: all 0.3s ease-out;
background: #cbcbcb url(border.png) no-repeat;
color: #174867;
padding: 7px 15px 7px 15px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-right-radius: 10px;
width: 100px;
display: block;
text-decoration: none;
-webkit-box-shadow: 2px 2px 4px #888;
}
ul#expList li a:hover {
background: #ebebeb url(border.png) no-repeat;
color: #67a5cd;
padding: 7px 15px 7px 30px;
}
<ul id="expList">
<li class="home"><a href="">Home</a></li>
<li class="freebies">Product
<ul>
<li><a href="">List 1</a></li>
<li><a href="">List 2</a></li>
<li><a href="">List 3</a></li>
</ul>
</li>
<li class="about"><a href="">Register</a></li>
<li class="about"><a href="">About Us</a></li>
</ul>
- 产品
只是因为你赋予了
只是因为你赋予了
谢谢你,乌塔拉。你解决了我的问题。但在我加入产品内部之后。列表1、列表2和列表3无法展开显示。谢谢您。你解决了我的问题。但在我加入产品内部之后。列表1、列表2和列表3无法展开显示。我用CSS和CSS3重新标记了您的问题。我用CSS和CSS3重新标记了您的问题。