I've created a rollover image menu in Dreamweaver. The days of the week are images. So is the rollover image that appears on hover. My problem is when you hover over the days of the week, the hover image pushes the text down.
I've mocked together two screen grabs showing the menu before and during it's hover (http://static.tumblr.com/2wdsnoc/FbPmx6mez/hover-example.png)
I read about z-indexes and tried making the menu have a greater number than the hover but that hasn't worked, nor did it help making the position fixed. In the end this is the only CSS I have styling the menu -
== CSS ==
#nav {
text-align:center;
list-style: none;
}
#nav ul
{
list-style-type:none;
}
#nav li
{
display:inline;
text-decoration:none;
}
Here is the JSfiddle with the full javascript, html and css I've shown just one category for ease.
Thank you in advance!!
Using Javacript is overkill for what you're trying to accomplish, just use a sprite image, and manage the rest via CSS
JSFiddle Demo
HTML:
<ul>
<li class="home">Home</li>
</ul>
CSS
ul { float:left}
ul li { float:left; list-style:none; }
ul a { display:block; text-indent:-9999em; }
ul li.home { width:100px; height:50px; }
ul li.home a { background:url(http://placehold.it/100x100) no-repeat 0 0 }
ul li.home a:hover { background-position:0 -50px; }
Try this http://jsfiddle.net/r2FF7/18/
#nav li a img{
vertical-align:bottom;
}
Full page on: http://jsfiddle.net/r2FF7/18/show/
Related
I've been fighting with this for probably 6 hours now and am completely stumped. I can't get the submenu to appear vertical on mouse hover. Here's the link from cssdesk. What am I messing up? I know it's something really simple.
http://www.cssdesk.com/n8WCm
If the link doesn't work for you, please see this snippet:
.nav8 ul .sub-menu{
position:absolute;
display:none;
}
.nav8 li:hover ul.sub-menu {
display: block;
background:#000;
border: 1px solid #ececec;
}
If there is more that you need, please let me know.
Add To your Css
.nav8 ul li li{
clear:both;
}
.nav8 ul li ul{
width:20% !important;
}
you should make it not floated left like the main menu, so i would suggest to clear it after every submenu li and give it a fixed width
.nav8 li:hover ul.sub-menu li {
clear:both;
width: 200px;
}
I am building a navbar. This is what I want;
change the background-color on the link when hoover over it.
first and last link background should have round corners.
The problem is that either all links get rounded corner or none does!
CSS
nav {
width:100%;
line-height:2;
}
nav ul {
list-style:none;
}
nav li a {
text-decoration:none;
color:white;
float:left;
width:90px;
display:block;
background-color:blue;
padding-left:10px;
}
nav li a:first-child {
border-radius:5px;
}
nav li a:last-child {
border-radius:5px;
}
nav li a:hover {
color:blue;
background-color:white;
}
HTML
<nav>
<ul>
<li>Hem
</li>
<li>om oss
</li>
<li>hitta hit
</li>
<li>Kontakta
</li>
</ul>
</nav>
What you are looking for is something like this?
http://jsfiddle.net/gespinha/mkDWj/2/
You should trigger the a within the first and last li, not the first and last a within an li element, because all li only have one a (which is automatically its own first and last.
You other issue was that you were assigning all borders to have the same radius, when you just want the edge borders to have a radius value.
CSS
nav li:first-child a {
border-radius:5px 0 0 5px;
}
nav li:last-child a {
border-radius:0 5px 5px 0;
}
For more detailed information on the border-radius attribute check this documentation http://www.w3schools.com/cssref/css3_pr_border-radius.asp
for the first time i made a jquery slider using coda slider.
but i want to customize the menu, i want a little a arrow that will show on the top of the li a when you hover it and if it's active.
How will i do that? should i use a image? or can i achieve the effect using css3?
<ul class="navigation">
<li>Sites</li>
<li>Files</li>
<li>Editor</li>
<style>
.navigation {
padding:0px;
margin-bottom:90px;
}
ul.navigation li {
list-style-type:none;
}
ul.navigation li a {
text-decoration:none;
float:left;
width:254px;
height:50px;
display:block;
background-color:#ccc;
text-align:center;
line-height:40px;
}
ul.navigation li a:hover {
background-color:#666;
/*there should be some sort of background image here or css3? */
}
.active {
/*there should be some sort of background image here or css3? */
}
<style>
ul.navigation li a:active { }
.selected:hover {
/* you can use CSS3 to make arrows or image both */
}
After analyzing, I observed, that plugin adds .selected class to that li element which is selected. So, you can also use CSS3 to make arrows by using :after and :before psuedo classes with display:none and show only on hover of .selected.
ul.navigation > li:hover > a,
ul.navigation > li > a:active,
ul.navigation > li > a.selected {
/* do whatever */
}
Just in case you have a sub menu, I used the direct descendant selector (>).
I am trying to get this transparent background to work. When the nav drops down, I want the entire background of the list to be transparent and the hover to not be transparent.
UPDATE: This is my jsfiddle
Change:
ul#navigation li:hover > a
{
background:#fff;
color:#4dbaf2;
}
to:
#navigation li a:hover
{
background:#fff;
color:#4dbaf2;
}
Example: http://jsfiddle.net/Z8Cu8/5/
Updated:
Then you would also need to add this to your CSS file:
#navigation li ul li a
{
background-color:rgba(255,255,255,.5);
}
Example: http://jsfiddle.net/Z8Cu8/6/
But I'm not really sure if this is what you asked for?
I have a css menu in my aspx page.I want the selected menu to have the same style as hover menu(change the color).I have the css for both hover and current selected menu,and hover is working fine. I have googled this problem and solution was to set "class= current" in the li section of the html code.But my doubt is whether I have to set "class=current" each li sections or is there any need of javascript to report which one is selected out of the menu. I am newbie to css.Please help me..
<div id="tabsJ">
<ul class="menu">
<!-- CSS Tabs -->
<li><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
</ul>
</div>
I have used this css
#tabsJ {
float:left;
width:100%;
background:#F4F4F4;
font-size:93%;
line-height:normal;
border-bottom:1px solid #24618E;
}
#tabsJ ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsJ li {
display:inline;
margin:0;
padding:0;
}
#tabsJ a {
float:left;
background: url("../images/tableftJ.gif") no-repeat left top;
margin:0;
padding:0 0 0 5px;
text-decoration:none;
}
#tabsJ a span {
float:left;
display:block;
background:url("../images/tabrightJ.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#24618E;
}
/* Commented Backslash Hack hides rule from IE5-Mac \*/
#tabsJ a span {float:none;}
/* End IE5-Mac hack */
#tabsJ a:hover span {
color:#FFF;
}
#tabsJ a:hover {
background-position:0% -42px;
}
#tabsJ a:hover span {
background-position:100% -42px;
}
#tabsJ #current a {
background-position:0% -42px;
}
#tabsJ #current a span {
background-position:100% -42px;
color:#FFF;
}
Sam Warren - Added jsfiddle - http://jsfiddle.net/ejLTy/
Actually I have this menubar in the masterpage for all the four pages,DataLog.aspx,EmployeeDetails.aspx,EquipmentDetail.aspx and ScannerDetail.aspx.
No Need of JavaScript. Just change li as,
<li class="current"><span>Reports</span></li>
<li><span>Employee</span></li>
<li><span>Equipment</span></li>
<li><span>Scanner</span></li>
for page DataLog.aspx. Use the same routine for all pages by changing the li class as current.
For hover use the pseudo element property in css called
your_division:hover
Hey Just put class="current" in first li. you will get selection on each link. And also
Go to following link, you will get different kind of menus as well as you can customize menu also as per your requirement.:
http://www.cssmenumaker.com/
check it the example of your updated CSS i have just added (current) id in your li
and where you want the selected link add the current id in that particular li.
http://jsfiddle.net/ejLTy/2/