CODEWITHSUNDEEP
htmlcss
19wolf
19wolf

Reputation: 402

Table-row width 100% not respecting parent

I have a codepen example: http://codepen.io/19wolf/pen/myrOew?editors=110

You'll notice that the dropdown on "Item One" stretches across the entire page. How do I force it to fit under "Item One" and only "Item One" (there being a variable number of items)? I've tried changing li:hover ul from display: table to display: table-row but all that does is make the items shorter than "Item One".

I had definitely gotten this to work in the past using the current html setup, but that css got lost...

The semi-live site I'm running it on is apoxz.org/new

Upvotes: 0

Views: 465

Answers (2)

Suchit kumar
Suchit kumar

Reputation: 11859

you need to set the li width on hover:

nav {
	font-family: 'Roboto',sans-serif;
	font-weight: 300;
	display: table;
}

nav ul {
	list-style: none;
	display: table;
	table-layout: fixed;
	border-collapse: collapse;
	width: 100%;
}

nav li {
	display: table-cell;
	padding: 0 .5em;

}

nav a {
	background: #0033ab;
	text-decoration: none;
	color: #fff;
	display: block;
	padding: 1em;
	text-align: center;
}
nav a:hover {
	background: #f7b512;
	color: #000;
}

nav ul ul {
	display: none;
	position: relative;
}

nav ul li:hover ul {
   display: table;
   table-layout: fixed;
   position: absolute;
	width:30%;
	overflow: hidden;
}

nav ul li:hover ul {
	display: table;
	table-layout: fixed;
	position: absolute;
	max-width: 100%;
}

nav ul li:hover ul li {
	display: table-row;
	border-top: 1px solid #000;
	max-width: 100%;
}
<nav>
  <ul>
    <li>
      <a>Item One</a>
      <ul>
        <li>
          <a>SubOne</a>
        </li>
        <li>
          <a>SubTwo</a>
        </li>
        <li>
          <a>SubThree</a>
        </li>
      </ul>
    </li>
    <li>
      <a>Item Two</a>
    </li>
    <li>
      <a>Item Three</a>
    </li>
  </ul>
</nav>

Upvotes: 0

Manoj Sharma
Manoj Sharma

Reputation: 616

give position relative to your li which hold another level of ul:

nav li {
    display: table-cell;
    padding: 0 .5em;
    position : relative;
}

Upvotes: 1

Related Questions