Định dạng menu bằng CSS

Chào các bạn, mình là newbie, mình gặp một vấn đề về CSS khi thiết kế menu. mình tạo menu ,khi ở chế độ zoom 100% thì ko sao, nhưng khi tăng hoặc giảm zoom thì các dòng bị dịch chuyển hoặc đẩy xuống dòng. Và không biết mình đặt các tag như vậy có tốt chưa. Mong các bạn giúp đỡ.
Đây là code HTML:

HTML:

<div class="nav-menu">
                <div class="nav-menu-block">
                    <ul>
                        <li class="nav-menu-span"><a href="index.php">Trang chủ</a></li>
                        <li class="nav-menu-span"><a href="#">Danh mục sản phẩm</a></li>
                        <li class="nav-menu-span"><a href="#">Liên hệ</a></li>
                        <li class="nav-menu-span"><form>
                                <input class="txt-search-content"type="text" name="searchcontent" placeholder="Tìm kiếm">
                                <input class="btn-search" type="submit" name="search" value="Tìm">
                        </form></li>
                    </ul>
                </div>
</div>

còn đây là CSS:

Code:

.nav-menu{
    width:75%;
    background: none;
    height:50px;
    clear:both;
    position:absolute;
    right:0;
    top:120px;
    border-top:1px solid #de1819;
    box-shadow: 1px #CCCCCC;
}
 
.nav-menu-block{
    position:relative;
}
 
.nav-menu-block ul{
    margin-top:10px;
    margin-left:20px;
}
.nav-menu .nav-menu-block ul .nav-menu-span{
    color:#000;
    line-height:2em;
    margin:0px 5px 0 5px;
    float:left;
}
 
 
.nav-menu .nav-menu-block ul .nav-menu-span a{
    text-decoration:none;
    color:#000;
    display:block;
    padding: 0 10px;
    text-transform:uppercase;
    font-size: 16px;
    font-weight:500;
    border-right: 1px solid #de1819 !important;
    border:1px solid rgba(255,255,255,0);
    transition: .3s linear;
    -webkit-transition: .3s linear;
 
}
 
.nav-menu .nav-menu-block ul .nav-menu-span a:hover{
    border:1px solid #de1819;
    border-radius: 30px;
    -moz-border-radius: 30px;
    -webkit-border-radius: 30px;
}
.nav-menu .nav-menu-block ul .nav-menu-span form{
/*    display:inline;*/
}
 
.nav-menu .nav-menu-block ul .nav-menu-span .txt-search-content{
    margin-top: 3px;
    margin-left:10px;
    text-indent: 20px;
    width: 180px;
    border-radius: 5px;
    border: 1px solid #CCCCCC;
    line-height: 1.6em;
}
 
.nav-menu .nav-menu-block ul .nav-menu-span .btn-search{
    width: 40px;
    text-indent:2px;
    line-height: 1.6em;
    height:25px;
    border: 1px solid #CCCCCC;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor:pointer;
    margin-top:2px;
}