Question

我正在尝试自己创建一个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;
}

Answer 1

我已经为你做了一个更简单，反应更快的方式

HTML请根据您的需要进行调整

<nav>
    <ul class="cf">
        <li><a href="#">Home</a></li>
        <li><a class="dropdown" href="#">Mucicians</a>
            <ul>
                <li class = "more"><a href = "#">Barakados</a></li>
                <li class = "more"><a href = "#">FaceRadiation</a></li>
                <li class = "more"><a href = "#">kolto101</a></li>
                <li class = "more"><a href = "#">OmegaDeltaZD</a></li>
            </ul>
            </li>
        <li><a class="dropdown" href="#">Songs</a>
            <ul>
                <li class = "more"><a href = "#">Barakados</a></li>
                <li class = "more"><a href = "#">FaceRadiation</a></li>
                <li class = "more"><a href = "#">kolto101</a></li>
                <li class = "more"><a href = "#">OmegaDeltaZD</a></li>
            </ul>
            </li>
        <li><a class="dropdown" href="#">Concerts</a>
            <ul>
                <li class = "more"><a href = "#">Barakados</a></li>
                <li class = "more"><a href = "#">FaceRadiation</a></li>
                <li class = "more"><a href = "#">kolto101</a></li>
                <li class = "more"><a href = "#">OmegaDeltaZD</a></li>
            </ul>
            </li>

    </ul>
</nav>

让魔术发生的CSS

nav ul {
    -webkit-font-smoothing:antialiased;
    text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
nav li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 25%;
}
nav a {
    background: #ddd;
    color: #444;
    display: block;
    font: bold 16px/50px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav .dropdown:after {
    content: ' ▶';
}
nav .dropdown:hover:after{
    content:'\25bc'
}
nav li:hover a {
    background: #ccc;
}
nav li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .25s ease;
       -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
         -o-transition: all .25s ease;
            transition: all .25s ease;
}
nav li:hover ul {
    opacity: 1;
    top: 50px;
    visibility: visible;
}
nav li ul li {
    float: none;
    width: 100%;
}
nav li ul a:hover {
    background: #bbb;
}

/* Clearfix */

.cf:after, .cf:before {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
.cf {
    zoom:1;
}

添加您需要的样式..点击DEMO

Answer 2

您的问题在于包含相对项目。你把它作为“内联”，这不会让绝对定位的东西相对于它。将其更改为“inline-block”。

.menu #menu_item {
    list-style:none;
    display:inline-block;

CSS下拉菜单宽度问题

2 个答案: