【发布时间】：2014-04-29 14:59:30
【问题描述】：
我正在尝试自己创建一个 css 下拉菜单，并且可以使用它，但是宽度存在问题。当我将鼠标悬停在其中一个菜单项上时，下拉菜单从主页链接的左侧开始。我希望链接从我悬停的链接的左侧开始。我不确定我说的是否有道理，所以这里有一个小提琴：http://jsfiddle.net/nikito2003/qtDvL/。提前感谢您的帮助。
我拥有的html是：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><!-- InstanceBegin template="/Templates/musictemplate.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- InstanceBeginEditable name="doctitle" -->
<title>Untitled Document</title>
<link href="style.css" type="text/css" rel="stylesheet" />
<!-- InstanceEndEditable -->
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div align="center">
<table width="75%" border="1">
<tr>
<td><img src="images/logo-for-country.gif" width="144" height="144" alt="logo" />
<!-- InstanceBeginEditable name="EditRegion4" -->EditRegion4
<!-- InstanceEndEditable -->
</td>
</tr>
<tr>
<td><div class="menu" align="center">
<ul>
<li id="menu_item"><a href="#">Home</a></li>
<li id="menu_item"><a href="#">Musicians</a>
<ul>
<li id="menu_sub_item"><a href="#">Toby Keith</a></li>
<li id="menu_sub_item"><a href="#">Rodney Atkins</a></li>
</ul>
</li>
<li id="menu_item"><a href="#">Songs</a>
<ul>
<li id="menu_sub_header"><a href="#">Toby Keith</a></li>
<li id="menu_sub_item"><a href="#">Should’ve Been A Cowboy</a></li>
<li id="menu_sub_item"><a href="#">American Soldier</a></li>
<li id="menu_sub_item"><a href="#">How Do You Like Me Now</a></li>
<li id="menu_sub_header"><a href="#">Rodney Atkins</a>
<li id="menu_sub_item"><a href="#">Watching You</a></li>
<li id="menu_sub_item"><a href="#">If You’re Going Through Hell</a></li>
<li id="menu_sub_item"><a href="#">He’s Mine</a></li>
</ul>
</li>
<li id="menu_item"><a href="#">Concerts</a></li>
</ul>
</div></td>
</tr>
</table>
<!-- InstanceBeginEditable name="EditRegion3" -->EditRegion3<!-- InstanceEndEditable --></div>
</body>
<!-- InstanceEnd --></html>
我拥有的css是：
@charset "utf-8";
/* CSS Document */
.audio {
float:right;
}
.menu {
margin:0;
padding:0;
width:100%;
}
.menu ul {
list-style:none;
position:relative;
margin-left:auto;
margin-right:auto;
}
.menu #menu_item {
list-style:none;
display:inline;
}
.menu #menu_item a {
background-color:#0CF;
margin:2px 2px;
padding:6px 6px 10px;
text-decoration:none;
font-size:1.25em;
display:block;
float:left;
}
#menu_item a:hover {
background-color:red;
}
#menu_item ul {
display:none;
}
#menu_item ul {
display:none;
float:right;
}
#menu_item:hover > ul {
display:block;
position:absolute;
clear:both;
float:none;
top:40px;
margin-top:0px;
//width:100%;
background-color:#F0F0F0;
border-bottom-left-radius:10px;
border-bottom-right-radius:10px;
padding:5px;
}
#menu_sub_item {
position:relative;
float:none;
}
.menu #menu_sub_header a{
background-color:#999;
}
【问题讨论】：
-
你得到你想要的了吗user3272438
-
是的，谢谢你的帮助