Question

我正在尝试用图片上的下拉菜单制作菜单，但是我不能将项目悬停在图片上的大项目我觉得它是填充边框但是当我试图让它变得如此之大时它只是不工作，并且我不能在子菜单上做同样的事情。有人可以帮帮我吗？

它的外观如何menu - sub menu item hover

我的css：

＆＃13;

ul.sidebar {
	list-style: none;
	margin: 15px;
	background: #d29bff;
    background: -moz-linear-gradient(top,  #d29bff 0%, #8977ff 100%);
    background: -webkit-linear-gradient(top,  #d29bff 0%,#8977ff 100%);
    background: linear-gradient(to bottom,  #d29bff 0%,#8977ff 100%);
    width: 200px;
    border-radius: 5px;
    /*padding: 10px;*/
}

ul.sidebar li {
	padding: 15px;
	position: relative;
	width: 200px;
	border-bottom: 1px solid #9d00ff;
}

ul.sidebar li:last-child {
	border-bottom: none;
}

ul.sidebar li a:hover {
	border: 1px solid #9d00ff;
	border-radius: 5px;
	padding: 5px;
}

ul.sidebar li a {
	color: #000;
	text-decoration: none;
}

ul.sidebar ul {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	list-style: none;
}

ul.sidebar li:hover > ul{
	opacity: 1;
	visibility: visible;
	left: 82.5%;
	top: -3%;
	background: #b5aaff;
    border-radius: 5px;
}

ul.sidebar li ul li a:hover{
	background: url("../images/arrowTask2.png")left no-repeat;
	padding-left: 15px;
}

＆＃13;

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CSS Styling Exam Variant 1 - Task 1</title>
	<link href="css/task2.css" rel="stylesheet" />
</head>
<body>
	<div id="wrapper">
		<aside>
			<ul class="sidebar">
				<li>
					<a href="#">Sidebar Item #1</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #1.1</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.2</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.3</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #2</a>
				</li>
				<li>
					<a href="#">Sidebar Item #3</a>
				</li>
				<li>
					<a href="#">Sidebar Item #4</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #4.1</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.2</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.3</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #5</a>
				</li>
				<li>
					<a href="#">Sidebar Item #6</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
					</ul>
				</li>
			</ul>
		</aside>
	</div>
</body>
</html>

＆＃13;

Answer 1

我已将box-sizing: border-box;添加到您的ul.sidebar li box-sizing。从无序列表中删除了填充，并将文本置于<li>的中心。 ul.sidebar li:hover > ul由于之前的设置规则，此部分已更改。我认为您只需要删除填充并在子菜单上设置特定位置即可实现您想要的效果。这是一个Fiddle希望这会有所帮助。

ul.sidebar {
	list-style: none;
	margin: 15px;
	background: #d29bff;
    background: -moz-linear-gradient(top,  #d29bff 0%, #8977ff 100%);
    background: -webkit-linear-gradient(top,  #d29bff 0%,#8977ff 100%);
    background: linear-gradient(to bottom,  #d29bff 0%,#8977ff 100%);
    width: 200px;
    border-radius: 5px;
    padding: 0;
}

ul.sidebar li {
  box-sizing: border-box;
	padding: 15px;
	position: relative;
	width: 200px;
	border-bottom: 1px solid #9d00ff;
  text-align: center;
}

ul.sidebar li:last-child {
	border-bottom: none;
}

ul.sidebar li a:hover {
	border: 1px solid #9d00ff;
	border-radius: 5px;
	padding: 5px;
}

ul.sidebar li a {
	color: #000;
	text-decoration: none;
}

ul.sidebar ul {
	position: absolute;
	opacity: 0;
	visibility: hidden;
	list-style: none;
  padding: 0;
}

ul.sidebar li:hover > ul{
	opacity: 1;
	visibility: visible;
	left: 100%;
	top: -1%;
	background: #b5aaff;
    border-radius: 5px;
}

ul.sidebar li ul li a:hover{
	background: url("../images/arrowTask2.png")left no-repeat; 
	padding-left: 15px;
}

<div id="wrapper">
		<aside>
			<ul class="sidebar">
				<li>
					<a href="#">Sidebar Item #1</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #1.1</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.2</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.3</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item #1.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #2</a>
				</li>
				<li>
					<a href="#">Sidebar Item #3</a>
				</li>
				<li>
					<a href="#">Sidebar Item #4</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item #4.1</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.2</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.3</a>
						</li>                            
						<li>                             
							<a href="#">Sub sidebar Item #4.4</a>
						</li>
					</ul>
				</li>
				<li>
					<a href="#">Sidebar Item #5</a>
				</li>
				<li>
					<a href="#">Sidebar Item #6</a>
					<ul>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
						<li>
							<a href="#">Sub sidebar Item</a>
						</li>
					</ul>
				</li>
			</ul>
		</aside>
	</div>

在悬停时调整菜单栏

1 个答案: