how to making the navigation menu size equal to the navigation menu child size?

user_15386157 0
Viewed 42

I am creating a navigation menu. Inside the navigation menu I have child navigation menu. I want the size of navigation menu equal to the child navigation menu.

I created three hyper-tags and then there is a div element which is the element after the hyper tags. I am floating the three hyper tags as well as div element to the left. the div element contains one button and div. I am setting the child div element to be absolute so its drawing itself below the button. I want the size of button to be equal to the size of the div element which contains child links. I thought if I set the root div element with position relative it will have the same width of the button but its not working. Here the css and html code. Any answers would be really appreciated.

/* css */

<style>
        .navbar {
            background: #006669;
            overflow: hidden;
        }
        .navbar a{
            float: left;
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav{
            float: left;
            border:1px solid black;
        }
        .navbar .subnav .subnavbutton{
            padding: 15px 15px;
            text-decoration: none;
            color: white;
            font-size: 1.1rem;
            border: none;
            outline: none;
            background: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        .navbar .subnav .subnavcontent{
            position:absolute;
            border: 1px solid red;
            min-width: 100px;
            display: none;
        }
        .navbar .subnav .subnavcontent a{
            float: none;
            color: #444;
            background: white;
            display: block;

        }
        .navbar .subnav .subnavcontent a:hover{
            background: #a0a0a0;
        }
        .navbar .subnav:hover .subnavcontent{
            display: block;
        }

    </style>

     here is the body content

<div class="navbar">
        <a href="#">Home</a>
        <a href="#">News</a>
        <div class="subnav">
            <button class="subnavbutton">Contact</button>
            <div class="subnavcontent">
                <a href="#">link1</a>
                <a href="#">link2</a>
                <a href="#">link3</a>
            </div>
        </div>
</div>
css html
1 Answers

I can do what you want using a flex-box based nav

html

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">News</a></li>
    <li class="dropdown"><a href="dropdown-menu">Menu</a>
      <ul id="dropdown-menu" class="dropdown-menu">
        <li><a href="#">link1</a></li>
        <li><a href="#">link2</a></li>
        <li><a href="#">link3</a></li>
      </ul>
    </li>
  </ul>
</nav>

css

nav ul {
  background: #006669;
  list-style-type: none;
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

nav a {
  color: white;
  font-size: 1.5rem;
  text-decoration: none;
  display: block;
  padding: 1rem;
}

nav a:hover {
  background: white;
  color: #006669;
}

nav ul ul {
  display: flex;
  flex-flow: column nowrap;
  justify-content:flex-start;
  align-items: center;
}

.dropdown {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1;
}

.dropdown:hover .dropdown-menu {
  display: block;
  width: 100%;
  padding:0;
  border: 1px solid #006669;
}
user_194407560
Related