CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Thomas Yamakaitis
Thomas Yamakaitis

Reputation: 463

HTML & jQuery - Need Dropdown to Overlap Elements

I have a particular situation on my website. I am trying to make the navigator dropdown overlap the elements below it, but instead it shifts them down when it is open. You can see the issue here (http://beta.wreckmodz.com/) with the "Sample Sites" Tab. Below is my HTML for the Navigation Bar.

<nav>
    <a href="/index"><item>Home</item></a>
    <a href="/request"><item>Request Service</item></a>
    <a href="/contact"><item>Contact Us</item></a>
    <a href="/about"><item>About Us</item></a>
        <item class="dropdown">Sample Sites
        <li>
            <a href="/tipcalc/index">
                <item>TipCalc</item>
            </a>
        </li>
        <li>
            <a href="/example-1/index">
                <item>Sample #1</item>
            </a>
        </li>
        <li>
            <a href="http://ucpcs.wreckmodz.com/">
                <item>Sample #2</item>
            </a>
        </li>
    </item>
    <a href="/shop"><item>Shop</item></a>
</nav>

Here is my CSS:

nav {
    display: block;
    background: rgba(255,255,255,0.9);
    box-shadow: 1px 1px 5px #000000;
    height: 38px;
    margin-bottom: 1%;
    overflow: visible;
}
item {
    display: block;
    border-right: 1px dotted #000000;
    float: left;
    width: auto;
    padding: 3px;
    padding-left: 10px;
    padding-right: 10px;
    color: #0099ff;
    line-height: 200%;
}
item:hover {
    background: #000000;
    color: #ffffff;
}
li {
    display: none;
    list-style: none;
}
a:link, a:visited {
    color: #0099ff;
    text-decoration: none;
}
a:hover {
    color: #ffffff;
}

Here is my jQuery/JavaScript Code:

 $(document).ready(function(){
    $('item.dropdown').mouseenter(function(){
    $('li').fadeIn(100);
    });

    $('item.dropdown').mouseleave(function(){
    $('li').fadeOut(100);
 });

Upvotes: 0

Views: 69

Answers (3)

Farzad Yousefzadeh
Farzad Yousefzadeh

Reputation: 2551

Use this jquery code:

$(document).ready(function(){
    $('item.dropdown').hover(function(){
        $('li').fadeIn(100);
    }, function() {
        $('li').fadeOut(100);
    });
 });

Also this css: (Manipulate top and right property as you wish but to make item.dropdown not shift other elements down, you have to make it absolute positioned)

nav {
    position: relative;
}
item.dropdown {
    position: absolute;
    top: 0;
    right: 0;
}

Sorry added my fiddle wrongly here ... moving to my answer.

Upvotes: 0

Deadpool
Deadpool

Reputation: 8240

I hope you meant this only. Enjoy ;) 

$(document).ready(function(){
    $('#img1').mouseenter(function(){
        $(this).css('z-index','1');
        $('#img2').css('display','block').css('opacity','0.53').css('z-index','2');
    });

});

See the following fiddle: https://jsfiddle.net/dodkmrof/4/

Upvotes: 0

Aaron
Aaron

Reputation: 10430

Ive edited your HTML and CSS a little but this should work for you.

$(document).ready(function() {
  $('li.dropdown').mouseenter(function() {
    $('.sub').fadeIn(100);
  });

  $('li.dropdown').mouseleave(function() {
    $('.sub').fadeOut(100);
  });
});
nav {
  display: block;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 1px 1px 5px #000000;
  height: 38px;
  margin-bottom: 1%;
  overflow: visible;
}
.sitenav,
.sub {
  list-style: none;
  padding-left: 0;
}
.sitenav > li {
  float: left;
}
.sitenav > li a,
.dropdown {
  display: block;
  border-right: 1px dotted #000000;
  float: left;
  width: auto;
  padding: 3px;
  padding-left: 10px;
  padding-right: 10px;
  color: #0099ff;
  line-height: 200%;
  position: relative;
}
li a:hover {
  background: #000000;
  color: #ffffff;
}
.sub {
  display: none;
  list-style: none;
  left: 0;
  width: 100%;
  position: absolute;
}
.sub li a {
  float: none;
}
a:link,
a:visited {
  color: #0099ff;
  text-decoration: none;
}
a:hover {
  color: #ffffff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<nav>
  <ul class="sitenav">
    <li> 
      <a href="/index">Home</a>
    </li>
    <li> 
      <a href="/request">Request Service</a>
    </li>
    <li> 
      <a href="/contact">Contact Us</a>
    </li>
    <li> 
      <a href="/about">About Us</a>
    </li>
    <li class="dropdown">Sample Sites
      <ul class="sub">
        <li>
          <a href="/tipcalc/index">TipCalc</a>
        </li>
        <li>
          <a href="/example-1/index">Sample #1</a>
        </li>
        <li>
          <a href="http://ucpcs.wreckmodz.com/">Sample #2</a>
        </li>
      </ul>
    </li>
    <li> 
      <a href="/shop">Shop</a>
    </li>
  </ul>
</nav>

Upvotes: 1

Related Questions