CODEWITHSUNDEEP
htmlcssdrop-down-menu
Burton Feng
Burton Feng

Reputation: 15

Box stretches to end of screen

This is my first time asking for help so please pardon my lack of experience. The problem that I am having is that the width of the box when I hover over the drop down menu seems to be stretching all the way until the end of the screen.

Code: http://cssdeck.com/labs/oq0n4gk0

I have tried changing the width at different places, but none of which achieves my goal. Any help will be greatly appreciated! Thanks!

Edit: Tweaked around with adding unique id's which got the sub menus to the desire size, but ruined the fonts and layout of the sub menu. Can anyone help with a fix? Need to sleep now and will work on it tomorrow, Thanks all!

Upvotes: 1

Views: 154

Answers (3)

Burton Feng
Burton Feng

Reputation: 15

The answer @angel9215 posted helped solved the problem! From going over the code, it was seen that an unique id was added to the initial ul, and was styled differently. More detailed specifications on the ul / li were used to specifically style the certain ul / li. Thanks again!

EDIT: After removing the comment tag with the width on li:hover ul, it went to the drop down size! thanks again everyone! Everything works perfectly!

Upvotes: 0

angel9215
angel9215

Reputation: 163

It seems that your rule:

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

Is affecting all the ul items on the page, this includes the ones in the submenus, when I assign an ID like #menu1 and then change the rule to:

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

The problem seems to get corrected, but the background colors for the menu get all messy.

Update: This code seems to make the menu work for me:

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

This is the 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>

Upvotes: 1

michael
michael

Reputation: 758

It's being you're using generic tags in your CSS like ul and li, etc. You have nested ul tags, which means your current declaration width: 100% is applying to all ul tags. Add unique classes and reference those in your CSS rather than the tag name.

Upvotes: 1

Related Questions