4 Replies Latest reply on Sep 13, 2018 1:03 PM by osgood_

    Adjusting width of dropdown menus

    j.c.l11411800

      How do you make a specific dropdown item wider?   I would like to give the following its own width  <li><a href="#">Benefits</a></li>

      <Div ID="Menu">

      <ul>

        <li> <a href="#">Home</a></li>

      <li>

         <a href="#">Products</a> See what we offer

      <ul>

      <li class="blue"> <a href="#">Portable Call Buttons</a></li>

      <li><a href="#">Wall-mounted Transmitters    </a></li>

      <li><a href="#">Pagers    </a></li>

      <li><a href="#">Repeaters    </a></li>

      </ul>

      </li> 

        <li><a href="#">Benefits </a>

        <ul>

      <li><a href="#">Benefits</a></li>

      <li><a href="#">FAQs</a></li>

      </ul>

        </li>

       

      <li><a href="#">Our Customers</a>What & why they bought from us</li>

      <li><a href="#">About US</a></li>

        <li><a href="#">Contact Us</a> </li>

      </ul>

      </Div>

        • 1. Re: Adjusting width of dropdown menus
          osgood_ Level 8

          Add a class to your <ul> like below and use css to set the width.

           

          <ul class="sub-menu">

          <li><a href="#">Benefits</a></li>

          <li><a href="#">FAQs</a></li>

          </ul>

           

           

          .sub-menu {

          width: 300px;

          }

           

          See if that works. It should do if your sub-menus are positioned absolutely for desktop devices.

          • 2. Re: Adjusting width of dropdown menus
            j.c.l11411800 Level 1

            It does not change anything.  What I am trying to accomplish is that when you hover over benefits in the main menu, the dropdowns Benefits and FAQs are 75px, now they are 200px as set by the following CSS.  I want the dropdowns under Products to remain at 200px.

             

            /Changes height and width of sub menu/

             

            #Menu ul li ul li a

             

             

             

            /Formats dropdown when hover changes the width and background/

             

            #Menu ul li ul li a:hover{

             

                          background-color: white;

             

                          width: 200px;

             

                          }

            • 3. Re: Adjusting width of dropdown menus
              Nancy OShea Adobe Community Professional & MVP

              Please post a URL to your problem page so we can see it.

              1 person found this helpful
              • 4. Re: Adjusting width of dropdown menus
                osgood_ Level 8

                See example below: I dont use css dropdown navigation but I dont think the hover will work on mobile devices

                 

                <html>

                <head>

                <meta charset="UTF-8">

                <title>Menu</title>

                <style>

                * {

                box-sizing: border-box;

                }

                .menu {

                display: flex;

                justify-content: center;

                margin: 0;

                padding: 0;

                width: 100%;

                background-color: #000;

                padding: 0 40px;

                }

                .menu ul {

                position: absolute;

                list-style: none;

                margin: 0;

                padding: 0;

                display: none;

                }

                .menu li {

                list-style: none;

                margin: 0;

                padding: 0;

                }

                .menu li:hover .sub-menu200 {

                display: block;

                width: 200px;

                }

                .menu li:hover .sub-menu100 {

                display: block;

                width: 100px;

                }

                .menu a {

                background-color: #000;

                color: #fff;

                display: block;

                padding: 10px 20px;

                text-decoration: none;

                }

                </style>

                </head>

                <body>

                <ul class="menu">

                <li> <a href="#">Home</a></li>

                <li><a href="#">Products</a>

                <ul class="sub-menu200">

                <li><a href="#">Portable Call Buttons</a></li>

                <li><a href="#">Wall-mounted Transmitters    </a></li>

                <li><a href="#">Pagers    </a></li>

                <li><a href="#">Repeaters    </a></li>

                </ul>

                </li>

                <li><a href="#">Benefits </a>

                <ul class="sub-menu100">

                <li><a href="#">Benefits</a></li>

                <li><a href="#">FAQs</a></li>

                </ul>

                </li>

                <li><a href="#">Our Customers</a></li>

                <li><a href="#">About US</a></li>

                <li><a href="#">Contact Us</a> </li>

                </ul>

                </body>

                </html>

                1 person found this helpful