Simple Pure CSS Drop Down Menu




Ένα αναδιπλωμένο menu με εφέ κίνησης προ στακάτο


Η προσαρμογή είναι πολύ εύκολη, μπορείτε να το εγκαταστήσετε στο blog σας κάνοντας αντιγραφή και επικόλληση τον παρακάτω κώδικα!

CSS

<styel>
/* foulscode.com */
#primary_nav_wrap
{
margin-top:15px
}

 #primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}

 #primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}

 #primary_nav_wrap ul li
{
position:relative;
float:left;
margin:0;
padding:0
}

 #primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}

 #primary_nav_wrap ul li:hover
{
background:#f6f6f6
}

 #primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}

 #primary_nav_wrap ul ul li
{
float:none;
width:200px
}

 #primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px 15px
}

 #primary_nav_wrap ul ul ul
{
top:0;
left:100%
}

 #primary_nav_wrap ul li:hover > ul
{
display:block
}
/* foulscode.com */
</style>

HTML
<nav id="primary_nav_wrap">
<ul>
  <li class="current-menu-item"><a href="URL">Home</a></li>
  <li><a href="URL">Menu 1</a>
    <ul>
      <li><a href="URL">FoulsCode.com</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a>
        <ul>
          <li><a href="URL">Deep Menu 1</a>
            <ul>
              <li><a href="URL">Sub Deep 1</a></li>
              <li><a href="URL">Sub Deep 2</a></li>
              <li><a href="URL">Sub Deep 3</a></li>
                <li><a href="URL">Sub Deep 4</a></li>
            </ul>
          </li>
          <li><a href="URL">Deep Menu 2</a></li>
        </ul>
      </li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 2</a>
    <ul>
      <li><a href="URL">Sub Menu 1</a></li>
      <li><a href="URL">Sub Menu 2</a></li>
      <li><a href="URL">Sub Menu 3</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 3</a>
    <ul>
      <li class="dir"><a href="URL">Sub Menu 1</a></li>
      <li class="dir"><a href="URL">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE NOT?</a>
        <ul>
          <li><a href="URL">Category 1</a></li>
          <li><a href="URL">Category 2</a></li>
          <li><a href="URL">Category 3</a></li>
          <li><a href="URL">Category 4</a></li>
          <li><a href="URL">Category 5</a></li>
        </ul>
      </li><a href="URL">Sub Menu 3</a></li>
      <li><a href="URL">Sub Menu 4</a></li>
      <li><a href="URL">Sub Menu 5</a></li>
    </ul>
  </li>
  <li><a href="URL">Menu 4</a></li>
  <li><a href="URL">Menu 5</a></li>
  <li><a href="URL">Menu 6</a></li>
  <li><a href="URL">Contact Us</a></li>
</ul>
</nav>


Αφήστε το σχόλιο σας αν αντιμετωπίσετε κάποιο πρόβλημα...
Κατηγορίες:
Σχόλια