I'm having trouble aligning my ul dropdown with the rest of my menu.
Even after removing the Bullet from my ul dropdown, it still maintains its position (I expected it to move all the way to the left side of the page).
I've attempted various styling options to align the ul dropdown with the rest of the menu, but I can't seem to figure it out.
Setting both the margin and padding to 0 causes the dropdown to align all the way to the left of the page (as shown in the snippet).
Adjusting the margin and padding values either moves it to the left side of the screen or puts it back in its original position.
$('ul li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
}, function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
});<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js" integrity="sha384-feJI7QwhOS+hwpX2zkaeJQjeiwlhOP+SdQDqhgvvo1DsjtiSQByFdThsxO669S2D" crossorigin="anonymous"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- this uses list-style-type: none; which results in not having a bullet ( my goal) but not aligning to the other links correctly-->
<div class="w3-bar-block">
<a href="#" target="_blank" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw"></i> link 2</a>
<ul style="list-style-type: none;">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard fa-fw"></i> DropdownHeader</a>
<ul class="dropdown-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
</ul>
</div>
<!-- this uses list-style-type: none; padding: 0; and margin-0; which results in not having a bullet ( my goal) but not aligning to the other links correctly either. Does not matter what you change padding and margin to it will either stay to the left side of the screen or jump back to *original postion*-->
<div class="w3-bar-block">
<a href="#" target="_blank" class="w3-bar-item w3-button w3-padding"><i class="fa fa-users fa-fw"></i> Link 1</a>
<a href="#" class="w3-bar-item w3-button w3-padding"><i class="fa fa-user fa-fw"></i> link 2</a>
<ul style="list-style-type: none; padding: 0; margin-0;">
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-dashboard fa-fw"></i> DropdownHeader</a>
<ul class="dropdown-menu">
<li><a href="#">sub1</a></li>
<li><a href="#">sub2</a></li>
<li><a href="#">sub3</a></li>
<li><a href="#">sub4</a></li>
</ul>
</li>
</ul>
</div>