框延伸到屏幕的末尾

Question

这是我第一次寻求帮助，请原谅我缺乏经验。我遇到的问题是，当我悬停在下拉菜单上时，盒子的宽度似乎一直延伸到屏幕的末尾。

代码：http://cssdeck.com/labs/oq0n4gk0

我试过在不同的地方改变宽度，但都没有达到我的目标。任何帮助都将不胜感激！谢谢!

编辑:调整周围添加独特的id，使子菜单的愿望大小，但破坏了字体和布局的子菜单。有人能帮忙修理吗？现在需要睡觉，明天再做，谢谢大家！

Answer 1

看来你的规则是：

ul {
        list-style-type: none; 
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        display: inline-block;
    }

正在影响页面上的所有ul项，这包括子菜单中的项，当我分配ID (如#menu1 )时，然后将规则更改为：

#menu1 {
        list-style-type: none; 
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        display: inline-block;
    }

问题似乎得到了纠正，但菜单的背景色却变得杂乱无章。

更新:这段代码似乎使菜单对我有效：

#mainMenu {
  width:100%;
}   

ul {
        list-style-type: none; 
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #333;
        position: fixed;
        top: 0%;
        left: 0%;
        display: inline-block;
    }
    ul li {
        width:12%;
    }
    li ul {
        display: none;
        /*max-width:12%;*/
    }
    li:hover ul {
        display: block; 
        position: fixed; 
        top:46px;
        left:24%;
        /*background-color: white;*/
        /*width: 12%;*/
    }
    #hsdown {
        left:36%;

    }
    li {
        float:left;
        /*width:12%;*/
        margin: 0;
        padding: 0;

    }
    li:hover li{
        float: none;
    }
    li a {
        display: block;
        color: white;
        text-align: center;
        padding: 14px 26px; 
        text-decoration: none;
    }
    li a:hover:not(.active){
        background-color: #311;
    }
    .active {
        background-color: tan;
    }
    .myCircle {
        border-radius: 50%;
    }
    .down {
        /*width: 10%;*/
        background-color: #333;
    }

    li ul li {
      width:100%;
    }

这是html：

<!DOCTYPE html>
<html>
    <head>
        <title> Home Page</title>
        <link rel = "stylesheet" type = "text/css" href = "projectcss.css">
        <script>
            iframe{
                position: inline;
            }
        </script>
        <style>
            body {
                background-color:black;
                color:white;
            }
        </style>

    </head>

    <body>

        <ul id="mainMenu">
            <li><a class = "active" href = "#burton">Home</a></li>
            <li><a href = "#about">About</a></li>

            <li><a href = "#burton">Games</a>
                <ul>
                    <li><a class = "down" href = "#burton">Game1</a></li>
                    <li><a class = "down" href = "#burton">Game2</a></li>
                </ul>
            </li>
            <li><a href = "#burton">HighScores</a>
                <ul id = "hsdown">
                    <li><a id = "hsdown" class = "down" href = "#burton">Highscore 1</a></li>
                    <li><a id = "hsdown" class = "down" href = "#burton">Highscore 2</a><li>
                </ul>
            </li>
        </ul>

        <div style = "padding: 20px; margin-top: 30px;"> 
        <h1>Welcome</h1>    
    </body>
</html>

Answer 2

在CSS中使用通用标记，如ul和li等。您有嵌套的ul标记，这意味着您当前的声明width: 100%适用于所有ul标记。添加唯一的类并引用CSS中的类，而不是标记名。

Answer 3

@angel9215发布的答案帮助解决了这个问题！从代码中可以看出，一个惟一的id被添加到初始ul中，并且样式不同。在ul / li上使用了更详细的规范，用于特定ul / li的特定样式。再次感谢！

编辑:删除了评论标签上的宽度在li:悬停ul，它转到下拉大小！再次感谢各位！一切都很完美！