html - Dropdown menu pushes bottom link down -


The dropdown menu works, but it pushes the link from below. I could not understand why this is happening. Having been with breadth or I am missing something please help me please let me remember something. Here is my HTML and CSS

    

and css

  .linkbar {width: 200px; Height: 300px; Padding-top: 180px; Float: None; Margin: 0 auto; } Ul, ol {list-style: none; Line-height: 25px; } .nav & gt; li {float: left; } .nav li {display: inline-block; Cursor: indicator; Color: #fff; Font-family: 'helvetia'; Font-size: 15px; Text-decoration: none; Change the text: none; Text-align: left; Width: 250px; Height: 35px; line-height: 23px; Margin top: 1px; margin-left: -25px; }. Nav li a: Hover {Color: # 999; } .nav li ul {display: none; Status: Relative; Minimum-width: 20px; Correct: -110px; Top: -30px; }. nav li: hover & gt; Ul {display: block; } .nav li a.current-demo {color: # cc3333; Lesson shadow: none; }   

jsfiddle here

try it out, .linkbar {width: 200px; Height: 300px; Padded-top: 180px; Float: None; Margin: 0 auto; } Ul, ol {list-style: none; Line-height: 25px; } .nav & gt; Li {float: left; } .nav li {display: inline-block; Cursor: indicator; Color: #fff; Font-family: Helvetica; Font-size: 15px; Text-decoration: none; Change the text: none; Text-align: left; Width: 250px; Height: 35px; line-height: 23px; Margin top: 1px; Margin-left: -25px; }. Nav li a: Hover {Color: # 999; } .nav li ul {display: none; Status: Completed; Minimum-width: 20px; Margin-left: 50px; Margin top: -35px; }. nav li: hover & gt; Ul {display: block; } .nav li a.current-demo {color: # c33; Lesson shadow: none; }

is working here

Comments

Popular posts from this blog

Verilog Error: output or inout port "Q" must be connected to a structural net expression -

jasper reports - How to center align barcode using jasperreports and barcode4j -

c# - ASP.NET MVC - Attaching an entity of type 'MODELNAME' failed because another entity of the same type already has the same primary key value -