I am unable to get :hover to function on my footer links. Does this have to do with z-index?
Thank you!
URL: http://bonusest.com/clients/republican_committee/
The problem is that your main div with id page-wrap is ontop (overlapping) of your footer so the links in the footer cannot be clicked.
Seems the .links and .contact divs don't contain any actual links - you need to wrap them in anchor tags like in your main navigation.
As for the .social div, this should work:
<h4>Find Us</h4>
<ul>
<li id="facebook">facebook</li>
<li id="twitter">twitter</li>
<li id="picassa">picassa</li>
</ul>
You'll want to keep the text-indent:-9999px to hide the text. To add a hover state, simply target #facebook:hover
Related
I am creating a responsive mobile version of my website. As you can see in this jsfiddle, when a user hovers <li> item, the menu opens up but overlays the <li> instead of expanding the menu.
I have added display: block in various places and width: 100% hoping that would fix the issue.
What do I need in the code for the menu to expand with a <ul> tag correctly once hovering over an <li> tag?
It's not pushing the menu down because it's positioned absolutely, therefore being removed from the normal document flow.
Remove all position:absolute statements from the li ul selector.
Working demo:
http://jsfiddle.net/306pfgs3/1/
I have a vertical menu that needs some sub-menus. I can accomplish a decent-looking one just by putting a ul tag inside the link I want to expand and absolute-positioning it on hover, with display:none when it's inactive. But I'd like to make it slide out, and I haven't had any luck doing so. I have this basic markup:
<aside>
<ul>
<li>Link Text</li>
<li class="more">
Base
<ul>
<li></li>
</ul>
</li>
</aisde>
The aside tag is itself a secondary navigation menu, the main one is in my header. It is position:fixed for easy access while scrolling.
The ul tag inside of <li class="more"> is absolutely positioned, anchored to -1px on the top and width:154px, and on hover it becomes display:block; left:154px (of course, it is display:none when inactive). I have tried transitioning the left property, but it does not change anything, it acts as if my transition weren't even there.
I have a menu that is basically nothing but a bunch of unordered lists inside of each other. Here is an example:
<div id="horiz-menu" class="moomenu"><div class="wrapper">
<ul class="menutop">
<li><span>Home Page (top menu item)</span>
<ul>
<li><span>Second page (sub menu item)</span>
</li>
</ul>
</li>
<li class="parent active"><span>Resources (top menu item)</span>
<ul>
<li id="current" class="active"><span>Third Page (sub menu item)</span>
</li>
<li><span>Fourth Page (sub menu item)</span>
</li>
</ul>
</li>
</ul>
</div></div>
It is styled to look like the top menu items are the horiz nav menu and the sub menu items are a vertical drop down list (no scrolling) when the top menu item is hovered over; hidden other wise. That all works. My question is what would be the proper way to code css so the sub menu items get highlighted (the background color should change) when the visitor is on that page (not simply hovering over that menu item)?
I have tried this:
#horiz-menu ul li.active {background-color:#000;}
#horiz-menu ul li#current {background-color:#000;}
I don't know if this is the way to do this or not. Can some one help? If your confused I want to be able to use css to color the second ul with an li class="active" or an id="current". The "active" and "current" id and class get applied dynamically to what ever list item the page being viewed is.
Thanks!
Try the addClass Method in the JQuery
$("a.classname").click(function(){
$("li#idname").addClass("active");
});
Using the .active class with background color SHOULD work, however, it depends on what other CSS you have. You have to make sure the specificity of the .active or #current is greater than the default styling (#horiz-menu ul li). Also, be sure to double check that it is the li that has the default background css rather than the anchor inside of it.
I'd like to center the navigation bar but I'm not sure which part of the code is problematic.
<div align="center"><ul id="nav" class="dropdown dropdown-horizontal"><li class="hover">HOME</li>
<li><a name="blank">PORTFOLIOS</a>
<ul>
first of all, your html is missing end div tag
more importantly, instead of , assign an id selector to your div tag and apply CSS to get the centering
for instance
<div id="wrapper"><ul id="nav">...</ul></div>
and css
body {width:100%;}
#wrapper {width:700px;margin:0 auto;}
I'm attempting to create a horizontal navigation bar in CSS. I'm using the CSS from this page and it seems to be working fine:
http://css.maxdesign.com.au/listamatic/horizontal27.htm
...but if you hover over any of the links in the example, theres a small gap on the left side of each element just before the vertical white bar. I'm having the same problem with my nav bar. Is there a way to remove this space? Or is there a better way to create a centered horizontal nav bar?
Thank you!
<ul id="navlist">
<li id="active"><a id="current" href="#">Item one</a></li><li>Item two</li><li>Item three</li><li>Item four</li><li>Item five</li>
</ul>
Remove all new lines between <li> elements. The new line in the code is interpreted as a space, that's the problem, it's not styling.
also you can add style:
#navcontainer ul li a {
margin-left:-3px;
}