Skip to content

Instantly share code, notes, and snippets.

@auguztx
Created August 24, 2015 10:11
Show Gist options
  • Save auguztx/ba3dffa0a2dd59aa0ca1 to your computer and use it in GitHub Desktop.
Save auguztx/ba3dffa0a2dd59aa0ca1 to your computer and use it in GitHub Desktop.
Simple Pure CSS Drop Down Menu
<nav id="primary_nav_wrap">
<ul>
<li class=""><a href="#">หน้าแรก</a></li>
<li><a href="#">ห้องพัก</a>
<ul>
<li id="submenu"><a href="#" >สระว่ายน้ำ</a></li>
<li><a href="#">บ้านส้มยูงทอง</a></li>
<li><a href="#">บ้านฟ้าพวงคราม</a></li>
<li><a href="#">บ้านม่วงเสลา</a></li>
<li><a href="#">บ้านเหลืองราชพฤกษ</a></li>
</ul>
</li>
<li><a href="#">กิจกรรม</a> </li>
<li><a href="#">ท่องเที่ยว</a> </li>
<li><a href="#">ติดต่อเรา</a></li>
</ul>
</nav>

Simple Pure CSS Drop Down Menu

I was in need of a very style agnostic drop down menu and struggling to find one. So I built one!

I have made subtle change for submenus to use top and bottom padding in conjunction with a smaller line-height to accommodate multi-lined sub-menu items.

Forked from Phil Hoyt's Pen Simple Pure CSS Drop Down Menu.

A Pen by Captain Anonymous on CodePen.

License.

#primary_nav_wrap
{
margin-top:0px;
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin-left:0;
padding:0;
}
#primary_nav_wrap ul a
{
text-align:center;
display:block;
color:#333;
text-decoration:none;
font-weight:400;
font-size:35px;
line-height:60px;
padding:0 15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap ul li
{
width:230px;
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:#26B9DA
}
#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:230px
}
#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
}
#primary_nav_wrap ul ul li a
{
font-size:20px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment