I can’t place a list

Asked

Viewed 70 times

2

Guys I’m not getting to position the list with id Sub1 using css, the other is positioning normal. I’m not getting to know why, someone can help me?

Follow the code:

<html>
    <head>
        <title>Menu</title>
        <style>
            #menu{
                list-style:none;
                position:absolute;
                left:15%;
            }

            #menu li{
                display:inline;
                border:1px solid black;
                float:left;
                padding:10px;
                width:140px;
                text-align:center;
                background-color:#CCCCCC;
            }

            #menu li a{
                text-decoration:none;
                display:block;
                font-weight:bold;
                font-family:verdana;
            }



            <!--submenus-->


            #sub1{              
                position:absolute;
                left:15%;
                top:30%;
            }

            #sub1 li{
                list-style:none;
                border:1px solid black;
                width:140px;
                padding:10px;
                background-color:#CCCCCC;
                font-weight:bold;
                font-family:verdana;
            }

            #sub1 li a{
                text-decoration:none;
                display:block;

            }



        </style>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <script>
            $(document).ready(function(){
                $("#menu1").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");
                });


                $("#menu2").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");
                });



                $("#menu3").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");
                });



                $("#menu4").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");
                });



                $("#menu5").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");
                });             
            }); 


            $(document).ready(function(){
                $("#opcao1").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");

                });


                $("#opcao2").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");

                });


                $("#opcao3").hover(function(){
                    $(this).css("background-color" , "#EDEDED");
                },function(){
                    $(this).css("background-color" , "#CCCCCC");

                });

            });

        </script>
    </head>
    <body>
        <ul id="menu">
            <li id="menu1"><a href="">Menu1</a></li>
            <li id="menu2"><a href="">Menu2</a></li>
            <li id="menu3"><a href="" >Menu3</a></li>
            <li id="menu4"><a href="" >Menu4</a></li>
            <li id="menu5"><a href="">Menu5</a></li>
        </ul>


        <ul id="sub1">
            <li id="opcao1"><a href="">opcao1</a></li>
            <li id="opcao2"><a href="">opcao2</a></li>
            <li id="opcao3"><a href="" >opcao3</a></li>         
        </ul>

    </body>

</html>
css

2 answers

2


It’s probably because of the css of the submenus...

Try to place each li #menu -> position: relative

After that, you adjust each submenu (position: Absolute) with top and left.

EDIT:

I created an example working on codepen so you understand better: http://codepen.io/Gabcoder/pen/oYwdZK

Tips:

  1. Use classes instead of id when there is repetition of css.

  2. Attributes such as text-Decoration: None; are unnecessary as they are already defined by default.

  • tried, nothing happened

  • Got it? If the answer helped you, don’t forget to evaluate ;)

1

If it is a sub menu, it should stay inside the main:

<body>
    <ul id="menu">
        <li id="menu1"><a href="">Menu1</a>
            <ul id="sub1">
                <li id="opcao1"><a href="">opcao1</a></li>
                <li id="opcao2"><a href="">opcao2</a></li>
                <li id="opcao3"><a href="" >opcao3</a></li>         
            </ul>
        </li>
        <li id="menu2"><a href="">Menu2</a></li>
        <li id="menu3"><a href="" >Menu3</a></li>
        <li id="menu4"><a href="" >Menu4</a></li>
        <li id="menu5"><a href="">Menu5</a></li>
    </ul>
</body>

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.