CODEWITHSUNDEEP
jquerycss
Marcelo Barganha
Marcelo Barganha

Reputation: 379

Why this list is shown as inline?

I'm trying to create a simple dropdown. So I created a list like this (with the following HTML, CSS and JavaScript:

$(document).ready(function() {

  $("#fSub01").hover(function() {
    $("#sub01").show("fast");
  });

});
#myList li {
  display: inline-block;
  padding-left: 8px;
  padding-right: 8px;
  background: #D6D6D6;
}

#myList li:hover {
  background: #C4C4C4;
  cursor: pointer;
}

.MySubList {
  display: none;
  position: absolute;
  border: 1px inset grey;
  -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  -moz-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
  margin-left: -8px;
}

.MySubList li {
  display: block;
  width: 250px;
  padding-left: 8px;
  padding-right: 8px;
  background: #D6D6D6;
  border-bottom: 1px solid white;
  border-top: 1px solid #c4c4c4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
  <li id="fSub01">Alunos
    <ul class="MySubList" id="sub01">
      <li>1</li>
      <li>2</li>
    </ul>
  </li>
  <li id="fSub02">Professores
    <ul class="MySubList" id="sub02">
      <li>3</li>
      <li>4</li>
    </ul>
  </li>
</ul>

My idea is to show the sublist when hovering using jQuery. However, the sublist is appearing inline instead of in the block (up from above).

Why is this happening, and how can I fix it?

Upvotes: 1

Views: 38

Answers (2)

Konrad Butisch
Konrad Butisch

Reputation: 21

Specificity is one of the concepts behind CSS most notice only by accident. Browsers have to determine which CSS selector is more important for a DOM node (aka HTML element) than others to apply CSS styles in a consistent manner. So specificity makes clear which CSS selector takes precedence and every selector you write has it's own specificity.

From the most to the least important parts of a selector:

  1. Inline styles in HTML are prioritized over styles in your CSS
  2. ID selectors (#id)
  3. Class (.class), attribute and pseudo class selectors
  4. Element selectors

So a selector with one ID is more specific than a selector with e.g. eight classes:

#myDiv { color: blue; }
.one.two.three.four.five.six.seven.eight { color: red; }

The text color will be blue. So a recommendation: Try to use only one level of specificity in your CSS, like only use classes and no IDs. This avoids any specificity conflicts, since .one.two.three will always win over a single .one selector.

Upvotes: 0

j08691
j08691

Reputation: 207916

This is all about CSS specificity. Your first li rules are more specific than your second rules and and therefore applied. An easy fix? Just add the ID you have in front of the rules you have.

So:

.MySubList li

becomes:

#myList .MySubList li 


  $("#fSub01").hover(function() {
        $("#sub01").show("fast");
    });
#myList li {
    display:inline-block;
    padding-left:8px;
    padding-right:8px;
    background:#D6D6D6;
}

#myList li:hover {
    background:#C4C4C4;
    cursor:pointer;
}

#myList .MySubList {
    display:none;
    position:absolute;
    border:1px inset grey;
    -webkit-box-shadow: 2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    -moz-box-shadow:    2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    box-shadow:         2px 2px 2px 0px rgba(50, 50, 50, 0.72);
    margin-left:-8px;
}

#myList .MySubList li {
    display:block;
    width:250px;
    padding-left:8px;
    padding-right:8px;
    background:#D6D6D6;
    border-bottom:1px solid white;
    border-top:1px solid #c4c4c4;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="myList">
        <li id="fSub01">Alunos
            <ul class="MySubList" id="sub01">
                <li>1</li>
                <li>2</li>
            </ul>
        </li>
        <li id="fSub02">Professores
            <ul class="MySubList" id="sub02">
                <li>3</li>
                <li>4</li>
            </ul>
        </li>
</ul>

Upvotes: 3

Related Questions