You could use the CSS rules display: table on the <ul> and display: table-cell on the <li>. This will cause the menu to fit perfectly into the horizontal space. I...

My ul "reset" looks something like this: ul { list-style-type: none; margin: 0; padding: 0 } ...

Modern Approach - CSS3 Flexboxes Now that we have CSS3 flexboxes, you no longer need to resort to tricks and workarounds in order to make this work. Fortunately, browser support...

Just add ul { list-style-position: inside; } because by default it is set to outside, not sure why.

Set the height on LI instead of A: li {height:50px;} http://jsfiddle.net/qrzwD/3/ The newly appended A is making the LI change the overall height...

You'd better use background for LI elements. li{ list-style:none; height: "the height of your bullet image"; line-height: "same value as above"; background:url("bg.png") no-repeat 0 50%; padding-left: "the width of your...

Images that convey information are content, not presentation or background. Use an <img> element. <li class="home"><a href="home"><img src="images/navigation_home.png" alt="Home"></a></li> ...

To make the li elements appear in a row, you have to add the display:inline property to them and the white-space:nowrap property to their parent ul or the #menu div,...

You can use text-indent alone or padding-left and reduce width by the same amount.

With your posted mark-up, and the best guess I could make of the intent of your question (your title doesn't really match the example you linked to), I came up...

Make the li have a background image that is positioned to be far enough from the top that the text will not overlap it. Here is a how you position...

With an horizontal padding? padding-left:5px , padding-right:5px; Or you can use relative positioning and a distance from left: ul li:nth-child(2) { /* second item */ position:relative; left:5px; } ul li:nth-child(3)...

.subMenu li a { background: none; } if it is not sticking, you can add the !important flag .subMenu li a { background: none !important; } ...

You can do this by implementing a custom counter as a pseudo-element before each <li> on your ordered list: HTML: <ol> <li>STUFF</li> <li>Stuff</li> <li>Stuff</li> </ol> CSS: ol { list-style: none;...

list-style-image should be applied to the <li> not the <ul> Like this: .checklist li{ list-style-image: url('http://alexisexhibits.com/wp-content/uploads/2016/04/checkmark-ul.jpg') !important; } ...

You could go with : <li> <a href="/search.php" <?php if(strstr($_SERVER["REQUEST_URI"], "YOURPATH/index.php")) echo "class='selected'"; ?> > Home </a> </li> or using the Javascript equivalent "document.URL". Might not be the cleanest solution...

One approach is to do something simple like this. .currentItem { padding-bottom: 6px; /*Increase padding by width of border */ margin-bottom: -6px; /* Offset by that amount, or use relative...

These kind of questions are just fun to answer step-by-step. The basics of the solution is to display all list items as inline-block: .calendar > ol > li { display:...

Example: http://jsfiddle.net/4cs9h/ $('ul > li > a').click(function() { var $th = $(this).parent(); if( !$th.hasClass('current') ) { $th.addClass('current') .siblings('.current').removeClass('current'); loadPage(this.href); } return false; }); The $th variable refers to the parent...

the ul with the class = "shortcut-buttons-set" inherits a padding-left:40px; try to overwrite that in the "shortcut-buttons-set" class

Bryan, thanks. I basically did something to what you suggested. I already had a class called ".selected", which was used to display the selected tab for the menu. in the...

Reset the default styles applied by the browser to ul tags. .sidebar-sublist{ padding: 0px; margin: 0px; } Also remove the left padding from .sidebar-parent....

You should add position:relative and z-index: 101 to your ul to make both of those things happen: #nav li:hover ul{ left:0; position: relative; z-index: 101; } Here is a fiddle:...

If you give the first li of each new row a class with the CSS of "clear:both", it should work. Check this out and see if it's what you're looking...

Modify this style: #menu li { margin: 1px; padding: 0; float: left; } Like this: (You are missing list-style property) #menu li { margin: 1px; padding: 0; float: left; list-style:none;...

I found another way of doing this: <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <style> ul {list-style: none; margin: 0; padding: 0;} li {position: relative; overflow: hidden;} a {display: block;}...

ul has by default margin and padding, so reset it body { padding: 0; margin: 0; font-family: sans-serif; } header { background: #00795f; width: 100%; padding: 40px 0; /* 40px...

The <ol> tag has a start attribute that you can use: <ol type="i" start="501"> <li>Item 501</li> <li>Item 502</li> <li>Item 503</li> <li>Item 504</li> </ol> You just need to specify the starting...

Add this to your CSS file: .ui-layout-pane-east { padding: 0 !important; } Don't do this from the browser's inspector. jQuery UI's inner workings are supposed to calculate widths on page...

There is a pretty thorough (albeit a bit older) guide I've looked at before here: CSS Swag: Multi-Column Lists