index.php
<link rel="stylesheet" href="css/styleT.css"> <!-- Resource style -->
<div id="navigation"><!-- <img src="images/navigation bar.jpg" alt="nav bar"> --></div>
<div id="navcontainerbar">
<ul>
<li style="height: 20px;"><a href="index.php">Home</a></li>
<li>
<ul id="nav">
<li><a class="fly" href="#">SIP</a>
<ul class="dd">
<li><a href="portfolio.php">Web Porfolio</a></li>
<li><a href="marketing-portfolio.php">Marketing Portfolio</a></li>
</ul>
</li>
</ul>
</li>
<li class="service"><a href="services.php">LMS</a></li>
<li><a href="blog.php">Library</a></li>
<li><a href="contact.php">Roomplus</a></li>
<!--<li><a href="career.php">CAREER</a></li>
<li><a href="feedback.php">#</a></li>-->
</ul>
</div>
styleT.css
/* navigation */
#navigation {margin: -5px 0 0 -150px; min-width: 100%; height: 40px; background-color:#655700; border-radius: 0; position: fixed; z-index:2;}
#navcontainerbar { height: 40px; margin: 50px 0 0 250px; position: fixed; z-index:2; }
#navcontainerbar ul { height: 40px; margin: 0 0 0 0; list-style-type: none; margin: 0; padding: 0; text-align: center; }
#navcontainerbar ul li { height: 40px; display: inline; font-family:arial; }
.service{ margin: 0 0 0 120px; position: relative; display: inline; font-family:arial;}
#navcontainerbar ul li a { height: 40px; text-decoration: none; /*padding: .2em 1em;
*/ padding: 50px 10px 40px 10px; color:white; background-color: #655700;height: 109px; }
#navcontainerbar ul li a:hover { height: 40px; color:white; background-color:#fef900; }
/* navigation pop up */
/* main menu styles */
/*
#nav,#nav ul {
background-image:url(./images/tr75.png);
list-style:none;
margin:0;
padding:0;
}
*/
#nav {
margin-left:-150px;
height:20px;
padding-left:5px;
padding-top:5px;
position:absolute;
top: -20px;
left: -310px;
z-index:2;
}
#nav ul {
left:-9999px;
position:absolute;
top:10px;
width:auto;
}
#nav ul ul {
left:-9999px;
position:absolute;
top:0;
width:auto;
}
#nav li {
margin: 150px 0 0 250px;
float:left;
margin-right:5px;
position:relative;
}
#nav li a {
margin: -180px 0 0 140px;
background:#655700;
/*background:#c1c1bf;*/
color:#000;
display:block;
float:left;
font-size:16px;
padding:0px;
text-decoration:none;
width: 85px;
height: 110px;
}
#nav > li > a {
-moz-border-radius:0px;
-webkit-border-radius:0px;
-o-border-radius:0px;
border-radius:0;
overflow:hidden;
}
#nav li a.fly {
/*background-color: #c8fa7f;*/
background-color: #655700;
z-index: 2;
}
#nav ul li {
margin: 30px 0 0 0;
top: 75px;
}
#nav ul li a {
background-color: #e1d2a2;
color:#000;
padding: 10px 10px 15px;
width:150px;
}
#nav ul li a.fly {
padding-right:10px;
}
/*hover styles*/
#nav li:hover > a {
background-color: #fef900;
color:#000;
}
/*focus styles*/
#nav li a:focus {
outline-width:0;
}
/*popups*/
#nav li a:active + ul.dd,#nav li a:focus + ul.dd,#nav li ul.dd:hover {
left:0; z-index: 2;
}
#nav ul.dd li a:active + ul,#nav ul.dd li a:focus + ul,#nav ul.dd li ul:hover {
left:140px;
}
/* navigation pop up end */
I have been trying to make the li box height smaller but unable to do so - I wonder why? I have try adding height to the css and also inserting css in the : <li style="height: 20px;">
and still unable to change the height in the actual.