CODEWITHSUNDEEP
htmlcss
temporary_user_name
temporary_user_name

Reputation: 37108

Why are these list elements not appearing in a line?

I'm trying to make the navbar elements appear in a row, side by side, with the dropdown one causing a menu to drop down beneath them.

I know there's the nav element and I know there are a thousand jQuery plugins for this. I just want to understand why this isn't working.

http://codepen.io/anon/pen/hjKLD

<!-- Works all the way down to IE7! -->

<header>
<nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <ul class="drop">
       <li>
           <a href="#">dropdown</a>
       </li>
       <li class="menu">
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
           <a href="#">link</a>
       </li>
    </ul>
    <a href="#">link</a>
    <a href="#">link</a>    
</nav>
</header>

li {
 list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

Upvotes: 0

Views: 57

Answers (5)

chharvey
chharvey

Reputation: 9386

Try

ul, li {
    display: inline;
}

Update

I found a quick solution, and without using JavaScript! You might need to make some changes to fix the minor issues.

Here's what I'd suggest for your HTML:

<header>
    <nav>
        <ul>
            <li><a href="#">link 1</a></li>
            <li><a href="#">link 2</a></li>
            <li class="menu">Dropdown
                <ul class="drop">
                    <li><a href="#">link 3</a></li>
                    <li><a href="#">link 4</a></li>
                    <li><a href="#">link 5</a></li>
                    <li><a href="#">link 6</a></li>
                </ul>
            </li>
            <li><a href="#">link 7</a></li>
            <li><a href="#">link 8</a></li>
        </ul>
    </nav>  
</header>

It's cleaner and more semantic.

Now for the CSS:

a, ul, li {
    list-style-type:none;
    margin: 0px;
    padding: 0px;
    border: 0px;
    display: inline;
    text-decoration: none;
}
a:hover {text-decoration: underline;}
ul {display: inline-block;}
.drop {
    display: none;
    padding: 5px;
    border: 1px solid #000;
    background-color: #fff;
}
.menu:hover .drop {
    display: block;
    position: absolute;
    left: 90px;
}
.drop li {display: block;}

No JS required.

Demo via Codepen here.

Upvotes: 2

Francesco
Francesco

Reputation: 497

I think that's what you searching for:

Try this: http://codepen.io/anon/pen/vaEkt

For consistency of markup I swapped the <ul> list in <nav> element.

HTML

<header>
  <nav>
    <a href="#">link</a>
    <a href="#">link</a>
    <nav class="drop">
      <span>dropdown</span>
      <nav class="menu">
        <a href="#">link</a>

        <a href="#">link</a>

        <a href="#">link</a>

        <a href="#">link</a>
      </nav>
    </nav>
    <a href="#">link</a>
    <a href="#">link</a>    
  </nav>
</header>

CSS

li {
  list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}

nav,
ul {
 display: inline-block; 
}

.drop {
  position: relative;
}

.drop .menu {
  position: absolute;
  bootom: 0;
  left: 0;
}

Upvotes: 0

Avisari
Avisari

Reputation: 101

Try this css instead:

a{
  vertical-align: top;
}
li {
 list-style-type:none;
  margin: 0px;
  padding: 0px;
  border: 0px;
}
ul{
  display: inline-block;
  margin: 0px;
  padding: 0px;
}

This will make them all end up on the same row, but something does still need to be done about the dropdown menu pushing the items to the right further when it's shown.

Upvotes: 0

RyanS
RyanS

Reputation: 4194

Your list is being displayed as a block element. Which will fill the space horizontaly causing the elements to render vertically.

In order to fix this issue you can chance the display type:

display: inline;
display: inline-block;

Or you can float the element, which will make it no longer fill horizontally and allow the elements to be displayed side by side:

float: left;

See here for more details on css display types http://css-tricks.com/almanac/properties/d/display/

Upvotes: 0

Patrick Moore
Patrick Moore

Reputation: 13354

Need to add display: inline; to the <li> element as well. Otherwise, it's still blocked.

Upvotes: 1

Related Questions