Beste,
K ben bezig met een dropdown menu enkel komt alles onder elkaar.
K wil graag dat alles naast elkaar en onder elkaar komt dus bijv:
Test Hoi
test1 Hoi1
test2 Hoi2
Wie kan me hiermee helpen?
css:
CSS
#cssmenu {
font-family: 'Open Sans', sans-serif;
color: #fff;
font-size: 15px;
text-align: left;
line-height: 32px;
margin: 0 0 0 75px;
}
#cssmenu > ul {
width: auto;
list-style-type: none;
padding: 0;
margin: 0;
background: #ffffff;
}
#cssmenu > ul li#responsive-tab {
display: none;
/* Hide for large screens */
}
#cssmenu > ul li {
display: inline-block;
*display: inline;
zoom: 1;
}
#cssmenu > ul li.right {
float: right;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub:hover ul {
display: block;
}
#cssmenu > ul li.has-sub ul {
line-height: 10px;
display: none;
width: 500px;
position: absolute;
margin: 0;
padding: 0;
list-style-type: none;
background: #ffffff;
border: 1px solid #ece6e8;
border-bottom: 1px solid #d9ced2;
border-top: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display: inline;
}
#cssmenu > ul li.has-sub > a {
background-repeat: no-repeat;
background-position: 90% -95%;
}
#cssmenu > ul li.has-sub > a.active,
#cssmenu > ul li.has-sub > a:hover {
color: #fff;
background-position: 90% 195%;
}
#cssmenu > ul li a {
display: block;
padding: 12px 24px 11px 24px;
text-decoration: none;
color: #747474;
text-shadow: 0px 1px 0px #fff;
}
#cssmenu > ul li a.active,
#cssmenu > ul li a:hover {
background: url(menu-arrow-hover.png);
background-repeat: no-repeat;
background-position: right 3px center;
background-color: #52D7F0;
font-weight: 700;
}
@media (max-width: 600px) {
#cssmenu > ul {
width: 100%;
}
#cssmenu > ul li#responsive-tab {
display: block;
}
#cssmenu > ul li#responsive-tab a {
background: url('menu.png') no-repeat;
background-position: 95% -35%;
}
#cssmenu > ul li#responsive-tab a:hover {
background-position: 95% 135%;
}
#cssmenu > ul li {
display: none;
}
#cssmenu > ul li.right {
float: none;
}
#cssmenu > ul li.has-sub {
position: relative;
}
#cssmenu > ul li.has-sub ul {
display: block;
position: absolute;
width: 100%;
background: #000;
border: 0 none;
}
#cssmenu > ul li.has-sub ul li {
display:inline;
float:left;
position:relative;
margin:0 5px;
}
#cssmenu > ul li.has-sub ul li a span {
display: block;
padding-left: 24px;
}
#cssmenu > ul li.has-sub ul li span {
display: block;
padding-left: 500px;
}
#cssmenu > ul li.has-sub > a {
background-image: none;
}
}
/* Make sure they show even if hidden in mobile view by JS */
@media (min-width: 600px) {
#cssmenu > ul > li.collapsed {
display: inline-block !important;
*display: inline;
zoom: 1;
}
#cssmenu > ul ul li.collapsed {
display: block !important;
}
}HTML:
Code
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='#' title="test"><span>test</span></a>
<ul>
<li><a href='#'><span>test</span></a></li>
<li><a href='#'><span>test</span></a></li>
<li><a href='#'><span>test</span></a></li>
<li><a href='#'><span>test</span></a></li>
</ul>
</ul>
</div>Wie kan me helpen?