Dropdown menu not working from CSS or Javascript?

Question

I'm trying to figure out why my dropdown menu isn't working.

Here's the page I'm working on: http://www.privateservercloud.com/

If you hover over the area to the left of "Manage Campaigns" you should see that "SEO Dashboard" appears with a dropdown menu.

There's 3 things that happened when I added the dropdown menu that I can't figure out.

1. The "SEO Dashboard" link got pushed to the right when that li should be to the very left.

2. The "SEO Dashboard" text completely disappeared unless you're hovering over it.

3. The dropdown menu has black squares in it that don't appear on the other website I'm using it on...

Can anyone see what would have caused these things to happen when I added the drop down menu?

EDIT: Everything appears to be fixed except for #1. The "SEO Dashboard" link should be to the very left but still doesn't appear to be working...

Answer 1

First off, you'll be much more helpful to people who view this question later if you post the relevant html and CSS. Since you didn't do that, I'll do it here:

<ul class="nav" style="width: 158px; left: 156px; visibility: hidden;">
  <li><a href="https://mywebsite.com" class="subfoldericon">SEO Dashboard</a>
    <ul style="margin-left: 1px; width: 185px; left: 156px; visibility: hidden;">
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
        <li style="width:185px"><a href="test.php"><span style="width:241px">Test Menu</span></a></li>
    </ul>
  </li>
</ul>    

The problem is that you are hard-coding the left positioning. If you remove that, the list items will float correctly.

Answer 2

1. To get "SEO Dashboard" appearing anytime just add "visibility: visible;" to your style.css line 66 on selector ".navbar .nav > li > a". It's because ul.nav has visibility hidden and li get this property because ul is it's parent.

2. Add "text-align: left;" to your style line 148 to get text aligned to left for the dropdown menu.

3. Add "list-style-type: none;" to your style.css line 139 for selector ".menu ul li ul li" to remove black squares.

Answer 3

I'm going to address each issue below:

1.The "SEO Dashboard" link got pushed to the right when that li should be to the very left.

All your .navbar .nav elements has an inline style of left:156px; . Remove that and your links will display correctly

2.The "SEO Dashboard" text completely disappeared unless you're hovering over it.

Your first .navbar .nav element has an inline style of visibility:hidden; . Remove this and your link will display correctly.

3.The dropdown menu has black squares in it that don't appear on the other website I'm using it on...

If you add list-style:none: to the .menu ul li ul li element, this should fix your issue.