CSS- navigation dropdown is not aligned properly

Question

I am trying to create a new website for my mom, and I am working on the navigation bar right now. I have the dropdown menu etc working, but it is not properly aligned.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
    <title>Navigation Menu</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
 <link rel="stylesheet" href="style.css">
<style type="text/css">
 ul {
list-style: none;
padding-left: 400px; 
width: auto; 
margin-left: auto; 
margin-right: auto; 
margin: 0px;
}
ul li {
display: block;
position: relative;
float: left;
border:1px solid #878E63
}
li ul {
display: none;
}
ul li a {
display: block;
background: #878E63;
padding: 5px 10px 5px 10px;
text-decoration: none;
white-space: nowrap;
color: #F1F0D1;
}
ul li a:hover {
background: #111;
}
li:hover ul {
display: block;
position: absolute;
right: -100px;
}
li:hover li {
float: none;
text-align: center;
}
li:hover a {
background: #f00;
}
li:hover li a:hover {
background: #000;
}
#drop-nav li ul li {
    border-top: 0px;
}
 </style>
  </head>
 <body>
     <ul id="menu">
        <li><a href="Home.html">Home</a></li>
        <li>
            <a href="#">Services</a>
            <ul class="hidden">
                <li><a href="#">Threading</a></li>
                <li><a href="#">Waxing</a></li>
                <li><a href="#">Mehndi/Henna</a></li>
                <li><a href="#">Facial</a></li>
            </ul>
        </li>
        <li><a href="#">Media</a></li>
        <li><a href="#">Testimonial</a></li>
        <li><a href="#">Career</a></li>
        <li><a href="#">Client</a></li>
        <li><a href="#">Contact Us</a></li>
    </ul>
</body>
</html>

The dropdown bar for the services is not properly aligned.

Benneb10 · Accepted Answer · 2016-12-19 20:48:55Z

1

You want the dropdown to be aligned with the left end of it's parent container so instead of right:-100, just make the dropdown ul left:0; on hover. Also it's inheriting 40px of padding so set this to 0 and everything looks good.

li:hover ul {
   display: block;
   position: absolute;
   left: 0px;
   padding:0px;
}

answered Dec 19, 2016 at 20:48

Benneb10

1,4891 gold badge8 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

akdsfjakls · Accepted Answer · 2016-12-19 20:50:20Z

0

You can add a new class for your hidden element and set an absolute position:

Something like this:

.hidden{
  position:absolute;
  left:-54%;
}

Have a look at this https://jsfiddle.net/9e43Lbx9/

answered Dec 19, 2016 at 20:50

akdsfjakls

2082 silver badges13 bronze badges

Comments

Jay · Accepted Answer · 2016-12-19 20:54:54Z

0

The dropdown ul you have is inheriting the padding-left of the following css :

ul {
list-style: none;
padding-left: 400px; 
width: auto; 
margin-left: auto; 
margin-right: auto; 
margin: 0px;
}

So just making that padding go away for the dropdown ul using :

li:hover ul {
display: block;
position: absolute;
padding:0px;
}

answered Dec 19, 2016 at 20:54

Jay

1659 bronze badges

Collectives™ on Stack Overflow

CSS- navigation dropdown is not aligned properly

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related