Create the nav bar as per a standard vertical sidebar using unordered list markup but then use with float:left; or display:inline; on the li to create a horizontal list.
Thread Starter
MTV
(@mtv)
I couldn’t figure out how to display child categories under the main menu.
<div id=”navbar”>
<ul id=”menu”>
<li<?php if(!is_category() && !is_page() && !is_single()) { ?> class=”current-cat”<?php } ?>>” title=”Home”><?php print HOME; ?>
<?php wp_list_categories(‘orderby=ID&order=ASC&depth=1&hide_empty=0&title_li=’); ?>
</div>
#navbar {
background:#fafafa;
margin-bottom:15px;
height:25px;
font-size:14px;
}
ul#menu li {
display: inline;
float:left;
width: auto;
}
ul#menu li a {
display: block;
color:#333;
border-right:1px solid #555;
padding:4px 10px 4px 10px;
}
ul#menu li a:hover {
text-decoration:underline;
}
ul#menu li.current-cat a {
color:#fff;
background:#f7f7f7;
text-decoration:none;
}
ul#menu li ul {
position: absolute;
width: 180px;
z-index:999;
left: -999em;
border-bottom:1px solid #777;
}
ul#menu li li {
display: inline;
float: left;
width: 180px;
}
ul#menu li li a {
background: #999;
float: none;
color:#222;
letter-spacing:-1px;
padding: 3px 10px;
border-top: 1px solid #afafaf;
border-right:0;
width:auto;
}
ul#menu li li a:hover, ul#menu li li a:active {
background: #ddd;
color:#000;
text-decoration:none;
}
ul#menu li:hover ul, ul#menu li.sfhover ul {
left: auto;
display:block;
}
Thread Starter
MTV
(@mtv)
can someone helps me please
