CODEWITHSUNDEEP
css
JACK M
JACK M

Reputation: 2841

Align the right border of submenu to the right border of its parent element

I am trying to understand a tutorial on making a CSS dropdown menu.

image
(source: line25.com)

In the image above, the left border of the submenu is aligned to the left border of the parent. I want the right border of the submenu to align to the right border of the parent, whilst retaining the submenu's width. i.e. the submenu should be translated to the left a little.

I tried to add position: relative; to the direct parent of the submenu, but the text "Web Design" breaks into 2 lines; that's ugly.

The tutorial is from dropdown menu.

Here is my code:

nav ul ul {
  display: none;
}
nav ul li:hover > ul {
  display: block;
}
nav ul {
  background: #efefef;
  background: linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -moz-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  background: -webkit-linear-gradient(top, #efefef 0%, #bbbbbb 100%);
  box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
  padding: 0 20px;
  border-radius: 10px;
  list-style: none;
  position: relative;
  display: inline-table;
}
nav ul:after {
  content: "";
  clear: both;
  display: block;
}
nav ul li {
  float: left;
  /*position: relative;*/
}
nav ul li:hover {
  background: #4b545f;
  background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
  background: -webkit-linear-gradient(top, #4f5964 0%, #5f6975 40%);
}
nav ul li:hover a {
  color: #fff;
}
nav ul li a {
  display: block;
  padding: 25px 40px;
  color: #757575;
  text-decoration: none;
}
nav ul ul {
  background: #5f6975;
  border-radius: 0px;
  padding: 0;
  position: absolute;
  top: 100%;
}
nav ul ul li {
  float: none;
  border-top: 1px solid #6b727c;
  border-bottom: 1px solid #575f6a;
  position: relative;
}
nav ul ul li a {
  padding: 15px 40px;
  color: #fff;
}
nav ul ul li a:hover {
  background: #4b545f;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Tutorials</a>
      <ul>
        <li><a href="#">Photoshop</a></li>
        <li><a href="#">Illustrator</a></li>
        <li><a href="#">Web Design</a>
        </li>
      </ul>
    </li>
    <li><a href="#">Articles</a>
      <ul>
        <li><a href="#">Web Design</a></li>
        <li><a href="#">User Experience</a></li>
      </ul>
    </li>
    <li><a href="#">Inspiration</a></li>
  </ul>
</nav>

Upvotes: 3

Views: 448

Answers (1)

Josh Crozier
Josh Crozier

Reputation: 240938

You would relatively position the parent li element:

nav > ul > li {
    position: relative;
}

and then set the position of the direct ul child to right: 0:

nav > ul > li > ul {
    right: 0;
}

In doing so, the child ul is absolutely positioned relative to the parent.

..and if you want to prevent the text from wrapping, add white-space: nowrap.

nav > ul > li > ul {
    right: 0;
    white-space: nowrap;
}

Upvotes: 4

Related Questions