I can not position list

Question

I can not position list

Navigation

#1 by (2 votes)
#2 by (1 votes)

2

Galera is not able to position the list with id sub1 using css, the other is positioning normal. I can not know why, can anyone help me?

Follow the code below:

<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

asked by anonymous 25.11.2016 / 01:44

2 answers

1

If it's 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>

25.11.2016 / 01:49

How does the operating system distribute the processor through the various programs? How to add and remove required input with jQuery?

score 2 · Accepted Answer

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

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

After that, you set each submenu (position: absolute) with top and left.

EDIT:

I've created an example working in codepen for you to understand better: link

Tips:

Use classes instead of id when css is repeated.

Attributes such as text-decoration: none; are unnecessary because they are already defined by default.