CSS drop-down menu, link cut in half -


How do I create a pure CSS drop-down menu, and I'm seeing a strange issue I have searched and nothing has been found useful.

If you hover over the blog link, you will split "case studies" by half, the "case" and "study" on the line next to the next line.

I checked my HTML and it looks fine. It's been a long day, maybe I'm seeing something clear. : O << / p>

I still have this:

  & lt; nav class = "p-nav" & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; About & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Showcase & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Service & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Blogs & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Case Studies & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Tutorial & lt; / A & gt; & Lt; Ul & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; CSS & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; JavaScript & lt; / A & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Playground & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / li & gt; & Lt; Li & gt; & Lt; A href = "#" & gt; Contact & lt; / A & gt; & Lt; / li & gt; & Lt; / Ul & gt; & Lt; / Neo & gt; @import url (http://fonts.googleapis.com/css?family=Lato:300, 400); .p-nav li {status: relative; } .p-nav ul ul {display: none; Status: Completed; top 100%; } .p-nav ul li {float: left; } .p-nav a {display: block; Font: 300 "100% / 70px" Layable ", without-Serif; Padding: 0 30px; } .p-nav ul li: hover & gt; Ul {display: block; }   

Here is the link to the code:

Can anyone explain why this is so, and how can I fix it?

TIA

The reason for the space "problems" it puts those two words on two rows. If you do not like it, then you white-space: ipod; to and

  • gt; , so you want to wrap it, look at Bella:
      .p-nav li {status: relative; White-space: nowrap; }    

  • 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 -