5 Replies - 589 Views - Last Post: 31 July 2014 - 09:00 AM

#1 shashiravi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-July 14

CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 06:22 AM

Help me! CSS menu is shifting anything written below to right of it on hovering over it.



 


<!Doctype html>
<html>
<head>
<style type="text/css">
* {padding:0;margin:0;}
ul{padding:0;margin:0;border:1px solid black;display:inline;}
li {
      float:left;
      list-style-type:none;
   }
a { display:block;
      width:90px;
      padding-top:3px;
      padding-bottom:3px;
      color:white;
      font-weight:bold;
      text-decoration:none;
      background: limegreen;
      font-size:14px;
      font-family:verdana;
      text-align:center;
      border-radius:5px;
}
ul#menu li ul.sub-menu li{float:none;}
ul#menu li  ul.sub-menu {display:none;}
ul#menu li:hover ul.sub-menu {display:block;}

a:hover
{
background-color:#7A991A;
}
</style>
</head>
<body>
<div style="position:relative;margin: 0 auto;width:365px;">
<ul id="menu"  style="z-index:11;position:relative;">
      <li><a href="#">Food</a></li>
      <li><a>Beverages</a>
	<ul class="sub-menu" >
       	        <li><a href="#">Tea</a></li>
                        <li><a href="#">Coffee</a></li>
	</ul>
      </li>
      <li><a href="#">Snacks</a></li>
      <li><a href="#">About</a></i>
</ul>

<p  style="z-index:1;position:relative;border:1px solid black;"> Hello how are u bunny ? </p>
</div>
</body>
</html>




Is This A Good Question/Topic? 0
  • +

Replies To: CSS Drop Down Menu is shifting the contents below it

#2 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 06:50 AM

It's because of the sub-menu's 1px width border : it adds up to the width of the element.
Was This Post Helpful? 0
  • +
  • -

#3 shashiravi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-July 14

Re: CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 07:33 AM

View Postge∅, on 31 July 2014 - 06:50 AM, said:

It's because of the sub-menu's 1px width border : it adds up to the width of the element.



Its not working even after removing borders of both the elements: ul & p.
Was This Post Helpful? 0
  • +
  • -

#4 andrewsw  Icon User is online

  • It's just been revoked!
  • member icon

Reputation: 3806
  • View blog
  • Posts: 13,489
  • Joined: 12-December 12

Re: CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 07:56 AM

You can fix the content shifting temporarily with this:
ul{padding:0;margin:0;border:1px solid black;display:inline; position: absolute;}
li {
      float:left;
      list-style-type:none; position: relative;
   }

(It also enables you to move down into the sub-menu, which you cannot currently.)

but I suggest you go through a tutorial or two on css-menus to understand what is needed to get them to work reliably.

This post has been edited by andrewsw: 31 July 2014 - 07:59 AM

Was This Post Helpful? 0
  • +
  • -

#5 shashiravi  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 31-July 14

Re: CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 08:30 AM

View Postandrewsw, on 31 July 2014 - 07:56 AM, said:

You can fix the content shifting temporarily with this:
ul{padding:0;margin:0;border:1px solid black;display:inline; position: absolute;}
li {
      float:left;
      list-style-type:none; position: relative;
   }

(It also enables you to move down into the sub-menu, which you cannot currently.)

but I suggest you go through a tutorial or two on css-menus to understand what is needed to get them to work reliably.



thanks! this worked...:)
Was This Post Helpful? 0
  • +
  • -

#6 ge∅  Icon User is offline

  • D.I.C Addict

Reputation: 81
  • View blog
  • Posts: 577
  • Joined: 21-November 13

Re: CSS Drop Down Menu is shifting the contents below it

Posted 31 July 2014 - 09:00 AM

Right, When I pasted your code in JsFiddle and saw the menu flickering I totally forgot about the original question, sorry XD
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1