Is there a way to change the height of an element with id = "header_nav" when hovering over the class "header_nav" li element?
Here is the HTML Code:
<div class="header_nav" id="header_nav">
<ul id="header_nav_mainmenu">
<li><a href="index.php">Home</a></li>
<li><a href="portfolio.php">Portfolio</a>
<ul id="header_nav_submenu">
<li><a href="subpages\python.php">Python</a></li>
<li><a href="subpages\web_design.php">Web Design</a></li>
<li><a href="subpages\arma.php">ArmA Series</a></li>
</ul>
</li>
<li><a href="forums\forums_home.php">Forums</a></li>
<li><a href="support.php">Support</a>
<ul>
<li><a href="subpages\contact_us.php">Contact Us</a></li>
<li><a href="subpages\faq.php">F.A.Q.</a></li>
</ul>
</li>
</ul>
</div>
This is the CSS Code:
.header_nav
{
width: 80%;
background-color: #1F1F1F;
float:left;
left:1px;
top:100px;
border-radius: 6px;
width:15%;
height:135px;
text-align: left;
position: fixed;
border:1px solid white;
}
.header_nav li
{
list-style: none;
display: block;
position: relative;
text-align: left;
background-color: #1F1F1F;
/*transition*/
transition: background-color 1s;
-webkit-transition:background-color 1s;
}
.header_nav li a
{
text-decoration: none;
color:white;
font-size: 22px;
}
.header_nav li ul
{
display: none;
position: absolute;
}
.header_nav li:hover ul
{
display: block;
position: relative;
left:0px;
}
.header_nav li:hover a
{
background-color: #454545;
font-weight: bold;
color: #FFAE00;
}
.header_nav li:hover ul a
{
margin-top:2px;
color:white;
background-color: transparent;
font-weight: normal;
/*transition*/
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
}
.header_nav li:hover ul li
{
width:155px;
}
.header_nav li:hover #header_nav
{
height:200px;
}
If you have any advice or suggestions, I would greatly appreciate it as I am having trouble figuring out where the issue lies.