Nav bar CSS base

src/components/DropDownBox/DropDownBox.scss

@@ -1,5 +1,9 @@
 @import "../../assets/scss/globals";
 
 .drop-down-box {
-  color: $white;
+  background-color: white;
+  margin-top: 0.8rem;
+  position: absolute;
+  width: 6rem;
+  border: 0.1rem solid black;
 }

src/components/NavbarChildLink/NavbarChildLink.scss

@@ -5,6 +5,7 @@ $border-width: 2px;
   width: 100%;
   display: flex;
   flex-flow: row nowrap;
-  justify-content: center;
-  color: $white;
+  justify-content: left;
+  margin-left: 0.5rem;
+  margin-bottom: 1rem;
 }

src/components/NavbarChildLink/NavbarChildLink.tsx

@@ -10,7 +10,6 @@ export interface NavbarChildLinkState {
 
 class NavbarChildLink extends React.Component<NavbarChildLinkProps, NavbarChildLinkState> {
   render() {
-    // style={this.state.open ? {} : {display: "none"}}
     return (
       <a className="navbar-child-link"
         href={this.props.to}>

src/components/NavbarDropdownLink/NavbarDropdownLink.scss

@@ -6,5 +6,9 @@ $border-width: 2px;
   display: flex;
   flex-flow: row nowrap;
   justify-content: center;
-  color: $white;
 }
+
+.navbar-dropdown-container {
+  position: relative;
+  width: 100%;
+}

src/components/NavbarDropdownLink/NavbarDropdownLink.tsx

@@ -23,15 +23,15 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
   }
 
   handleClose = () => {
-    this.setState({open: false});
+    // this.setState({open: false});
   }
 
   render() {
     const { children } = this.props;
     const { open } = this.state;
-    if (open) {
+    if (open && children) {
       return (
-        <Fragment>
+        <div className="navbar-dropdown-container">
           <a className="navbar-dropdown-link"
             href={this.props.to}
             onMouseEnter={this.handleOpen}
@@ -40,17 +40,19 @@ class NavbarDropdownLink extends React.Component<NavbarDropdownLinkProps, Navbar
           <DropDownBox>
             { children }
           </DropDownBox>
-        </Fragment>
+        </div>
       );
     } else {
       return (
-        <a className="navbar-dropdown-link"
-          href={this.props.to}
-          onMouseEnter={this.handleOpen}
-          onMouseLeave={this.handleClose}
-        >
-          {this.props.text}
-        </a>
+        <div className="navbar-dropdown-container">
+          <a className="navbar-dropdown-link"
+            href={this.props.to}
+            onMouseEnter={this.handleOpen}
+            onMouseLeave={this.handleClose}
+          >
+            {this.props.text}
+          </a>
+        </div>
       );
     }
   }