Question

这是我的一半导航的html，我从一个旧项目中获取了一些，但我无法使用它。令人沮丧的是因为这个片段适用于另一个导航，但我不能让它正常工作。

＆＃13;

.ulli {
		display: inline-block;
		margin-right: -4px;
		position: relative;
		-webkit-transition: all 0.2s;
		-moz-transition: all 0.2s;
		-ms-transition: all 0.2s;
		-o-transition: all 0.2s;
		transition: all 0.2s;
	}
		.ulli:hover {
		display: block;
		opacity: 1;
		visibility: visible;
	}
	.ulliul {
		padding: 0;
		position: absolute;
		top: 48px;
		left: 0;
		width: 150px;
		-webkit-box-shadow: none;
		-moz-box-shadow: none;
		box-shadow: none;
		display: none;
		opacity: 0;
		visibility: hidden;
		-webkit-transiton: opacity 0.2s;
		-moz-transition: opacity 0.2s;
		-ms-transition: opacity 0.2s;
		-o-transition: opacity 0.2s;
		-transition: opacity 0.2s;
	}
	.ulliul:hover { 
		display: block;
		opacity: 1;
		visibility: visible;
	}

＆＃13;

<li class="ulli"><a style="text-decoration:none"><font color="FFF">0</a></li>
	<ul class="ulliul">
		<li class="ulliul"><a href="#"style="text-decoration:none;"><font color="FFF">1</a></li>
		<li class="ulliul"><a href="#"style="text-decoration:none;"><font color="FFF">2</a></li>
		<li class="ulliul"><a href="#"style="text-decoration:none;"><font color="FFF">3</a></li>
	</ul>

＆＃13;

Answer 1

对于一个<font></font>已弃用，并且您没有关闭它们，所以您应该删除它们。当您将鼠标悬停在.ulli而不是隐藏元素时，您需要显示菜单：.ulliul。另外，您应该更改class元素的li名称，它们不应与您的ul相同：

<强> HTML

<li class="ulli"><a style="text-decoration:none">0</a></li>
<ul class="ulliul">
    <li class="something"><a href="#"style="text-decoration:none;">1</a></li>
    <li class="something"><a href="#"style="text-decoration:none;">2</a></li>
    <li class="something"><a href="#"style="text-decoration:none;">3</a></li>
</ul>

<强> CSS

.ulli:hover + .ulliul { //need to use '+' because the subnav is a sibling of the element you're hovering over
    display: block;
    opacity: 1;
    visibility: visible;
}

FIDDLE

<强>更新

请再次参阅我上面的评论，你没有在HTML中改变我告诉你的内容：

从代码中删除所有<font color="FFF">代码，该代码无效，代码无法关闭，并且实际上会阻止您的悬停工作< / p>
更改您的li元素的类名称：<li class="ulli">为其他内容，它们不应与您的ul相同，例如：{{1 }}

YOUR FIDDLE - WORKING

Answer 2

简化您的代码，找到以下HTML，CSS

修改了HTML结构。
删除了内联样式。
从html中移除并在标记上应用样式。
多级下拉列表的样式。

<强> HTML

<ul class="ulli">
    <li>
        <a href="#">0</a>
        <ul>
            <li class="something"><a href="#" >1</a></li>
            <li class="something"><a href="#" >2</a></li>
            <li class="something"><a href="#" >3</a></li>
        </ul>
    </li>
</ul>

<强> CSS

ul{
    margin: 0;
    padding: 0;
}
ul ul{
    display: none;
}
ul li{
    list-style: none;
}
ul li a{ 
    text-decoration: none;
    cursor: pointer;
}
ul li:hover > ul{
    display:block;
}

JSFIDDLE DEMO

下拉菜单不会在悬停时显示

2 个答案: