The css for my page goes for awhile. There are 2 files which are imported in the head section of my master page. One is the default.css page and the other is menu.css. I tried to add padding and my nav bar flickered over to the right for a split second, but it came right back. I have read in numerous posts about adding space to use padding between the list items but there is a lot of confusing css and classes. I"m not sure which sections of the css will fix the spacing between the menu items
If someone can help me figure this out, that would be terrific. Here is my .css code and html
<header>
<div class="container">
<div class="navbar navbar-static-top">
<div class="navigation">
<nav>
<ul class="nav topnav bold">
<li class="dropdown active">
<a href="../default.aspx" runat="server">HOME </a>
</li>
<li class="dropdown">
<a href="">RESOURCES<i class="icon-angle-down"></i></a>
<ul style="display: none;" class="dropdown-menu bold">
<li><a href="reverse_mortgages.aspx">REVERSE MTG FAQ</a></li>
<li><a href="reverse_mortgage_resources.aspx">OTHER RESOURCES</a></li>
</ul>
</li>
<li class="dropdown">
<a href="">OUR PROCESS<i class="icon-angle-down"></i></a>
<ul style="display: none;" class="dropdown-menu bold">
<li><a href="loan_proposal.aspx">LOAN PROPOSAL</a></li>
<li><a href="loan_process.aspx">PROCESSING</a></li>
</ul>
</li>
<li class="dropdown">
<a href="../reverse_mortgage_quote.aspx" runat="server">GET QUOTE</a>
</li>
</ul>
</nav>
</div>
<!-- end navigation -->
</div>
</div>
</header>
.css
/* --- header -- */
header {
background: url(../img/menubackground.png) repeat;
margin: 0 0 0 0;
width: 762px;
padding: 10px 0 10px;
border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
border-bottom-left-radius: 10px 10px;
border-bottom-right-radius: 10px 10px;
position: relative;
z-index: 2000;
text-align: left;
}
/* --- menu --- */
header .navigation {
float: left;
}
header ul.nav li {
border: none;
margin: 0;
}
header ul.nav li a {
border: none;
font-weight: 400;
}
header ul.nav li ul {
z-index: 1000;
margin-top: 1px;
}
header ul.nav li ul li ul {
margin: 1px 0 0 1px;
}
header ul.nav li a i {
color: #fff;
}
.container,
.navbar-static-top .container {
width: 750px;
}
.container {
margin-right: 0;
margin-left: 0;
*zoom: 1;
}
.container:before,
.container:after {
display: table;
line-height: 0;
content: "";
}
.container:after {
clear: both;
}
.dropdown {
position: relative;
}
.nav {
margin-bottom: 20px;
margin-left: 0;
list-style: none;
}
.nav > li > a {
display: block;
}
.nav > li > a:hover,
.nav > li > a:focus {
text-decoration: none;
background-color: #eeeeee;
}
.nav > .dropdown.active > a:hover,
.nav > .dropdown.active > a:focus {
cursor: pointer;
}
.navbar .nav a:hover {
background: #333333;
}
.navbar .nav > .active > a, .navbar .nav > .active > a:hover {
font-weight: 600;
}
.navbar .nav > .active > a:active, .navbar .nav > .active > a:focus {
background: #333333;
outline: 0;
font-weight: 600;
}
.navbar .nav li .dropdown-menu {
z-index: 1000;
}
.navbar .nav {
position: relative;
left: 0;
display: block;
float: left;
margin: 0px 10px 0 0;
}
.navbar .nav > li {
float: left;
}
.navbar .nav > li > a {
float: none;
padding: 2px 15px 2px;
color: #777777;
text-decoration: none;
text-shadow: 0 1px 0 #ffffff;
}
.navbar .nav > li > a:focus,
.navbar .nav > li > a:hover {
color: #333333;
text-decoration: none;
background-color: transparent;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #555555;
text-decoration: none;
background-color: #e5e5e5;
-webkit-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
-moz-box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.125);
}
.navbar .nav > li > .dropdown-menu:before {
position: absolute;
top: -7px;
left: 9px;
display: inline-block;
border-right: 7px solid transparent;
border-bottom: 7px solid #ccc;
border-left: 7px solid transparent;
border-bottom-color: rgba(0, 0, 0, 0.2);
content: '';
}
.navbar .nav > li > .dropdown-menu:after {
position: absolute;
top: -6px;
left: 10px;
display: inline-block;
border-right: 6px solid transparent;
border-bottom: 6px solid #ffffff;
border-left: 6px solid transparent;
content: '';
}
.dropdown-menu {
*border-right-width: 0;
*border-bottom-width: 0;
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
}
.dropdown-menu .dropdown i {
position: absolute;
right: 0;
margin-top: 3px;
padding-left: 20px;
}
.dropdown-submenu > .dropdown-menu {
-webkit-border-radius: 0 0 0 0;
-moz-border-radius: 0 0 0 0;
border-radius: 0 0 0 0;
}
.navbar .nav {
border-right: none;
border-left: none;
}
.navbar .nav > li > a {
float: none;
font-size: 15px;
margin-left: 0px;
margin-right: 0;
text-decoration: none;
text-shadow: none;
border-right: none;
border-left: none;
color: #fff;
border: 2px solid transparent;
padding: 4px 5px 4px 5px;
background-image: none;
background: none;
}
.navbar .nav > li > a:hover,
.navbar .nav > li > a:focus {
color: #dddddd;
background-color: none;
background-image: none;
background-repeat: repeat-x;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
padding: 4px 5px 4px 5px;
background: #343434;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > .active > a,
.navbar .nav > .active > a:hover,
.navbar .nav > .active > a:focus {
color: #fff;
border: 2px solid #302f2f;
padding: 4px 10px 4px 10px;
background-image: none;
background: #343434;
filter: none;
text-decoration: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-moz-box-shadow: inset 0 0 1px #555;
-webkit-box-shadow: inset 0 0 1px #555;
box-shadow: inset 0 0 1px #555;
}
.navbar .nav > a i[class^="icon-"] {
color: #fdfdfd;
}
ul.nav li.dropdown a {
z-index: 1000;
display: block;
}
ul.nav li.dropdown ul li ul.dropdown-menu {
margin-left: 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
}
ul.nav li.dropdown ul li i {
margin-right: 50px;
}
select.selectmenu {
display: none;
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
z-index: 1000;
display: none;
float: left;
min-width: 165px;
padding: 0;
margin: 2px 0 0;
list-style: none;
background: #386A57;
border: none;
border: none;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
border: 2px solid #302f2f;
border-top: none;
-webkit-background-clip: none;
-moz-background-clip: none;
background-clip: none;
-webkit-border-radius: 0 0 6px 6px;
-moz-border-radius: 0 0 6px 6px;
border-radius: 0 0 6px 6px;
}
.dropdown-menu li {
margin: 0;
padding: 0;
}
.dropdown-menu li a {
color: #ddd;
font-size: 15px;
padding: 5px 7px 5px 7px;
margin: 0;
text-shadow: none;
border-bottom: 1px solid #303030;
text-decoration: none;
}
.dropdown-menu li > a:hover,
.dropdown-menu li > a:focus,
.dropdown-submenu:hover > a,
.dropdown-menu .active > a,
.dropdown-menu .active > a:hover {
color: #ffffff;
text-decoration: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-image: none;
background-repeat:inherit;
filter: none;
}
.dropdown-menu .sub-menu-level1, .dropdown-menu .sub-menu-level2 {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: 0;
}
.dropdown-menu li:hover .sub-menu-level1 {
visibility: visible;
}
.dropdown-menu li li:hover .sub-menu-level2 {
visibility: visible;
}