Im trying to create a menu bar which uses image buttons.On my menu bar, I can see my images on it but I can not click them. I used text-indent: 100%; white-space: nowrap; overflow: hidden; in my css file to hide links text. My link text became hidden but links became inactive. Moreover i tried text-indent:-9999px; but result was same. I could not find the problem maybe my html or css structure is wrong. Could you pls check it ?
I updated html and css file on jsfiddle
jsfiddle
try this:
nav ul li a{display: block}
Its Working
nav ul li a
{
display: block
}
Related
I have a problem with part of the html and css code
I am working on a menu that has children. Unfortunately, this child cannot be opened by holding the mouse over it. I have put the html & css code inside the website site so that friends can give a proper guide.
[https://codepen.io/croner2/pen/vYRrpMg][1]
The below code was missing, where we make the dropdown ul tag visible on hover!
#mainNavigation nav.desktop ul li.dropdown:hover ul {
visibility: visible;
opacity:1;
}
codepen
I have this mega-menu, some of the links have fairly long names, when the window is made smaller the longer links overlap text on the the other columns. I added the following rules to the ul class,
.sub-menu-lists {
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
I had tried adding these rules to the li class .hover_drop_down and also .hover_drop_down a, neither of these helped.
The overlap is gone, but the link is just cut off. I can not get the ellipsis to show up. I want them to trail to the end of the column.
here is my codepen, going into the software menu shows the problem. Any suggestions on how to accomplish this??
https://codepen.io/iamgonge/full/egqPQR
You have to assign these settings to the li elements, not to the ul as you did. So, that's this selector:
ul.main-nav > li ul.sub-menu-lists > li {...}
I cannot seem to get the sub-menu to appear on this website I built: http://website-test-lab.com/sites/mirandaparsons/
If you use Dev tools/Firebug, and check .sub-menu to display: block; then you can see that the sub-menu does appear, but not in plain sight. I've tried adding z-index to several of the menu areas with no luck.
The odd thing is, that it does appear correctly in FF on Windows?!
I haven't pasted the code here because there would be so much to copy and paste.
Any help would be much appreciated.
Thanks
I think that what you need is a background-color to .sub-menu and position relative to .nav I just tried to set it and you can see the sub menu well :
.navigation .nav {
position:relative;
}
PS : Worked on firefox 33 Mac
You need to add this to your CSS:
.navigation .nav {
position: relative;
}
This would properbly be usefull to read: http://www.w3schools.com/css/css_positioning.asp
Add this css to your stylesheet
#site-navigation.main-navigation{
position:relative;
}
I have created a dropdown menu and now want a background that drops down along with it. Here is some of my code:
HTML:
<div id="background"></div>
CSS:
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu li:hover div#background
{
display: block;
}
(I know there is something wrong with this code, this is what I picked up so far from the Internet...)
li are the list items that comprise my menu.
In the HTML code, the "background" divider is inside and at the end of another divider which contains the dropdown menu:
<div id="menu">
<ul id="navmenu"></ul>
<div id="background"></div>
</div>
ul is my unordered list which contains the menu.
What I want is to have the menu drop down along with the background. The background should also cover (be on top) of the text that comes immediately after the menu. (The menu drops onto the text).
I would have loved to post a picture to make it a little clearer but I don't have enough reputation points yet... sorry :S
If possible I'd like to do it only using css, but I'm also open for other solutions. Any ideas?
Your css is for a child of the li
This html code for your CSS
<div id="menu">
<ul id="navmenu"><li><div id="background"></div></li></ul>
</div>
The background of your HTML is the sibling of navmenu.
This CSS code for your HTML to show background when hovering over navmenu.
<style>
div#background{
height: 150px;
background-color: white;
display: none; }
ul#navmenu:hover +div#background
{
display: block;
}
</style>
If you want to do that from the LI you would need a parent's, sibling selector. I don't have one and would like one but jQuery could do the trick.
Adjacent Sibling (+) combinator is available in Internet Explore 7 plus and is CSS 2.1 standard.
Assuming you want the background someplace other than inside the li block, position:relative it to the area you want it to appear.
I´m trying to create a menu with the list 'ul'.
The problem I´m facing is:
The submenu doesn´t appear at the top of its corresponding menu link, but, below.
You can see it at this link:
http://jsfiddle.net/6r6e8/
Thanks.
Try including a top value in your CSS:
ul.menu ul {
top: 0;
}
You could add margin-top: -21px to your ul.menu ul styles as a quick fix.