How to prevent links from wrapping in CSS megamenu div (inheritance issue)

StackOverflow https://stackoverflow.com/questions/14206741

  •  14-01-2022
  •  | 
  •  

Question

I am trying to create a megamenu (see fiddle: http://jsfiddle.net/BKHNk/) but the issue I am running into is when I put links in the <div> that flies out from the menu. The dropdown under Menu 1 is what I want it to look like but as soon as I turn the text into links as seen in Menu 2 all the formatting goes haywire. I think the issue is that the links are inheriting attributes but I don't know the best way to prevent that from happening.

Basically, I want the width to be as minimally wide as necessary based on the content. The section text should be on one line. The subsection items should all be on their own line with each subsection text (but not the comma) as a link. Again, basically exactly like Menu 1 looks.

I also tried changing the subsection items into an unordered list but that got even more convoluted and I don't think that it's necessary to do so.

Can anyone help me figure out what is being inherited that is making all of the text in the second line wrap and how to prevent it from happening? Thanks!

HTML code below:

<ul id="menu">
  <li> <a href="#">Menu 1</a>
    <div class="dropdown">
      <div class="section">Section goes here</div>
      <div class="subsection">Subsection 1, Subsection 2, Subsection 3</div>
      <div class="rule"></div>
    </div>
  </li>
  <li> <a href="#">Menu 2</a>
    <div class="dropdown">
      <div class="section"><a href="#">Section goes here</a></div>
      <div class="subsection"><a href="#">Subsection 1</a>, <a href="#">Subsection 2</a>, <a href="#">Subsection 3</a></div>
      <div class="rule"></div>
    </div>
  </li>
</ul>

CSS below:

#menu {
  font-family: sans-serif;
  list-style:none;
  height: 32px;
  width: 200px;
  background: #888;
}
#menu li {
  float:left;
  display:block;
  text-align:center;
  position:relative;
  padding: 5px;
  margin:5px;
}
#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}
#menu li:hover a {
  color:#ccc;
}
.dropdown {
  margin:4px auto;
  float:left;
  position:absolute;
  left:-999px;
  text-align:left;
  padding:10px;
  background:#aaa;
  width: auto;
  white-space:nowrap;
}
#menu li:hover .dropdown {
  left:0px;
  top:auto;
}
.rule {
  height: 2px;
  width: 100%;
  background-color: red;
}
.section {
  font-weight:bold;
}
.subsection {
font-size: 75%;
}
Was it helpful?

Solution

This line is causing your problems:

#menu li a {
  color: black;
  display:block;
  text-decoration:none;
}

This makes any and all links that are child of a list item display as block, which causes the vertical stacking that you're seeing.

Change that selector to #menu li > a and you're good to go. View it on JSFiddle. What this does is only apply the styling to links that are direct children of list items.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top