Question

我正在为我的网站上的水平导航栏进行点击在顶角的按钮上，

https://i.stack.imgur.com/USPzf.jpg

出现其他选项，

然后将鼠标悬停在其他选项上会显示更多选项：

https://i.stack.imgur.com/M7GWI.jpg

然而，正如屏幕截图所示，'Option'，'Option2'和'Option3'并不是彼此内联的，这正是我的目标。这是HTML：

    #menu{
    }
    #ulmain{
    }
    #limain{
    	list-style:none;
    }
    #ulsub {
    	visibility:hidden;
    }
    #lisub{
    	list-style:none;
    	display:inline;
    }
    #ulmain:hover #ulsub{
    	visibility:visible;
    }
    #ulsubsub {
    	visibility:hidden;
    }
    #lisub:hover #ulsubsub{
    	visibility:visible;
    }
    #lisubsub{
    	list-style:none;
    	display:inline;
    }
    #menu a{
    	background-color:pink;
    	text-decoration:none;
    }
    #ulmain, #ulsub{
    	display:inline;
    }

    <!DOCTYPE html>
    <html lang="en">
    	<head>
    		<link rel="stylesheet" href="index.css">
    		<title>New Menu</title>
    	</head>
    	<body>
    		<div id="menu">
    			<ul id="ulmain">
    				<li id="limain"><a id="amain" href="#">Menu</a>
    					<ul id="ulsub">
    						<li id="lisub"><a id="asub" href="#">Option</a>
    							<ul id="ulsubsub">
    								<li id="lisubsub"><a href="#">Sub-Option</a></li>
    								<li id="lisubsub"><a href="#">Sub-Option2</a></li>
    							</ul>
    						</li>
    						<li id="lisub"><a href="#">Option2</a>
    							<ul id="ulsubsub">
    								<li id="lisubsub"><a href="#">Sub-Option3</a></li>
    								<li id="lisubsub"><a href="#">Sub-Option4</a></li>
    							</ul>
    						</li>
    						<li id="lisub"><a href="#">Option3</a>
    							<ul id="ulsubsub">
    								<li id="lisubsub"><a href="#">Sub-Option5</a></li>
    								<li id="lisubsub"><a href="#">Sub-Option6</a></li>
    							</ul>
    						</li>
    					</ul>
    				</li>
    			</ul>
    		</div>
    	</body>
    </html>

如何内联'Option'，'Option2'和'Option3'？感谢。

Answer 1

试试这个CSS

detox

Preety大致相同，你把ul显示为内联，让它们阻塞，并使li显示为：inline-block;

希望这会有所帮助...

水平导航栏

1 个答案: