Menu options spreading out horizontally across multiple layers

Question

Menu options spreading out horizontally across multiple layers

<nav class="navbar navbar-default">
<ul class="nav navbar-nav navbar-right">
<li class="first leaf"><a href="/front">Frontpage</a></li>
<li class="leaf"><a href="/library" class="container-one">Library</a></li>
<li class="expanded active-trail active"><a href="/om-websitet" class="active-trail active">About the website</a>
  <ul class="nav navbar-nav navbar-right">
    <li class="first leaf"><a href="/en-sode">About the book</a></li>
      <li class="last leaf"><a href="/en-sode">The authors</a></li>
  </ul>
</li>
<li class="leaf"><a href="/categories" class="container-two">Categories</a></li>
<li class="last leaf webshop-link"><a href="http://google.dk">Webshop</a></li>
</ul>
</nav>

In my design, I have a two-level menu that I want to display horizontally for both levels. However, when the second level is active, the menu item 'about the website' displays with a lot of whitespace after it.

The goal is to eliminate the extra whitespace and align the 2nd level menu items to the right for proper positioning.

css menu

Answer 1

Answer №1

To enhance the appearance of list items, apply the following styles: set position:relative to li elements, and specify position:absolute for nested ul tags.

nav.navbar-default {
    width: 100%;  
}
ul {
    list-style: none;
}
ul li {
  float: left;
  position: relative;
}
li ul {
    position:absolute
}
li a {
  display: block;
  height: 55px;
  margin: 0 20px;
}

Answer 2

To enhance the appearance of list items, apply the following styles: set position:relative to li elements, and specify position:absolute for nested ul tags.

nav.navbar-default {
    width: 100%;  
}
ul {
    list-style: none;
}
ul li {
  float: left;
  position: relative;
}
li ul {
    position:absolute
}
li a {
  display: block;
  height: 55px;
  margin: 0 20px;
}

Answer 3

Answer №2

There's a gap in the layout because your dropdown is positioned 1) after the <li> in the DOM order, causing it to still take up space before moving to the next <li>.

To fix this issue, you should set your dropdowns to have position: absolute so they don't disrupt the layout of other elements.

It's also worth noting that in 2016, utilizing floats for layout design may not be optimal and using flexbox would provide more flexibility and control over your layouts.

Below is an example code snippet without white space:

CSS:

nav.navbar-default {
    width: 100%; 
}

ul {
    list-style: none;
    display: flex;
}

ul li {
    justify-content: flex-start;
    position: relative;
}

.navbar-right {
    position: absolute;
    top: 100px;
    left: 0;
}

li a {
    display: block;
    height: 55px;
    margin: 0 20px;
}

For a live demonstration, you can view the Fiddle.

Answer 4

There's a gap in the layout because your dropdown is positioned 1) after the <li> in the DOM order, causing it to still take up space before moving to the next <li>.

To fix this issue, you should set your dropdowns to have position: absolute so they don't disrupt the layout of other elements.

It's also worth noting that in 2016, utilizing floats for layout design may not be optimal and using flexbox would provide more flexibility and control over your layouts.

Below is an example code snippet without white space:

CSS:

nav.navbar-default {
    width: 100%; 
}

ul {
    list-style: none;
    display: flex;
}

ul li {
    justify-content: flex-start;
    position: relative;
}

.navbar-right {
    position: absolute;
    top: 100px;
    left: 0;
}

li a {
    display: block;
    height: 55px;
    margin: 0 20px;
}

For a live demonstration, you can view the Fiddle.

Menu options spreading out horizontally across multiple layers

Answer №1

Answer №2

Similar questions

How come these social buttons are refusing to align in a responsive layout?

When resizing the window, the width change in JQuery always resets to 0

Customize Bootstrap Vue dropdown without any predefined styling options

Creating a circular shape that adjusts to different screen sizes using only CSS

Utilizing Media Queries with Dynamic Vue Properties

How can I make an element stick at the bottom of another element using the top position

Customizing the color of a select dropdown in Bootstrap using CSS styling

Changing the background color of a fixed header in AngularJS based on the current page

What technique works best for changing the visibility of an image without causing other elements to shift position?

svg viewbox cannot be adjusted in size

What is the best way to place text alongside a shape?

Do not execute the script if the window's width is below a certain threshold

Customizing styles in ZK based on theme

Creating a mobile-friendly layout with 3 columns: Tips and tricks

Utilizing CSS for showcasing XSTL table

What is the best way to adjust the responsiveness of my AppDrag page for mobile optimization?

Intersection Observer is functioning properly as elements vanish once they finish appearing

Is there a way to merge attribute selectors for elements that satisfy one condition or the other?

margin-top: automatic adjustment, with a minimum of 50 pixels

Tips for concealing overlay when the cursor hovers