Question

I’m a web designer and new in stackoverflow, I have this issue with positioning drop-down menu links (more specifically aligning them to the left of the menu) because there is a space between the menu left border and the beginning of the links (check the live demo link below). I’ve tried text-align, float, margin, padding, and position properties but none of them seem to solve this. I think that the menu css might be conflicting with other css code of the page, but I just can’t seem to find it.

You can check the source code from a live demo of the page here.

Answer 1

Ok, based on how your code is structured, this is how I would modify your css to do what I think it is you’re trying to do – I’ll ** the css changes I’ve made:

.dropdown dd {
position: absolute;
overflow: hidden;
width: 200px;
display: none;
background: #f8f8f8;
z-index: 200;
opacity: 0;
**border-right: 1px solid #004e8e;**
}

.dropdown ul {
**overflow: hidden;**
width: 204px;
border: 1px solid #004e8e;
list-style: none;
}

.dropdown li {
**display: block;**
**position: relative;**
**left: -40px;**
}

This should get rid of the extra space on the left as well as put that blue border around the drop-down that I believe you were also trying to create.