HTML CSS examples for CSS Widget:UL
Make top navigation bar with div and UL
<html> <head> <title>Issue with nav-pills on a Wordpress Site</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> .nav-grey-band {<!-- ww w . ja v a 2 s. c om--> line-height:0.6; } .nav-grey-band { background-color:Chartreuse; color:yellow; font-size:21px; } .centered-pills { text-align:center; padding-bottom:0px !important; } .centered-pills ul.nav-pills { display:inline-block; } .nav { padding-left:0px; margin-bottom:0px; list-style:outside none none; } ol, ul { margin-top:0px; margin-bottom:11px; } * { box-sizing:border-box; } .centered-pills li { display:inline; } .nav-pills>li { float:left; } .nav-pills>li>a { border-radius:0px; } .nav>li>a { position:relative; display:block; padding:11px 16px; } .centered-pills a { float:left; } .nav-grey-band a { color:blue; padding-bottom:31px !important; padding-top:31px !important; } a { text-decoration:none; } .nav-pills>li + li { margin-left:3px; } .centered-pills li { display:inline; } .nav-pills>li { float:left; } .nav>li { position:relative; display:block; } * { box-sizing:border-box; } .nav>li>a:focus, .nav>li>a:hover { text-decoration:none; background-color:pink; } .nav-pills>li.current_page_item>a, .nav-pills>li.menu-item>a:focus, .nav-pills>li.menu-item>a:hover { color:WhiteSmoke; background-color:OrangeRed; } </style> </head> <body> <div class="nav-grey-band"> <div class="centered-pills"> <ul id="menu-main-menu-1" class="nav nav-pills"> <li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-20 current_page_item menu-item-22"> <a href="myandrew-day/">Test</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-25"> <a href="myelspeth-day/">Day</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"> <a href="mygeorge-day/">ASDF</a> </li> <li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"> <a href="myhenry-day/">Yes</a> </li> <li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-19"> <a href="#">Good</a> </li> </ul> </div> </div> </body> </html>