CSS Dropdown Menu Items not Aligning

Question

Im having issues with my dropdown menu. I added a padding in my Ul line so my menu would align in the center, but after that the dropdown items will not align. I'm sure the problem is in my CSS, but i will include both HTML and CSS. Ive been told some of this code is redundant, but for this problem I would like to leave it like it is.

body {
  background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg') no-repeat;
  Background-size: cover;
  font-family: arial;
  color: white;
}
ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding-left:70px;
}
ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  opacity: 0.8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}
ul li a{
  text-decoration: none;
  color: white;
  display: in-line;
}
ul li a:hover {
  background-color: gray;
}
ul li ul li {
  display: none;
}
ul li:hover ul li {
  display: block;
}

<htlm>
  <link href='style2.css' rel='stylesheet'>
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a>
      <ul>
        <li><a>About Me</a></li>
        <li><a>About My Project</a></li>
      </ul>
    </li>
    <li><a>Gallery</a></li>
    <li><a>Contact</a></li>
    <li><a>News</a>
      <ul>
        <li><a>Tech News</a></li>
        <li><a>World News</a></li>
        <li><a>Science News</a></li>
      </ul>
    </li>
    <li><a>Lessons</a></li>
  </ul>
</html>

When you say 'align', how exactly do you want the dropdowns to appear? 'News' and 'About' both have dropdowns that appear at the same offset. Do you want the sub-menu to appear below the main menu? Also, you have two tags (<htlm> and </le>) that are typos. It may be worth validating your markup with the W3 Markup Validator service. — Obsidian Age
– Obsidian Age, Commented Nov 28, 2017 at 3:25
yes I would like the sub menu to appear below the main menu. Could you explain how they are typos? I followed a tutorial on youtube, and I was wanting to expand on what he did. — DShannon3
– DShannon3, Commented Nov 28, 2017 at 3:30
The tags should be <html> and </li> respectively. The <html> denotes that the file is an HTML document, and you already have the corresponding </html> tag at the end. Most of your list items are closed with </li> (ending the list item), though one is closed with </le> (resulting in invalid syntax, and unexpected display). — Obsidian Age
– Obsidian Age, Commented Nov 28, 2017 at 3:33
OK, I see what you mean. the typo was just a matter of not paying attention. thanks for that — DShannon3
– DShannon3, Commented Nov 28, 2017 at 3:37

Minal Chauhan · Accepted Answer · 2017-11-28 06:12:41Z

1

You didn't reset -webkit-padding-start for second ul.

You can find more here: http://css-infos.net/property/-webkit-padding-start

HTML

body {
  background: url('https://static.pexels.com/photos/39811/pexels-photo-39811.jpeg') no-repeat;
  Background-size: cover;
  font-family: arial;
  color: white;
}

ul {
  margin: 0px;
  padding: 0px;
  list-style: none;
  padding-left: 70px;
}

ul li {
  float: left;
  width: 200px;
  height: 40px;
  background-color: black;
  opacity: 0.8;
  line-height: 40px;
  text-align: center;
  font-size: 20px;
}

ul li a {
  text-decoration: none;
  color: white;
  display: in-line;
}

ul li a:hover {
  background-color: gray;
}

ul li:hover ul {
  display: block;
}

ul li ul {
  -webkit-padding-start: 0;
  -moz-padding-start: 0;
  display: none;
}

ul li ul li a {
  display: block;
}

<ul>
    <li><a>Home</a></li>
    <li><a>About</a>
        <ul>
            <li><a>About Me</a></li>
            <li><a>About My Project</a></li>
        </ul>
    </li>
    <li><a>Gallery</a></li>
    <li><a>Contact</a></li>
    <li><a>News</a>
        <ul>
            <li><a>Tech News</a></li>
            <li><a>World News</a></li>
            <li><a>Science News</a></li>
        </ul>
    </li>
    <li><a>Lessons</a></li>
</ul>

edited Nov 28, 2017 at 6:12

Minal Chauhan

6,16812 gold badges24 silver badges41 bronze badges

answered Nov 28, 2017 at 4:22

Damian

391 silver badge1 bronze badge

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

3 Comments

DShannon3 Over a year ago

that didnt seem to fix it.

Damian Over a year ago

https://codepen.io/anon/pen/RjYJXr Added code to codepen, can you explain what don't work properly in there or send an screenshot?

DShannon3 Over a year ago

okay, i guess i didnt add something from your previous comment. I copied and pasted everything and it worked. thank you so much!

Shweta · Accepted Answer · 2017-11-28 05:10:08Z

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
         body {
    background: #eee;
    Background-size: cover;
    font-family: arial;
    color: white;
}

ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    padding-left: 60px;
}

ul li {
    float: left;
    width: 200px;
    height: 50px;
    background-color: #ddd;
    opacity: 0.8;
    line-height: 50px;
    text-align: center;
    font-size: 20px;
    vertical-align: middle;
}

ul li a {
    text-decoration: none;
    color: #000;
    display: in-line;
}

ul li a:hover {
    background-color: #000;
    color: #fff;
    padding: 10px;
}

ul li:hover .subnav {
    display: block;
}
.subnav li {
    float: none;
            position: relative;
}
.subnav {
    -webkit-padding-start: 0;
    -moz-padding-start: 0;
    display: none;
    position: absolute;
}

.subnav li a {
    display: block;
}
    </style>
</head>
<body>

    <ul>
    <li><a>Home</a></li>
    <li><a>About</a>
        <ul class="subnav">
            <li><a>About Me</a></le>
            <li><a>About My Project</a></li>
        </ul>
    </li>
    <li><a>Gallery</a></li>
    <li><a>Contact</a></li>
    <li><a>News</a>
        <ul class="subnav">
            <li><a>Tech News</a></li>
            <li><a>World News</a></li>
            <li><a>Science News</a></li>
        </ul>
    </li>
    <li><a>Lessons</a></li>
    </ul>
</body>
</html>

Collectives™ on Stack Overflow

CSS Dropdown Menu Items not Aligning

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related