CODEWITHSUNDEEP
css
Kristina K
Kristina K

Reputation: 23

How can I line up the dropdown menu?

The dropdown menu is not aligning properly. The dropdown options are to the right for some reason instead of aligned ('students', 'programs', 'trainings'). Here is the css code for the menu:

 <style type="text/css">
 #drop-nav {
 width: 1000px;
 }
 ul {
 margin: 0px;
 padding: 0px;
 list-style-type: none;
list-style-image: none;
list-style-position: outside;
overflow: visible;
position: static;
}
ul li {
border: 1px solid #000000;
display: block;
position: relative;
float: left;
right: -4px;
background-color: white;
}
li ul {
display: none;
background-color: #3333ff;
}
ul li a {
padding: 10px 18px 5px 90px;
background: #3333ff none repeat scroll 0% 50%;
text-decoration: none;
white-space: nowrap;
color: #ffffff;
overflow: visible;
text-align: center;
display: block;
}
ul li a:hover {
background: #3366ff none repeat scroll 0% 50%;
overflow: visible;
}
li:hover ul {
display: block;
position: absolute;
overflow: visible;
}
li:hover li {
float: none;
background-color: #3366ff;
}
li:hover a {
background: #2346b1 none repeat scroll 0% 50%;
}
li:hover li a:hover {
background: #40a3f6 none repeat scroll 0% 50%;
}
#drop-nav li ul li {
border-top: 0px none;
overflow: visible;
visibility: visible;
font-family: Arial,Helvetica,sans-serif;
text-align: justify;
clear: none;
display: table-row;
width: 140px;
}
</style>

Here is the html:

<ul id="drop-nav">
<li><a href="#">Home</a>
</li>
<li><a href="about.html">About</a>
<ul>
  <li><a href="students.html">Students</a></li>
  <li><a href="programs.html">Programs</a></li>
  <li><a href="trainings.html">Trainings</a></li>
 </ul>
</li>
 <li><a href="services.html">Services Offered</a>
 </li>
 <li><a href="products.html">Our Products</a></li>
 <li><a href="#">Contact</a>
 </li>
</ul>

Upvotes: 1

Views: 61

Answers (2)

Alex Char
Alex Char

Reputation: 33218

This is because ou are using padding-left at 90px. You can change it to this:

ul li ul li a {
    text-align: left;
    padding: 10px 18px 5px 0px;
    width: 100%;
    display: table-cell;
}

fiddle

Upvotes: 1

Paulie_D
Paulie_D

Reputation: 115109

It's not clear what you are referring to but the text is affected as you have too much left padding on the anchor links compared the other sides.

 ul li a {
     padding: 10px 18px 5px 90px; /* 90px!!! */

Try something less

JSfiddle Demo

Upvotes: 1

Related Questions