Help with horizontal nav bar

[jace.m]

Hey!

I am relatively new to CSS and HTML, what I basically do is some sort of Reverse Engineering -- I downloaded a template from w3 and tried to tweak it for work. Admittedly, I am a noob and doesn't fully understand what the codes mean.

I need your advice on how I can edit the CSS code to stop breaking the nav bar whenever the screen is not maximised. I know the links/text can shrink so i'm thinking maybe the nav bar doesn't have to break or rearrange the links to several lines.

The actual site is saved locally at the moment and here's the css code for the menu.

 

 

/*--menu--*/
.menu {
border-bottom: 5px solid #096DB9;
    width: 100%;
}
.toggleMenu {
    display:  none;
    background: #666;
    padding: 0;
    width: 100%;
    color: #fff;
}
.top-nav{
background: #014279;
}
.nav {
    list-style-type: none;
     *zoom: 1;
    width: 100%;
     float:left;
}
.nav:before,
.nav:after {
    content: " "; 
    display: none;
    width: 0; 
}
.nav:after {
    clear: both;
}
.nav ul {
    list-style: none;
    width: 100%;
}
.nav a {
    color: #FFF;
font-size: 100%; 
}
.nav li.active> a, .nav li> a:hover {
color:#FF0000; 
}
.nav li {
    position: relative;
    padding: 1px 15px;
    font-family: 'Open Sans', sans-serif;
}
.nav > li {
    float: left;
}
.nav > li > a {
    display: float;
}
.nav li  ul {
    position: absolute;
    left: 100%;
}
.nav > li.hover > ul {
    left: 0;
}
.nav li li.hover ul {
    left: 100%;
    top: 0;
    -webkit-transition: background .2s linear;
-moz-transition: background .2s linear;
-ms-transition: background .2s linear;
-o-transition:  background .2s linear;
transition: background .2s linear;
}
.search{
float:left;
padding-top:0.2em;
}
.search input[type="text"] {
outline: none;
padding:5px 16px;
outline: none;
color: #fff;
background:none;
border: 1px solid #096DB9;
width: 78.33%;
line-height: 1.5em;
font-size: 0.8125em;
}
.search input[type="submit"] {
background: #FF0000 url('../images/search.png') no-repeat 9px 9px;
padding: 6px 15px;
border: none;
cursor: pointer;
width: 1.33%;
position: absolute;
line-height: 1.5em;
outline: none;
}
.search input[type="submit"]:hover{
background:#001C32 url('../images/search.png') no-repeat 9px 9px;
}
 

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}
 
.dropdown {
    position: relative;
    display: inline-block;
}
 
.dropdown-content {
    display: none;
    position: relative;
    background-color: #003366;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
 
.dropdown-content a {
    color: white;
    padding: 8px 12px;
    text-decoration: none;
    display: block;
}
 
.dropdown-content a:hover {background-color: #FF0000}
 
.dropdown:hover .dropdown-content {
    display: block;
}
 
.dropdown:hover .dropbtn {
    background-color: #003366;
}

[jace.m]

Thanks for your help!

 

For your reference, the HTML code looks like this:

 

 

<div class="menu">
<div class="wrap">
<div class="top-nav">
     <ul class="nav">
           <li class="active">
<li><a href="LeasingSS.html">Leasing S&S</a></li>
<li><a href="CardsSS.html">Cards S&S</a></li>
<li><a href="Collections.html">Collections</a></li>
<li><a href="Blink.html">Blink</a></li>
<li><a href="CreditSupport.html">Credit & Support</a></li>
<li><a href="Admin.html">Admin</a></li>
<li><a href="Ireland.html">Ireland</a></li>
<li><a href="LDCQ.html">LD&CQ</a></li>
<li><div class="dropdown">
   <spaN><a href="engagement.html">Engagement</a></span>
   <div class="dropdown-content">
    <p><a href="flexifeature.html">Flexi Feature</a></p>
<p><a href="engagement.html">Audience with Chris</a></p>
<p><a href="Engagement.html">Fun Fridays</a></p>
<p><a href="Engagement.html">COC Leaderboard</a></p>
   </div>
</div></li>
 
 
<div class="clear"></div>
</ul>
 
</div>
<div class="clear"></div>
</div>