Как я могу заставить работать box-shadow с добавленными полями?

Когда я добавляю маржу, он добавляет 5px вправо, как я ожидаю, но это создает проблемы с моей тенью. Я хочу, чтобы ящик-тень мог покрывать это пространство (пустое пространство), созданное полями. Есть ли для этого работа? Очевидно, если у вас нет полей, то коробка-тень выглядит фантастически.

Вот мой CSS

    #horizontalNav{
        margin: 0;
        padding: 0;
    }

    #horizontalNav ul{
        margin: 0;
        padding: 0;
        box-shadow: 5px 5px 10px #888888;


    }

    #horizontalNav ul li{
        margin-right: 5px;  /* Make this margin a 0 to see what it looks like without margin added */
        padding: 0;
        list-style: none;
        position: relative;
        float: left;

        background: linear-gradient(to bottom right, rgba(181,147,38,0.1), rgba(181,125,22,1));

    }

    #horizontalNav ul li a{
        text-align: center;
        width: 150px;
        height: 30px;
        display: block;
        color: white;
        border: 1px solid black;
        text-decoration: none;
        text-shadow: 1px 1px 1px black;
    }

    #horizontalNav ul ul{
        position: absolute;
        visibility: hidden;
        top: 32px;
    }

    #horizontalNav ul li:hover ul{
        visibility: visible;
    }

    #horizontalNav ul li:hover{

        background: linear-gradient(to bottom right, rgba(167,120,38,0.1), rgba(167,136,42,1));  
    }

    #horizontalNav ul li:hover ul li a:hover{
        background: linear-gradient(to bottom right, rgba(180,105,45,0.1), rgba(180,135,15,1));
    }

    #horizontalNav ul li a:hover{
        color: black;
    }

    #horizontalNav ul li ul li a:hover{
        color: #120801;
    }

Вот мой HTML

<div id="wrapper">
       <div id="horizontalNav">
         <ul>
            <li><a href="#">Home</a>
                <ul>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                    <li><a href="#">Home Sub 1</a></li>
                </ul>
            </li>
         </ul>
       </div> 
</div>