Link to home
Start Free TrialLog in
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

asked on

Drop Down Menu using CSS and HTML

Hello Experts,

Please look at the attachment.  In Image-2, there is very little padding under Web Solutions.  At  the same time Padding-Top is more.  I would like to  make it like Services  in Image-1.  Thank you very much in advance.


@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
* {     margin: 0;     padding: 0;     user-select: none;     box-sizing: border-box;     font-family: 'Poppins', sans-serif; } body {     background: #f2f2f2; } nav {     /*background: #1b1b1b;*/     background: white; }     nav:after {         content: '';         clear: both;         display: table;     }     nav .logo {         float: left;         color: white;         font-size: 27px;         font-weight: 600;         line-height: 70px;         padding-left: 60px;     }         nav .logo img {             margin-left: 0;             float: left;             background-color: white;             height: auto;             width: auto;             max-height: 80px;             max-width: 280px;             display: block;             border: thin;         }     nav .fas {         margin-right: 8px;         font-size: 1em;     }     nav ul {         float: right;         margin-right: 40px;         list-style: none;         position: relative;         padding-left: 5px;     }         nav ul li {             float: left;             display: inline-block;             /*background: #1b1b1b;*/             margin: 0 5px;         }             nav ul li a {                 color: navy;                 line-height: 70px;                 text-decoration: none;                 font-size: 15px;                 padding: 4px 25px;             }                 nav ul li a:hover {                     /*color: cyan;*/                     border-radius: 5px;                     /*box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/                     box-shadow: 0 0 5px navy, 0 0 10px navy;                 }         nav ul ul {             background: #010437;             color: white;             width: auto !important;             position: absolute;             top: 90px;             opacity: 0;             visibility: hidden;             transition: top .3s;             border: thin solid;         }             nav ul ul ul {                 border-top: none;             }         nav ul li:hover > ul {             top: 70px;             opacity: 1;             visibility: visible;         }         nav ul ul li {             position: relative;             margin: 0px;             width: 150px;             float: none;             display: list-item;             border-bottom: 1px solid rgba(0,0,0,0.3);         }             nav ul ul li a {                 color: white;                 line-height: 40px;                 text-decoration: none;                 font-size: 15px;                 padding: 0px 5px 15px;             }                 nav ul ul li a:hover {                     background-color: white;                     width: 140px;                     height: 30px;                     display: inline-block;                     border-radius: 4px;                     /*box-shadow: 0 0 5px #33ffff, 0 0 10px #66ffff;*/                     box-shadow: 0 0 5px navy, 0 0 10px navy;                 }             /*nav ul ul li a {                 line-height: 50px;             }*/         nav ul ul ul li {             position: relative;             top: -60px;             left: 150px;         } /*Bootstrap Style Menu Bar Margin*/ ul {     margin-top: 0;     margin-bottom: 0rem; } .show, .icon, input {     display: none; } .fa-plus {     font-size: 15px;     margin-left: 40px; } @media all and (max-width: 968px) {     nav ul {         margin-right: 0px;         float: left;     }     nav .logo {         padding-left: 30px;         width: 100%;     }     .show + a, ul {         display: none;     }     nav ul li, nav ul ul li {         display: block;         width: 100%;     }         nav ul li a:hover {             box-shadow: none;         }     .show {         display: block;         color: white;         font-size: 18px;         padding: 0 20px;         line-height: 70px;         cursor: pointer;     }         .show:hover {             color: cyan;         }     .icon {         display: block;         color: white;         position: absolute;         top: 0;         right: 40px;         line-height: 70px;         cursor: pointer;         font-size: 25px;     }     nav ul ul {         top: 70px;         border-top: 0px;         float: none;         position: static;         display: none;         opacity: 1;         visibility: visible;     }         nav ul ul a {             padding-left: 40px;         }         nav ul ul ul a {             padding-left: 80px;         }         nav ul ul ul li {             position: static;         }     [id^=btn]:checked + ul {         display: block;     }     nav ul ul li {         border-bottom: 0px;     }     span.cancel:before {         content: '\f00d';     } } .content {     z-index: -1;     position: absolute;     top: 50%;     left: 50%;     transform: translate(-50%,-50%);     text-align: center; } header {     font-size: 35px;     font-weight: 600;     padding: 10px 0; } p {     font-size: 30px;     font-weight: 500; }

Open in new window

Avatar of lenamtl
lenamtl
Flag of Canada image

Hi,

Without a live link it's hard to guess..

When you have a case like this use the browser console.
Using Chrome, select the item with your cursor right click - inspect
Check the style box at the right it display the related class and you can edit the padding dirrectly in this box to make test.
When you find the correct value for the padding, note this and also check the related CSS file and line.
Then open the file with your text editor Notepad++ and adjust the class with the new value.

Note always make a backup of your file and you can comment the old value so this way you can revert back.
/* old value here */

Open in new window

Check everywhere you have padding and do some tests.
Ref https://www.w3schools.com/css/css_padding.asp 
 nav ul li a {
                color: navy;
                line-height: 70px;
                text-decoration: none;
                font-size: 15px;
                padding: 4px 25px;
            }

nav ul ul li a {
                color: white;
                line-height: 40px;
                text-decoration: none;
                font-size: 15px;
                padding: 0px 5px 15px;
            }

Open in new window

Note Menu is usually the most complicated part  
If you are using a premium template contact the author because most of the time menu involve Javascript and it may have some CSS in JS.
As you are using Bootstrap you may need to adjust these value for other view.
So check the same class name in other media queries
 @media all and (max-width: 968px) {  ....

Open in new window

Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

ASKER

Hi lenamtl,
How can I put it in live link?   Do you need the HTML source code?

Thank you?
Hi just host it somewhere (whebhosting company) or you can create JS fiddle for free as long as you put your custom CSS and same Bootstrap version
https://jsfiddle.net/

And paste the link

ASKER CERTIFIED SOLUTION
Avatar of RadhaKrishnaKiJaya
RadhaKrishnaKiJaya

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Hi,
you are welcome.
Please accept the solution to close the question.