Skip to content

Instantly share code, notes, and snippets.

@s-hiroshi
Last active December 11, 2015 17:29
Show Gist options
  • Save s-hiroshi/4634908 to your computer and use it in GitHub Desktop.
Save s-hiroshi/4634908 to your computer and use it in GitHub Desktop.
CSS > menu
/*
horizonal menu template
example
<ul id="menu-global" class="menu">
<li>item1
<ul class="children>
<li>children item1</li>
</ul>
</li>
<li>item2</li>
</ul>
*/
/* -------------------------------------------------------------------
menu
------------------------------------------------------------------- */
/* menu common style
---------------------------------------------------- */
.menu {
clear: both;
margin: 0 !important; /* override bootstrap */
}
.menu li {
position: relative;
float: left;
list-style: none;
}
.menu li a {
display: block;
text-align: center;
text-decoration: none;
}
.menu li a:hover {
text-decoration: underline;
}
/* children ul */
.children {
display: none;
float: none; /* ul of children aligin li vertical */
position: absolute;
min-width: 160px;
margin: 0;
padding: 0;
background: #F0F0EE;
}
.children li a {
min-width: 160px;
border-right: none !important;
text-align: left;
}
.children li:last-child {
border-bottom: none;
}
/* global menu specification
---------------------------------------------------- */
.menu-global li {
border-right: 1px solid #005588;
}
.menu-global li:last-child {
border: none;
}
/* extra menu specification
---------------------------------------------------- */
.menu-extra li {
border-left: 1px solid #0088CC;
}
.menu-extra li:first-child {
border: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment