Horizontal navigation menu - how to increase size of <li> on hover
Question
I'm working on a navigation menu. I'm trying to achieve something like that the one on this website: www.fizjoterapia-domkrakow.pl/
I've been searching a lot and I couldn't find a way to increase the size of the
Also, there is a ribbon shadow effect on the hovered element that I have no idea how to implement it.
The other problem I have is the opacity of the elements inside the header. I keep the logo inside one div and menu inside the other one. Both of them are in the that has a background set to opacity:0.9. Unfortunately my logo and menu are also set to such value. Any ideas how to get rid of it?
Here is the code sample.
<script> $(function () { $("#about2 li").mouseover(function () { $(this).addClass("liOnHover") }); $("#about2 li").mouseleave(function () { $(this).removeClass("liOnHover") }); }) </script> </head> <body> <header> <div id="logo"> <a href="#"><img src="~/Content/Images/logo.png" /></a> </div> <div id="menuItems"> <ul id="about2"> <li id="contact">@Html.ActionLink("Home", "Home", "Home")</li> <li id="about">@Html.ActionLink("About", "About", "About")</li> <li id="priceList">@Html.ActionLink("PriceList", "PriceList", "Home")</li> <li id="reviews">@Html.ActionLink("Reviews", "Reviews", "Home")</li> </ul> </div> </header> <section id="main"> CSS:
header { height: 200px; opacity: 0.9; background: #527F9D; box-shadow: 1px 1px 2px black; } #logo { padding: 30px 0 20px 70px; float: left; } #main { margin:20px 210px 20px 210px; background-color: #ffffff; border-radius: 4px; } .liOnHover { background-Color:#0099FF; color: white; min-height: 100px; -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); -moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); text-align: center; display:inline-block } #menuItems { width: 900px; height: 36px; position: absolute; bottom:18px; right:20px; top:150px; left:350px; font-size: 23px; font-family: Enriqueta-Bold; font-weight: bold; text-align: center; background-color: #86ADED; -webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); -moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89); } #menuItems ul { padding: 2px 0; margin: 0; } #menuItems li { display: inline; padding: 4px; } 2 answers
solution1
1 ACCPTED 2014-09-05 20:24:13
Instead of using Javascript to achieve this you could simply use the :hover attribute in CSS
#menuItems li {
display: inline;
padding: 4px;
}
#menuItems li:hover {
background-Color:#0099FF;
color: white;
min-height: 100px;
-webkit-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
-moz-box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
box-shadow: 0px 6px 6px 0px rgba(34, 50, 60, 0.89);
text-align: center;
display:inline-block
}
regarding your second issue, opacity is always influencing the children of the element, if you just want to use a transparent background you could set the color using background-color: rgba(82,127,157,.9)
solution2
1 2014-09-05 20:34:00
You need to use the selector #menuItems li.liOnHover or #menuItems li:hover for the hover changes to work.
Additionally, you should set the display of #menuItems li to inline-block .
Hope this helps.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.