Question

这是我第一次寻求帮助，请原谅我缺乏经验。我遇到的问题是，当我将鼠标悬停在下拉菜单上时，框的宽度似乎一直在拉伸直到屏幕结束。

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

编辑：通过添加唯一ID来调整，使子菜单达到所需大小，但破坏了子菜单的字体和布局。任何人都可以帮忙解决问题吗？现在需要睡觉，明天会继续睡觉，谢谢大家！

Answer 1

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

Answer 2

看来你的规则是：

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项，包括子菜单中的项目，当我分配#menu1之类的ID，然后将规则更改为：

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

答案@ angel9215发布帮助解决了这个问题！通过查看代码，可以看到在初始ul中添加了一个唯一的id，并且风格不同。关于ul / li的更详细的规格被用于具体地描述某些ul / li。再次感谢！

编辑：删除带有li：hover ul宽度的注释标记后，它转到了下拉大小！再次感谢大家！一切都很完美！

Box延伸到屏幕的末尾

3 个答案: