locked
Variable lenght centered drop down menus RRS feed

  • Question

  • User-1010588737 posted

    I was trying to construct drop-down menus. I wanted them variable length set by text in the first unordered list item. I cannot for the life of me target the hover property to make it match the width. If some can help, I will also take any advice on the best way or better ways to do this. Thanks

    Tuesday, August 14, 2018 3:50 AM

All replies

  • User283571144 posted

    Hi tranduc1095,

    I’ve found a similar issue in another website. I’ve got the codes and try to modify it.

    I suggest you may modify the display and padding style of a label.

    Then it may work well. 

    If my advice can not reach your requirement,  please provide your newest detailed codes.

    It will be better for us to help you find the solution.

    Here is the code:

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style>
            html,
            body {
                margin: 0;
                padding: 0;
            }
            body {
                font-family: "Roboto", sans-serif;
                font-size: 16px;
                font-weight: 400px;
                color: #0a3a76;
                margin: 0;
                padding: 0;
                ;
            }
    
            #page {
                ;
            }
    
            .premier {
                height: 100px;
                background-color: #0FF;
                background-image: url(../image/bannerAuc2.jpg);
                background-;
                background-size: cover;
            }
    
            .logo {
                width: 600px;
                margin: 0 auto;
                text-align: center;
                padding-top: 70px;
            }
    
            nav {
                ;
                width: 100%;
                background: #ccc url(../image/bar_bg.png) repeat-x;
                top: 100px;
               font-size: 1.2em;
                font-weight: bold;
            }
    
            nav ul {
                list-style: none;
                width: 710px;
                margin: 0 auto;
                padding: 0;
            }
    
            nav > ul > li {
                /*float: left;*/
                display: inline-block;
                padding-left: 0;
                ;
            }
    
            nav ul::after {
                content: '';
                display: block;
                clear: both;
            }
    
            nav ul li a {
                /*display: inline-block;*/
                display: block;
                color: #000;
                /*padding: 10px 50px 10px 50px;*/
                padding: 10px;
                text-decoration: none;
            }
    
            nav ul li a:hover {
                background-color: #f00;
            }
            nav ul ul {
                display: none;
                background-color: #0ff;
                ;
                width: auto;
                left: 50%;
                transform: translateX(-50%);
            }
    
            nav ul ul:hover {
                background-color: #fad;
            }
    
            nav ul ul li a:hover {
                color: #fff;
            }
    
            nav ul li ul li a:hover {
                background-color: #000;
            }
    
        nav ul li:hover > ul {
            display: block;
        }
        </style>
    
    </head>
    <body>
        <div id="page">
            <div class="premier">
                <div class="logo">
                    <img src="image/LogoMaster.png" alt="Our Logo" height="70%" width="70%">
                </div>
            </div>
            <nav>
                <ul>
                    <li><a href="#">Home</a>
                    <li>
                        <a href="#">Products</a>
                        <ul>
                            <li><a href="#">Help</a></li>
                            <li><a href="#">Consulting</a></li>
                            <li><a href="#">Soccer</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Information</a>
                        <ul>
                            <li><a href="#">Help</a></li>
                            <li><a href="#">Consulting</a></li>
                            <li><a href="#">Swimming</a></li>
                        </ul>
                    </li>
                    <li>
                        <a href="#">Contact</a>
                        <ul>
                            <li><a href="#">Company</a></li>
                            <li><a href="#">Staff</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </body>
    </html>
    

    Result:

    Best Regards,

    Brando

    Tuesday, August 14, 2018 9:38 AM
  • User-1010588737 posted

    Thanks for your help. I'm watching and fixing it. I hope to succeed

    Thursday, August 16, 2018 1:34 AM