[英]css styling not rendering properly, possible div issue?
I'm trying to make a horizontal menu layout in CSS.我正在尝试在 CSS 中制作水平菜单布局。 I was using the guide listed here: http://www.devinrolsen.com/pure-css-horizontal-menu/
我正在使用此处列出的指南: http://www.devinrolsen.com/pure-css-horizontal-menu/
I've got a css file looking like this, called navigation.css:我有一个看起来像这样的 css 文件,名为 navigation.css:
.navigation{
width:100%;
height:30px;
background-color:lightgray;
}
.navigation ul {
margin:0px;
padding:0px;
}
.navigation ul li {
display:inline;
height:30px;
float:left;
list-style:none;
margin-left:15px;
}
.navigation li a {
color:black;
text-decoration:none;
}
.navigation li a:hover {
color:black;
text-decoration:underline;
}
.navigation li ul {
margin:0px;
padding:0px;
display:none;
}
.navigation li:hover ul {
display:block;
width:160px;
}
.navigation li li{
list-style:none;
display:block;
}
and in my actual php page, I have this在我实际的 php 页面中,我有这个
<div class="navigation">
<ul>
<li>
<a href="#">something</a>
<ul>
<li><a href="./hello.php">Hello</a></li>
<li><a href="./hello2.php">hello2</a></li>
</ul>
</li>
<li>
<a href="#">Browse database</a>
<ul>
<li><a href="./test.php">test</a></li>
<li><a href="./test2.php">Test2</a></li>
<li><a href="./search.php">Search</a></li>
</ul>
</li>
</ul>
</div>
For reasons I cannot determine, their is no drop-down menu effect.由于我无法确定的原因,它们没有下拉菜单效果。 Consequently, if I change navigation to an id instead of a class by replacing.navigation with #navigation, then none of the layout affects the HTML.
因此,如果我通过将.navigation 替换为#navigation 将导航更改为id 而不是class,那么所有布局都不会影响HTML。
In case you're still having the problem, have you tried changing:如果您仍然遇到问题,您是否尝试过更改:
.navigation li li{
list-style:none;
display:block;
}
To:至:
.navigation li li{
list-style:none;
display:none;
}
.navigation li:hover li{
display:block;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.