当我单击文本时它起作用，但是当我在文本旁边单击时，它在下拉菜单中不起作用？
[英]When i click into text it works but when i click beside text it doesn't work in dropdown menu?
问题描述
i have made my own drop down menu but problem is when i click in text it links to other place successfully but when i click beside text it doesn't link to other place, can you please help me what's wrong here?? 
我已经创建了自己的下拉菜单，但问题是当我在文本中单击时，它成功链接到其他地方，但是当我在文本旁边单击时，它没有链接到其他地方，请您能帮我解决这里的问题吗？ help would be appreciated!! 帮助将不胜感激！
here is my pic: 这是我的照片：
and here is my source code for drop-down menu.. 这是我drop-down菜单源代码。
<style>
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0px 2px 7px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 2px 7px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 2px 7px 0px rgba(50, 50, 50, 0.75);
}
ul li {
font: bold 12px/18px Throw My Hands Up in the Air;
font-size: 15px;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #D00000;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
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;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
#header{
background-color: #D00000;
text-align: center;
position: fixed;
top: 0%;
left: 0%;
right: 0%;
height: 8%;
-webkit-box-shadow: 0px 3px 12px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow: 0px 3px 12px 0px rgba(50, 50, 50, 0.75);
box-shadow: 0px 3px 12px 0px rgba(50, 50, 50, 0.75);
}
#left_box{
background-color: #ffffff;
position: fixed;
width: 20%;
top: 10%;
left: 0%;
height: 100%;
}
a{
font-size: 15px;
}
.box
{
width: 80%;
padding:10px;
border:2px solid gray;
position: fixed;
top: 12%;
left: 15%;
height: 50%;
}
</style>
<body>
<div id="header">
<ul><li><a href="home.php" style="text-decoration: none; color: #000000;">Home</a></li>
<li>Notification</li>
<li>
Profile
<ul>
<li>All members</li>
<li><a href="profile.php" style="text-decoration: none; color: #ffffff">My profile</a></li>
</ul>
</li>
<li>
Settings
<ul>
<li><a href="setting.php" style="text-decoration: none; color: #ffffff">Settings</a></li>
<li><a href="logout.php" style="text-decoration: none; color: #ffffff">Logout</a></li>
<li>About</li>
</ul>
</li>
</ul>
</div>
3 个解决方案
解决方案1
3 2014-04-10 06:22:33
The a tag is an inline element, so by default it's only the width of the text. 标签是一个内联元素，因此默认情况下，它只是文本的宽度。 Add display: block; 添加显示：块； to the link to make it 100% width: 链接以使其宽度为100％：
ul li a { display: block; }
解决方案2
0 2014-04-10 06:21:24
The problem is the only the text is considered the actual "link", because it's the innerHTML of the <a> tag. 问题在于唯一的文本被认为是实际的“链接”，因为它是<a>标记的innerHTML。 You may have to alter the CSS a little, but try wrapping the <li> tag in the <a> tag so you get <a href="link"><li>Link Name</a> . 您可能需要稍微更改CSS，但请尝试将<li>标记包装在<a>标记中，以便获得<a href="link"><li>Link Name</a> 。 Then clicking anywhere on the <li> element should activate the link. 然后单击<li>元素上的任意位置<li>链接。
解决方案3
0 2014-04-10 06:35:04
Bad form to put anything besides inline elements in anchor tag. 在锚标记中将内联元素以外的任何内容放置的错误形式。 Easiest solution? 最简单的解决方案？
Specify a width for all your menu dropdown elements as they are the same width already.. 为所有菜单下拉菜单元素指定宽度，因为它们的宽度已经相同。
#header li > ul > li > a { width: 125px; }
should make all nested dropdowns same width. 应该使所有嵌套的下拉菜单具有相同的宽度。
Ensure you have 确保你有
a { display: block; }
as well... 还有...
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.