I tried solving this using some tips from this site but it doesn't seem to work for me. I have a website http://apartmanimikzaton.com/paintball/index.php, and I want to create a drop down menu like from the navigation.
EDIT: I didn't add it right now, but the thing I want to get is drop down menu text on hover.
This is my navigaton:
<ul class="navigation">
<li id="navigation-1"> O nama </li>
<li id="navigation-2"> Oprema </li>
<li id="navigation-3"> Tereni
<ul>
<li> Lokacija 1 </li>
<li> Lokacija 2 </li>
</ul>
</li>
<li id="navigation-4"> Galerija </li>
<li id="navigation-5"> Cjenik </li>
<li id="navigation-6"> O Paintballu </li>
<li id="navigation-7"> Teamovi </li>
<li id="navigation-8"> Webshop </li>
</ul>
And this is my css:
.navigation {background: url(images/layout/navigation.jpg) no-repeat; width: 980px; height: 57px; margin: 0 0 10px 0; padding: 0;}
.navigation li, .navigation a {height: 57px; display: block;}
.navigation li {float: left; text-indent: -9999em; position: relative;}
.navigation ul ul{
position:absolute;
left: 0;
top: 100px; /* height of the parent list item */
display:none; /* hide it */
}
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
I'm doing something wrong so any tips would be appreciated.
I took the time to analyze your code, and here's what I can help you with for now.
First of all, insert these styles into your CSS:
ul.navigation li ul{
background: none repeat scroll 0 0 #000000;
display:none;
padding: 0;
position: absolute;
top: 57px;
width: 117px;
z-index: 6;
}
On the following styles:
.navigation li {
float: left;
position: relative;
text-indent: -9999em;
width: 100%;
}
The text-indent: -9999em; is affecting the text of the drop down menu you want to insert. I suggest you remove it. If you don't wish to display the text over your menu icons, you can simply do it like this on your link:
I don't think this approach will work:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
Try this instead and see if it works:
.navigation li:hover ul{
display:block;
}
That should at least help you a bit, can't really tell if that's what you are intending to do. Give a response if you manage to accomplish what you wanted.
Cheers,
Artur Balestro
Remove this:
.navigation li:hover > ul{ /* show it when mouse is over the parent list item */
display:block;
}
And Add this
.navigation li:hover ul{ /* show it when mouse is over the parent list item */
display:block;
}
There are some unnecessary styles in there that need cleaning up, but if you're wanting a quick fix:
.navigation > li:hover > ul,
.navigation > li:hover > ul > li,
.navigation > li:hover > ul > li > a {
text-indent: 0;
display: block;
z-index: 999;
background: #fff;
}
Related
I would like to change my current menu to allow for one dropdown: Products. My test page can be found here This is my HTML:
<nav>
<ul class="menu">
<li class="current">Home</li>
<li>About Us</li>
<li class="subNav"><a class="selected">Products</a>
<ul>
<li>Designer Bags
</li>
<li>Cowhides
</li>
<li>Hand-carved Geese
</li>
<li>Antler Chandeliers
</li>
</ul>
<li>Gallery</li>
<li>Shows</li>
<li>Contact</li>
<li>Shop</li>
</ul>
</nav>
My original CSS:
.nav-buttons{text-align:center;padding-bottom:17px;}
#nav{overflow:hidden;display:inline-block}
#nav li{float:left;overflow:hidden;margin:0 10px}
#nav li a{display:block;background:url(../images/pags.png) no-repeat 0 0;
width:19px;height:19px;
line-height:0;font-size:0;
}
#nav li a:hover,#nav li.showPage a{background-position: 0 bottom}
nav{float:right;padding:12px 0 0 0}
.menu {
font-size:0;
line-height:0;
padding:0;
z-index:99;
position:relative;
margin-right:21px;
}
.menu > li {
position:relative;
float:left;
margin-left:11px;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
background:url(../images/point.png)
}
.menu li a{
color:#b3adad;
font-size:18px;
line-height:20px;
display:block;
position:relative;
text-decoration:none !important;
padding:7px 12px 9px;
font-family: 'Noto Sans', sans-serif;
}
.menu li.current,
.menu li:hover {
background:#9c6f51;
}
.menu li.current a,
.menu li:hover a{
color:#fff
}
And this bit of CSS I just added today:
nav a {
font-weight: 800;
padding: 5px 10px;
display: block;
}
nav > ul > li.subNav ul {
display: none;
position: absolute;
top: 100%;
left: 0;
white-space: nowrap;
background: #fff;
}
nav ul li.subNav:hover ul {
display: block;
}
It seems to want to work with the exception that I see no sub-menu unless I hover over it. I've come here for help because I'm afraid to mess with the original CSS and thus ruin my navigation throughout the rest of the site. Is there something I can add that will cause the menu to appear within just the "subNav" class, without affecting the rest of the menu or site navigation? (The original CSS came with this template and I do note that font-size:0 is used a few times. Since the menu worked well before I felt I needed to add a dropdown, I have been reluctant to change that, since I would only be experimenting without understanding.)
I've sorted it. I had to change the background color in the "subNav" class, in order for the site menu's overall font color to show up. It's there; I just couldn't see it.
I am having trouble with a pop-out menu behaving different in Chrome than in IE or Firefox.
Here is the HTML
<body>
<ul>
<li>Level One
<ul>
<li>Level Two Item One</li>
<li>Level Two Item Two
<ul>
<li>Level Three</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
Here is the css
ul {
padding: 0px;
list-style-type: none;
}
li {
background-color: blue;
}
a:link {
text-decoration:none;
color: #0000ff;
margin: 5px 0px 5px 0px;
background-color: cyan;
display: inline-block;
width: 200px;
}
li {
position: relative;
}
li > ul {
display: none;
}
li:hover > ul, li.sfhover > ul {
left 100%;
top 0;
position: absolute;
display: inline-block;
}
li:hover > ul li, li.sfhover > ul li {
background-color: #33ff33;
width: 200px;
position: relative;
}
In Firefox and IE Level Three pops out to the right of Level Two Item Two. In Chrome Level Three pops out below Level Two Item Two.
I know it has something to do with making the link a block element, but I want the link to display as an inline-block. Also, I cannot change the HTML. It is coming from a CMS (I have simplified it to illustrate the problem)
Any suggestions would be appreciated.
You've got a couple of colons missing from your CSS, specifically this rule: li:hover > ul, li.sfhover > ul
left 100%; should beleft:100%; and top 0; should be top:0;
I have the following HTML
<ul id="nav">
<li>
Menu Item 1
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
Menu Item 2
<ul class="sub_menu">
<!-- full of <li> sub menu items -->
</ul>
</li>
<li>
Menu Item 3
</li>
</ul>
The #nav is 100% the width of the browser window.
Using only CSS I want to float the Menu Items side by side inside a container that has similar CSS:
{ width: 1000px; margin: 0 auto; }
But I want the .sub_menus to be the same width as #nav.
How can this be done without changing the HTML?
You can position: relative the #nav, do your thing with the li and then position: absolute; left: 0; right: 0 the .sub_menu.
This way .sub_menu is the same width as #nav regardless of the width of li. You'll have to add and adjust some more styles to make it look pretty and in position but I'll leave that to you.
An additional requirement is that li will stay position: static as the position of .sub_menu must be relative to #nav.
EDIT: #simon's answer is pretty much an implementation of mine, but OP has left a comment there indicating that it isn't adequate. We're still unsure of what the problem is.
Try the following (jsbin):
* { margin: 0; padding: 0 }
#nav, .sub_menu {
width: 100%;
height: 30px;
position: relative;
background: green;
}
#nav > li > a {
z-index: 1;
position: relative;
}
#nav > li {
float: left;
list-style-type: none;
}
.sub_menu {
position: absolute;
left: 0;
background: red;
top: 30px
}
This puts all the buttons one after another and keeps the submenu 100% width
here you go:
http://codepen.io/anon/pen/YXZQMo
The Subnav UL has now the same width as the parent li
#nav { width: 1000px; margin: 0 auto; }
ul{
margin:0;
padding:0;
list-style:none;
}
ul li{
display:block;
float:left;
padding: 5px 10px;
width:auto;
}
ul li:hover ul{
display:block;
}
ul li ul{
display:none;
width:100%;
background-color:red;
min-height:20px;
transition:all 0.3s;
}
ul li ul li{
display:block;
float:none;
}
I have a navigation grid, that I want to create rollovers for, using sprites. Thanks to other tips on the site, I managed to get started.
You can check the code here.
<ul id="navigation">
<li class="button_1">Button text</li>
<li class="button_2">Button text</li>
<li class="button_3">Button text</li>
<li class="button_4">Button text</li>
<li class="button_5">Button text</li>
</ul>
#navigation{
display: block;
width: 907px;
height: 296px;
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
}
#navigation li{
display: block;
float: left;
}
#navigation li a{
display: block;
height:296px;
text-indent:-9999px;
}
#navigation li a:hover,
#navigation li a.on{
background-image: url(http://i.imgur.com/WbDp9lf.jpg);
}
#navigation li.button_1 a {width:175px; background-position:0px 0px;}
#navigation li.button_1 a:hover {background-position:0px -296px;}
/*
The problem is - the navigation is two rows of icons. How can I control that only one box is being changed. Currently is works only changing vertical groups.
checking my jsfiddle will show it better i think.
thanks!
this is what you want?
http://jsfiddle.net/ahyv7/2/
i removed a lot of unusefull css... the remaining (good) one is
#navigation {
display: block;
width: 907px;
height: 296px;
}
#navigation li {
display: block;
float: left;
}
#navigation li a {
display: block;
height:148px;
width: 181px;
background: url(http://i.imgur.com/WbDp9lf.jpg) left top no-repeat;
text-indent:-9999px;
background-position:0px 0px;
}
#navigation li a:hover {
background-position:0px -296px;
}
to make you work, you need a sprite with only 1 read and 1 gray rectagle
set width / height to the normal li a display and with background-position:0px 0px you see only the red rectangle... on hover move the background uppper... thats all
I've made a vertical menu using css. It's a menu with sub menus similar to this one:
http://www.dynamicdrive.com/style/csslibrary/item/suckertree-menu-vertical/
here you can see an example:
It work fine but when I click in one of the sub menus to see the information, the others sub menus disappear, that is the menu stay underneath the text. So if I want to change page by clicking in another sub menu I'm not able, I have to return to home.
Here is my css code:
#menu ul {
list-style: none;
margin: 0;
padding: 3px;
width: 100%;
font-size: 14px;
}
#menu h2 {
color: white;
background: #9370D8;
padding: 4px;
text-align:center;
font-size:15px;
width: 100%;
display: block;
}
#menu a {
color: black;
background: white;
text-decoration: none;
display: block;
font-weight: bold;
width: 100%;
padding:4px;
}
#menu a:hover {
color: black;
background: #eee;
}
#menu li {
position: relative;
}
#menu ul ul ul {
position: absolute;
top: 0;
left: 100%;
width: 100%;
}
div#menu ul ul ul,
div#menu ul ul li:hover ul ul
{display: none;}
div#menu ul ul li:hover ul,
div#menu ul ul ul li:hover ul
{display: block;}
and html code:
<div id="menu">
<ul>
<li><h2>Browse</h2>
<ul>
<li>Districts</li>
<li><a href="/browse/time/" >Time</a></li>
</ul>
</li>
</ul>
<ul>
<li><h2>Analyze</h2>
<ul>
<li>Co-occurrence
<ul>
<li><a href="/analyse/co-occurrence/percentage" >Percentage</a></li>
<li><a href="/analyse/co-occurrence/regions" >Regions</a></li>
</ul>
</li>
<li>Geographical
<ul>
<li>Districts</li>
<li>Citizenship</li>
</ul>
</li>
</ul>
</div>
For example I would use the link above. If I click on sub item 2.1 from folder 2, I will see some page with information.
Now I want to see the sub item 1.1 from folder 1, but my problem is when I click in one of the sub menus I'm not able to see the sub item 1.1, so if I want to click in sub item 1.1 I have to return to the main page
the problem is the following:
Any help would be appreciate :)
Thanks!
The problem was the z-index.
I read the tutorials and the front page had an z-index: -1;
and the menu had a z-index: 1;
So the following doesn't work, you have to set something like this:
body
{
z-index: 1;
}
sub-menu
{
z-index: 999;
}