Html CSS下拉菜单宽度问题_Html_Css

Html CSS下拉菜单宽度问题

html css

Html CSS下拉菜单宽度问题,html,css,Html,Css,我试图创建一个css下拉菜单，我自己，我得到了它的工作，但有一个宽度的问题。当我将鼠标悬停在其中一个菜单项上时，下拉列表从主页链接的左侧开始。我希望链接从我悬停的链接的左侧开始。我不确定我说的话是否有道理，所以这里有个小问题：。提前感谢你的帮助我拥有的html是： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

我试图创建一个css下拉菜单，我自己，我得到了它的工作，但有一个宽度的问题。当我将鼠标悬停在其中一个菜单项上时，下拉列表从主页链接的左侧开始。我希望链接从我悬停的链接的左侧开始。我不确定我说的话是否有道理，所以这里有个小问题：。提前感谢你的帮助

我拥有的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>

我已经用一种更简单、反应更灵敏的方式为你做了这件事

这是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>

添加您需要的样式。。检查此处

您的问题与相关的包含项目有关。你把它放在“内联”中，这样就不会让绝对位置的东西相对于它。将其更改为“内联块”

你得到你想要的了吗用户3272438是的，我得到了，谢谢你的帮助

<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>

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;
}

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