I need to align dropdown menu along the length of the page. I have a menu :
<ul class="nav navbar-nav menu">
<li>About the company
<img src="images/arr1.png" ></img>
<ul>
<li class="first_li">Mission</li>
<li>History</li>
<li>Vacancy</li>
<li>Best Experts</li>
</ul>
</li>
</ul>
Then I have some css styles to make this dropdown menu to be align in as I thougth right manner.But it doesn't work correctly.
.menu li{
list-style: none;
float: left;
line-height:84px;
}
.menu li:hover > ul {
display: block;
background-color: rgb(231,231,231);
position:absolute;
top:84px;
left : 0px;
width: 100%;
text-align:center;
padding:0;
z-index:1;
}
.menu .language:hover > ul {
display:block;
width:84px;
line-height:30px;
}
Part of the problem looks like you have most of your list style in the 'hover' part. Try putting that into the general menu style.
Related
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
<div id="headermenu">
<ul >
<li id="menu1"><img src="images/menu1.png"/></li>
<li id="menu2"><img src="images/menu2.png"/>
<ul class="submenu2">
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
<li>submenu2</li>
</ul>
</li>
<li id="menu3"><img src="images/menu3.png" /></li>
<li id="menu4"><img src="images/menu4.png"/></li>
<li id="menu5"><img src="images/menu5.png"/></li>
</ul>
</div>
css
#headermenu ul ul {
display: none;
}
#headermenu ul{
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li{
width: 20%;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
left:0;
}
#menu1:hover{
background: url('images/menu1hover.png');
}
Hover is not working, I wonder how to make a list with image hover, I also want to know how to make a sub list when a li is hover. And if there is another list on sub list how to make it.. on pure css..
As you haven't given us all the information we need to solve this I will take a guess. As I said in the comments. It could be caused by the <img> sitting on the background, so when you hover you cant see the background at all.
HTML:
<div id="headermenu">
<ul>
<li id="menu1"><img src="http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg"/>
</li>
</ul>
</div>
CSS:
#headermenu ul ul {
display: none;
}
#headermenu ul {
padding:0;
margin:0;
white-space:nowrap;
}
#headermenu ul li {
width: 20%;
height: 50px;
list-style-type:none;
display:inline-block;
margin-bottom:15px;
float:left;
overflow: hidden;
border: 1px solid;
}
#menu1:hover {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
Here is your code as is, the background image is changing but cannot be seen because of the <img> in front.
DEMO HERE
Now here is the same code but the <img> being removed.
<div id="headermenu">
<ul>
<li id="menu1">
</li>
</ul>
</div>
DEMO HERE
We can see that the hover does work but the <img> was coving it up.
Solutions:
Just simply set a background on each li and then a background when on hover.
CSS:
#menu1 {
background: url('http://www.joomlaworks.net/images/demos/galleries/abstract/7.jpg');
}
#menu1:hover {
background: url('http://img.gawkerassets.com/img/19euo1gaaiau9jpg/original.jpg');
}
DEMO HERE
You could also set the display to none for the img when on hover.
CSS:
#menu1 {
background: url('http://icdn4.digitaltrends.com/image/microsoft_xp_bliss_desktop_image-650x0.jpg');
}
#menu1:hover img {
display: none;
}
DEMO HERE
There are many more ways but these are two that will work.
You need to use either a background image, or an actual img for both before and after states. In your example, when the mouse hovers over #menu1 the background behind the menu1.png image is changed but menu1.png is obscuring it from view.
try this code
DEMO
<body> </body>
.urlImg { width: 140px; height:140px; display:block; background-image: url("http://imgsrc.ru/images/reco/140/windkitten_38083968.jpg"); } .urlImg:hover { background-image: url('http://placehold.it/140x140'); }
I have a unordered list as a menu.
All items have a background-color. What I want is that the width of the item does not fill the width of the list, and that the item (including the background-color) is aligned to the right in the list. I hope you understand and might have an answer.
HTML:
<ul class="menu">
<li><a class="menuitem">First</a></li>
<li><a class="menuitem">Secondwithlongertext</a></li>
<li><a class="menuitem">Thirdbitshorter</a></li>
</ul>
And CSS:
ul li a.menuitem{
background-color:#000;
color:#fff;
}
As per you requirement you have to wrap the text inside the <span>. Here is a working Demo.
Here is the HTML code.
<ul class="menu">
<li><a class="menuitem"><span>First</span></a></li>
<li><a class="menuitem"><span>Second Item with long text can come here</span></a></li>
<li><a class="menuitem"><span>Thirdbitshorter</span></a></li>
</ul>
ul {
background-color:gold;
color:#fff;
}
ul li{
background: #990000;
}
ul li a {
text-align: right;
}
ul li span{ background:black;}
ul {
background-color:#000;
color:#fff;
width: 100%;
}
ul li{
background: #990000;
width: 50%;
}
ul li a {
text-align: right;
}
This should work for you if I understand what you're asking. Sometimes I make the backgrounds different colors just to clearly be able to see what is going on.
I have the following css vertical navigation menu I have done. There are up and down images for the parent category 30px high for rollover and separate up and down images for the second and third levels of the menu rollover at 25px high.
For each level, there is a different type of up and down images if there is no continuing category.
It works OK except for 3 areas that I have been struggling with for days now and can't seem to see where I have gone wrong.
The first is that the text for each level gets smaller and smaller for some reason and the second is that at the third level, all the images shown the up and down images as if there it a continuing category, and last but not least, when a category is selected in the first, second or third category, I can't seem to find a way to keep those links highlighted to show the user that they are in that area.
I hope someone is able to figure this out as I have been going crazy for days now. Thanks in advance.
Please find the current code below (in the image areas I have described what the images are for to understand what images I am using) :
The HTML:
<div id="nav">
<ul class="menu">
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>
Home
<ul class="sub-menu">
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>
Home
<ul class="sub-sub-menu">
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
</ul>
</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
<li>Home</li>
</ul>
</div>
The CSS:
#nav {
float:left;
width:200px;
z-index:1;
}
#nav ul.menu, #nav ul.menu > ul.sub-menu, #nav ul.menu > ul.sub-sub-menu {
display:block;
width:200px;
margin:0;
padding:0;
list-style-type: none;
}
#nav ul.menu > li {
float: left;
display:block;
width:200px;
height:30px;
font-size:0.9em;
line-height:2.2em;
margin-bottom:1px;
}
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
float: left;
display:block;
width:200px;
height:25px;
font-size:0.7em;
line-height:2.2em;
}
#nav li a {
display:block;
width:200px;
color:#FFF;
text-decoration:none;
font-weight:bold;
text-transform:uppercase;
list-style-type:none;
}
#nav ul.menu > li > a {
background: transparent url('../../parent-category-with-submenus.png');
display:block;
width:200px;
height:30px;
margin-bottom:1px;
}
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.sub-menu > li:hover > a:only-child, #nav ul.sub-sub-menu > li:hover > a {
background: transparent url('../../second-third-categories-with-NO-submenus-ROLLOVER.png');
display:block;
width:200px;
height:25px;
margin-bottom:3px;
}
#nav ul.menu ul ul li {
float: none;
list-style-type: none;
}
#nav li > ul {
display: none;
list-style-type: none;
}
#nav li:hover > ul {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:0px;
margin-left:192px;
}
#nav li:hover > ul.sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-40px;
margin-left:198px;
}
#nav li:hover > ul.sub-sub-menu {
position: absolute;
display:block;
width:200px;
padding:0;
margin-top:-30px;
margin-left:198px;
}
Font Size
You font size gets smaller because you are using ems. An em is a relative unit. If you're base font size is 20px and you're using 0.75em then the font size of a child element whose parent used the base 20px font size would be 15px (20x0.75=15). Now a child of that child (grandchild) would start with the child's font size of 15px and it's font size would be 11.25px (15x0.75=11.25). I set the text to be 16px for all li in the jsFiddle below.
UP and DOWN images
I didn't bother figuring out the exact issue with this but you do have a lot of kruft in this part of your CSS. I would add a class to the li that has a sub-menu within it. Something like .has-sub-menu. Then target the anchor tags like so .menu > .has-sub-menu > a and .sub-menu > .has-sub-menu > a. Also see the jsFiddle below.
HTML
<div id="nav">
<ul class="menu">
<li>Home</li>
<li class="has-sub-menu">
Home
<ul class="sub-menu">
<li>Home</li>
<li>Home</li>
</ul>
</li>
</ul>
</div>
CSS
.menu > .has-sub-menu > a {
background-image: url(img-one.png);
}
.sub-menu > .has-sub-menu > a {
background-image: url(img-two.png);
}
Navigation Highlighting
This one cannot be done with CSS unless you add a class to each li or anchor tag. Something along the lines of the name of the page and then on each page add a body class of the same or similar name.
HTML
<!-- your code -->
<body class="products">
<!-- more of your code -->
<div id="nav">
<ul class="menu">
<li class="products">Products</li>
<li class="about">About</li>
<!-- more links -->
</ul>
<!-- more links -->
</div>
<!-- more of your code -->
</body>
In the example above we are viewing the products page. For the about page you would replace the class on the body tag with about. In the end this does not have to be added to the body tag but some other ancestor element. But the body tag is a nice clean solution and helps ensure that the class will be encapsulated within one another.
Then you could target the link like so with your CSS.
CSS
/* non-active */
#nav li {
color: white;
background-color: red;
}
/* active */
.products .products,
.about .about {
color: red;
background-color: blue;
}
If the above is not doeable then I believe you will have to do some light programming via PHP, ASP or whatever server side language you have available to you. You could also use JavaScript. You can also find answers to this with a simple StackOverflow search.
The fiddle below addresses all three issues with the solutions above. I also added a little jQuery so you can switch out and try the navigation highlighting.
http://jsfiddle.net/u2V8v/
Issue #1: The text gets smaller in the sub-menus because you have this rule
#nav ul.menu ul.sub-menu > li , #nav ul.menu ul.sub-sub-menu > li {
...
font-size:0.7em;
...
}
while the default for the first level items is
#nav ul.menu > li {
...
font-size:0.9em;
...
}
Either remove the font-size decalaration for the submenus or set the value to inherit
Issue #2
I couldn't test this since I don't have your images so I'm not sure if this is what's causing the problem but it seems you're missing the > a at the end of this CSS rule selector
#nav ul.sub-menu > li > a, #nav ul.sub-sub-menu > li {
background: transparent url('../../second-third-categories-with-submenus.png');
...
}
Issue #3
To highlight the menu items you can just set a background color on the hover state, they will stay highlighted while the user is browsing sub-menus
#nav ul li:hover{
background:red;
}
I am trying to create a vertical menu with fly outs .That is a vertical menu with sub-menus.What is wrong with the following code?
<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
#navmenu ul ul li a {
border:1px solid #888888; border-bottom: none; font-size:12pt; line-height: 1.6em; color:#303030; background-color:#a5a5a5; background-image:none;
}
#navmenu {
width: 150px; /* set width of menu */
}
#navmenu ul {
list-style-type:none; margin:0px; padding:0px;
}
#navmenu a {
text-decoration:none; border: 1px solid #303030; width:170px; display:block; text-align:center; font-size:14pt; line-height:2em; background:url(Button_top.gif) repeat-x left; font-family:Arial, Helvetica, sans-serif; color:white;
}
#navmenu a:hover {
color: #a00;
/* red text color on hover */
background: #fff;
/* white bgcolor on hover */
}
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
#navmenu ul ul {
position: absolute; top: 0; left: 100%;
/* to position them to the right of their containing block */
width: 100%;
/* width is based on the containing block */
}
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
#navmenu ul ul {
display: none;
}
#navmenu ul li:hover ul {
display:block;
}
</style>
</head>
<body>
<div id="navmenu">
<ul>
<li>
Home
</li>
<li>
Blog
</li>
<ul>
<li>
Blog 1
</li>
<li>
Blog 2
</li>
</ul>
<li>
Websites
</li>
<ul>
<li>
Websites 1
</li>
<li>
Websites 2
</li>
</ul>
<li>
Photos
</li>
</ul>
</div>
</body>
</html>
http://jsfiddle.net/9bHkj/1/
You might have to revisit how you are constructing the menu. For instance:
<li>
Blog
</li>
<ul>
<li>
Blog 1
</li>
<li>
Blog 2
</li>
</ul>
is supposed to be a Blog menu with two sub menus Blog 1 and Blog 2. But then <ul> for the sub menu is supposed to be within the <li> of the menu and not separately:
<li>
Blog
<!-- The <li> does not end here -->
<ul>
<li>
Blog 1
</li>
<li>
Blog 2
</li>
</ul>
</li> <!-- end tag for the blog <li>, now enclosing the submenu also -->
Once you do this, for the other submenus as well, you have the flying sub menus. You can now work out the location, colors etc.
you wrote this twice:
#navmenu li {
/* make the list elements a containing block for the nested lists */
position: relative;
}
Your nested lists ul are not contained by li elements. So this will not work either:
#navmenu ul li:hover ul {
display:block;
}
nesting your ul in li elements may solve your problem.