UL takes up full width without gaining width

Question

I want the width of the UL to match the longest text in whether, however, if I don't set the width for my ul (currently 28.5%), it just takes up 100%. Tried to use max-width, but that also failed.

the code:

<ul class="nav-shop">
            <li class="nav-shop-sub">
                    <a href="mylink">Link</a>
                    </li>

             <li class="nav-shop-sub">
                    <a href="mylink">Link2</a>
                    </li>
</ul>

CSS

ul.nav-shop {
    width: 28.5%;
    background: #15a2e7;
    min-height: 38em;
    margin: -11px;
}
li.nav-shop-sub {
    padding-left: .83333em; 
    display: block;
    float: left;
    margin-top: 20px;
    margin-bottom: -25px;
    width: 96%;
}
li.nav-shop-sub:hover {
    background: #f2f2f2!important;  
}
li.nav-shop-sub:hover a {
    color: #2980b9!important;   
}
li.nav-shop-sub>a {
    border-bottom: 1px dotted #999;
    display: inline-block!important;
    font-size: 1.1667em;
    line-height: 1.429;
    margin: -1px;
    padding: .42857em .28571em .57143em!important;
    position: relative!important;
    width: 100%; 
    color: #ffffff!important;
}
div.grid.nav-shop-wrapper.has-product-noms::before, ul.grid-item.list-stacked.link-list::before {
    display: table;
    content: "";
}
ul.grid-item.list-stacked.link-list::after, div.grid.nav-shop-wrapper.has-product-noms::after {
    clear: both;
    display: table;
    content: "";
}

Please note that this is original CSS. Tried to remove all mentions of width, but the same thing happens.

Answer 1

Remove

width: 28.5%;

and add

display: inline-block;

at

ul.nav-shop {

Answer 2

Yes, ul is a block level element, so full width is required. If you want to specify the width of the element, you can use the inline block.

Answer 3

ul

display: inline-block;

Answer 4

display: inline-block,

.

,

float: left

.