Raika Raika - 3 months ago 19
CSS Question

How to align items in dropdown menu with my parent menu bar

I can't seem to align my MENU and PROMOTION dropdowns correctly.

My navigation bar is fixed to the top so even when scrolling down it will still be there.

I only had this problem when I added

text-align:center
to my
ul.topnav
class.

I'm using Adobe Dreamweaver CS6 for these codes. I use the Fluid Grid Layout by this software but the Navigation Bar has nothing to do with this and so I am missing some other CSS and JS files given by this layout like boilerplate.css and respondmin.js.

To visualize my problem:

Image of the problem

What I really want is to get the items in dropdown to be align directly underneath the PROMOTIONS in a single line.

P/S: I used a responsive Navigation Bar so please enlarge the browser to view the problem which only occur when it's fullscreen.

My codes are as following:



function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}

body {margin:0;}
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
top: 0;
position:fixed;
width: 100%;
background-color: rgba(0,0,0,0.75);
text-align:center;
}

ul.topnav li {float: left;}

ul.topnav li a, .dropbtn {
display: inline-block;
color: #FFF;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 13.75px;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-weight:bold;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {background-color: #F00;}

ul.topnav li.dropdown {
display: inline-block;
}

ul.topnav .dropdown-content{
display:none;
position: absolute;
background-color: #000;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
text-align:center;
}

ul.topnav .dropdown-content a{
color: #FFF;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul.topnav .dropdown-content a:hover {
background-color: #999;
}

ul.topnav .dropdown:hover .dropdown-content {display: block;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}

.topnav li {
width: 19%;
margin: 0;
padding:0;
}

/*Footer CSS*/

body{
padding: 0;
display: flex;
min-height: 100vh;
flex-wrap: wrap;
}

.wrapper{
padding:20px;
height:auto;
}

footer{
background-color:#666;
color: #FFF;
font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
font-size:17.75px;
font-weight:bold;
align-self: flex-end;
line-height: 3;
text-align: center;
width: 100%;
}

footer img{
width:42px;
height: 42px;
margin: 0 1em;
}

hr{
width:100%;
}

footer p{white-space:pre;}

<!doctype html>
<html class="">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Untitled Document</title>

<link href="_css/boilerplate.css" rel="stylesheet" type="text/css">
<link href="_css/fluid-grid.css" rel="stylesheet" type="text/css">
<link href="_css/headfoot.css" rel="stylesheet" type="text/css">

<script src="_script/respond.min.js"></script>
<script src="_script/headfoot.js"></script>
</head>

<html>

<body>
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">HOME</a></li>
<li class="dropdown">
<a href="#" class="dropbtn">MENU</a>
<div class="dropdown-content">
<a href="#">Appetizer</a>
<a href="#">Main Course</a>
<a href="#">Dessert</a>
<a href="#">Soup</a>
<a href="#">Drinks</a>
<a href="#">Side Snacks</a>
</div>
</li>
<li class="dropdown">
<a href="#" class="dropbtn">PROMOTIONS</a>
<div class="dropdown-content">
<a href="#">Breakfast</a>
<a href="#">Lunch</a>
<a href="#">Dinner</a>
</div>
</li>
<li><a href="#aboutus">ABOUT US</a></li>
<li><a href="#contactus">CONTACT US</a></li>
<li class="icon">
<a href="javascript:void(0);" style="font-size:15px;" onclick="myFunction()">☰</a>
</li>
</ul>

<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
<p>Hello</p>
</div>

<div class="gridContainer clearfix">
<div id="header">This is the content for Layout Div Tag "header"</div>
<div id="maincontent">This is the content for Layout Div Tag "maincontent"</div>
<div id="food1">This is the content for Layout Div Tag "food1"</div>
<div id="food2">This is the content for Layout Div Tag "food2"</div>
<div id="food3">This is the content for Layout Div Tag "food3"</div>
<div id="content">This is the content for Layout Div Tag "content"</div>
</div>

<footer>
<div class="wrapper">
<img src="Social%20Media%20Icons/facebook-icon.png" alt="Facebook"/>
<img src="Social%20Media%20Icons/icon-twitter.png" alt="Twitter"/>
<img src="Social%20Media%20Icons/YouTube-icon-full_color.png" alt="YouTube"/>
<img src="Social%20Media%20Icons/original_instagram-circle-icon.png" alt="Instagram"/>
<img src="Social%20Media%20Icons/tumblr-logo-icon-8.png" alt="Tumblr"/>
<img src="Social%20Media%20Icons/google-plus-icon.png" alt="GooglePlus"/>
<hr>
<p>S T A Y C O N N E C T E D</p>
</div>
</footer>
</body>
</html>




Answer

I add display: block to your menu links, and i add 'position: relative' to your menu li for using left: 0 on .dropdown-content. Also i changed .dropdown-content width to 100%.

So change your css like this:

body {margin:0;}
ul.topnav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: visible;
  top: 0;
  position:fixed;
  width: 100%;
  background-color: rgba(0,0,0,0.75);
  text-align:center;
}

ul.topnav li {float: left;}

ul.topnav li a, .dropbtn {
  display: block; /* change */
  color: #FFF;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 13.75px;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  font-weight:bold;
}

ul.topnav li a:hover, .dropdown:hover .dropbtn {background-color: #F00;}

ul.topnav li.dropdown {
    display: inline-block;
    position: relative; /* Change */
}

ul.topnav .dropdown-content{
    display:none;
    position: absolute;
    background-color: #000;
    /* min-width: 160px; Change */
    width: 100%; /* Change */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    text-align:center;
    left: 0; /* Change */
}

ul.topnav .dropdown-content a{
    color: #FFF;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}
ul.topnav .dropdown-content a:hover {
    background-color: #999;
}

ul.topnav .dropdown:hover .dropdown-content {display: block;}

ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
  ul.topnav li:not(:first-child) {display: none;}
  ul.topnav li.icon {
    float: right;
    display: inline-block;
  }
}

@media screen and (max-width:680px) {
  ul.topnav.responsive {position: relative;}
  ul.topnav.responsive li.icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  ul.topnav.responsive li {
    float: none;
    display: inline;
  }
  ul.topnav.responsive li a {
    display: block;
    text-align: left;
  }

  ul.topnav.responsive .dropdown-content{
    width: auto;
    min-width: 160px;
    left: 0;
  }

  ul.topnav li.dropdown{
    position: static;
  }
}

.topnav li {
    width: 19%;
    margin: 0;
    padding:0;
}

/*Footer CSS*/

body{
    padding: 0;
    display: flex;
    min-height: 100vh;
    flex-wrap: wrap;
}

.wrapper{
    padding:20px;
    height:auto;
}

footer{
    background-color:#666;
    color: #FFF;
    font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
    font-size:17.75px;
    font-weight:bold;
    align-self: flex-end;
    line-height: 3;
    text-align: center;
    width: 100%;
}

footer img{
    width:42px;
    height: 42px;
    margin: 0 1em;
}

hr{
    width:100%;
}

footer p{white-space:pre;}

Live: https://jsfiddle.net/9rwvsso5/

Comments