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.
Related
I have a problem. I can't crate my droppable menu.
https://probapro2.blogspot.com/
I work on Menu 1, but I don't know what to add to make the drop menus to move on right.
<link href='http://fonts.googleapis.com/css?family=Oswald:300,400' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:300' rel='stylesheet' type='text/css' />
<div class="nav">
<ul class="menu" id="menu">
<li> home </li>
<li class=""> <a class="drop-ctg" href="#">category</a>
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1072; opacity: 0;">
<li> Category 1 </li>
<li> Category 2 </li>
<li> Category 3 </li>
<li> Category 4 </li>
</ul>
</li>
<li class="">
Menu 1
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1069; opacity: 0;">
<li class="dir">
Menu 2
<ul style="overflow: hidden; display: block; height: 0px; z-index: 1070; opacity: 0;">
<li style="margin-left:50px;"> Menu 3 </li>
<li> Menu 3 </li>
<li> Menu 3 </li>
</ul>
</li>
<li class=" "> Menu 2 </li>
<li> Menu 2 </li>
<li> Menu 2 </li>
</ul>
</li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li> Menu 4 </li>
<li> 404 Error Page </li>
</ul>
</div>
Here JS fiddle: https://jsfiddle.net/0ugodkb3/2
I want to make Menu 1 to have a droppable menu with menu 2 and on first menu 2, I want to show menu 3.
You can use for that css rule transform with translate value like this:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
.menu > li > ul {
display: none;
}
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}
<div class="nav">
<ul class="menu">
<li>
home
</li>
<li class="">
<a class="drop-ctg" href="#">category</a>
<ul>
<li>
Category 1
</li>
<li>
Category 2
</li>
<li>
Category 3
</li>
<li>
Category 4
</li>
</ul>
</li>
<li>
Menu 1
<ul>
<li class="dir">
Menu 2
<ul>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
<li>
Menu 3
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
<li>
Menu 2
</li>
</ul>
</li>
<li>
Menu 2
</li>
<li>
Menu 3
</li>
<li>
Menu 4
</li>
<li>
404 Error Page
</li>
</ul>
</div>
The main thing is to use > selector when defining the display rule for nested menus. This is all what I've added to your css code:
.menu > li > ul {
display: none;
}
/* Position for the 3rd level menu */
.menu > li > ul > li > ul {
transform: translate(100%,0);
display: none;
margin-top: -37px;
}
.menu > li:hover > ul,
.menu > li > ul > li:hover > ul {
display: block;
}
There are a few things that go into making a dropdown menu. It sounds like you're trying to make a dropdown menu that opens up nested menus.
Each pop-out menu will need to:
1) Know the position of the parent that is opening the menu to know where it should be appended.
2) Calculate where the nav should pop up based on where there user is on the browser/screen
You need to append the nav on the right of the menu header you want to open. I'm not sure what your restrictions are but there are vanilla js options:
https://gomakethings.com/how-to-insert-an-element-after-another-one-in-the-dom-with-vanilla-javascript/
that you can use, and also use a mix of position: relative; and position: fixed; to add your nested menus to the right of it's parent.
I would strongly urge you to consider if creating a custom, nested dropdown menu is the right option for you. There are many options out there that have been battle-tested through time. Normally these will also let you style the menu header, and also it's children.
Let me know if you have any more questions :)
Good day, this is my first ever question on Stack Overflow, so I hope I get it as right as possible.
I have done extensive research on my problem, mostly reading all the questions I could find on Stack Overflow and some other sites, but I could not find one answer that worked.
Some background: I am trying to write a website for recruiting for my work and it's the first ever website I have ever written. I am using a wamp server to run the site on localhost for testing. My issue is described as best as I could in the title. Find below my html code:
<html>
<head>
<title> BCB Call Plus SRL Home </title>
<link rel="stylesheet" href="Main Style.css">
</head>
<body>
<div id = "main_content">
<ul id = "nav_container">
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px"> </li>
<li> Home </li>
<li> Menu 1 </li>
<li> Menu 2 </li>
<li> Menu 3 </li>
<li id ="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href= "Page4.html"> Angajari </a>
<ul class="sub_menu">
<li>Ce Vrem</li>
<li>Aplica</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
And below my CSS code:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
}
.sub_menu li a{
display:none;
}
#angajari ul.sub_menu li {
float:left;
}
#angajari ul.sub_menu li a {
position:absolute;
top:0;
white-space: nowrap;
height:auto;
}
#angajari:hover ul.sub_menu li a {
display:block;
}
Here's a picture of what happens when I hover over the problematic menu item:
Display Issue
Final notes: I am running this only under Chrome for now. I have noticed that it doesn't read my css right in IE 8 (yes, I use IE 8, because one of my bosses wants us to.) Cross-platform compatibility fixes are welcome, but not in the scope of my current question. My WAMPSERVER has apache 2.4.9 and PHP 5.5.12.
I even tried my code on some online web code testing site whose name I forgot and got the same results. If you find that my code actually displays properly, then it may be an issue with my configuration.
Here is a jsfiddle.
You need your .sub_menu to be absolute, not your li as. That's it!
.sub_menu {
position:absolute;
}
Working demo here: http://jsfiddle.net/pxzhqqnb/1/
And I'd make the .sub_menu hidden instead of its children. Personal preference, but I think it makes more sence.
Why does it happen?
Consider this simple example: (think of .relative as position: relative and .absolute as position: absolute)
<div class="relative">
Text
<div class="absolute">Link 1</div>
<div class="absolute">Link 2</div>
</div>
Link 1 is absolute. It searches for the closest relative element. That's .relative. Now Link 1 gets right under the relative div.
Link 2 follows the same rules, thus both links overlap.
Now let's change the code a little:
<div class="relative">
Text
<div class="absolute-wrapper">
<div>Link 1</div><!-- these are now static by default -->
<div>Link 2</div>
</div>
</div>
absolute-wrapper is absolute, so it searches for the closest .relative element and gets right under it. Now both links are normal elements wrapped in a div, so they render as expected.
Demo of both examples here: http://jsfiddle.net/w0h7cdhe/2/
I've done a few tweaks to your css code:
body {
text-align: center;
}
a {
font-size: 150%;
text-decoration: none;
color: #000000;
font-weight: bold;
vertical-align: middle;
padding: 0px 10px; /* this is just for the hover effect to lose the spaces in the html */
}
a:hover {
background-color: #338533;
}
ul {
padding: 0;
margin: 0;
}
ul#nav_container {
background-color: #F2FFF2;
list-style-type: none;
text-align: center;
}
ul#nav_container li {
display: inline-block;
padding-left: 5px;
padding-right: 5px;
position: relative;
}
#angajari ul.sub_menu { /* do this with the menu, not just the link */
display: none;
position: absolute; /* set correct position */
}
#angajari ul.sub_menu li {
display: inline-block;
}
#angajari ul.sub_menu li a { /* we don't want top: 0 because it should not overlap */
white-space: nowrap;
}
#angajari:hover ul.sub_menu { /* see above -> menu not link */
display: block;
}
<div id="main_content">
<ul id="nav_container">
<li>
<img id="logo" src="http://lorempixel.com/150/75" style="width:150px;height:75px">
</li>
<li> Home <!-- I've removed the spaced and added the gap in css -->
</li>
<li> Menu 1
</li>
<li> Menu 2
</li>
<li> Menu 3
</li>
<li id="angajari"> <a class="dropdown_toggle" data-toggle="dropdown" href="Page4.html">Angajari</a>
<ul class="sub_menu">
<li>Ce Vrem
</li>
<li>Aplica
</li>
</ul>
</li>
</ul>
</div>
<h1>This is a Heading</h1>
<p>This is a paragraph.</p>
So i tried to fix your Problem i end up with this result
I've adjusted the margin of the logo as shown below:
<li> <img id = "logo" src= Logo.png style ="width:150px;height:75px;margin-left: -50px;"> </li>
because I adjust the width of the text container and replace the last 4 lines in your CSS CODE as shown below:
body {
text-align:center;
}
a {
font-size: 150%;
text-decoration: none;
color:#000000;
font-weight: bold;
vertical-align:middle;
}
a:hover{
background-color:#338533;
}
ul {
padding:0;
margin:0;
}
ul#nav_container{
background-color:#F2FFF2;
list-style-type:none;
text-align:center;
}
ul#nav_container li{
display:inline-block;
padding-left:5px;
padding-right:5px;
vertical-align:middle;
position:relative;
width: 95px;
}
#main_content ul ul {
position: absolute;
visibility: hidden;
}
#main_content ul li:hover ul {
visibility: visible;
}
so i made minor changes but i dont know if that's what you want to happenenter code here
My client wants every link list, that is, every list of the form
<ul>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
</ul>
to have the bullets of the list be the same color as the linked text, but every non-link list, that is, every list of the form
<ul>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
<li>Here's a regular list item</li>
</ul>
should have its bullets and corresponding text inherit as usual.
Fiddle: http://jsfiddle.net/0kkc2rz4/
I am constrained by not being able to add classes into the HTML, so something like
<ul class='link-list'>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
</ul>
ul.link-list li { color: #004E98; }
is out of the question, although I realize that's the obviously best way to do it if I was coding the site from scratch. I can add JS, but would prefer not to.
Here's a solution using a pseudo element and the unicode character for bullet points. The basic idea is to 'overlap' the a bullet over the li bullet, giving the effect that they are different.
ul{
margin:0em;
padding:0em;
list-style:none;
padding:20px 20px 0px 20px;
font-family:sans-serif;
}
li{
margin:0em;
padding:0em;
padding-bottom:10px;
}
a{
color:red;
text-decoration:none;
}
a:hover{
color:green;
}
a, li{
position:relative;
}
a:before, li:before{
content:'\2022';
position:absolute;
left:-0.5em;
color:inherit;
}
<ul>
<li>
Here's a link
</li>
<li>
Here's a link
</li>
<li>
Here's a regular list item
</li>
</ul>
Playing a bit with pseudolements: http://jsfiddle.net/2acw2hae/1/
ul { list-style: none; }
ul a { position: relative; }
ul a:before {
content : "\25CF"; /* unicode for black circle */
font-size: 0.75em;
margin-right: .5em;
}
/* this overlaps the text-decoration under the bullet */
ul a:after {
content : "";
position: absolute;
bottom: 0; left: 0;
height:4px;
width: .5em;
background: #fff;
}
Result
I created the drop-down menu by using CSS and HTML.
I just can't figure out what am I making wrong. When I hover the mouse over the Social it doesn’t pop-up me the drop-down menu.
Entire fiddle here
Js Fidle Example
A part of code where I think its mistake.
#nav ul li a:hover {
color: #ccc;
text-decoration: none;
}
#nav ul li:hover ul{
display : block;
}
#nav ul ul {
display: none;
position : absolute ;
background-color: #333;
border: 5px solid #222;
border-top : 0;
margin-left: -5px;
}
youo have <li> Social</li> and it should be
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
JSFIDDLE
You need to put the sub UL inside the li
<li> Social
<ul>
<li> Facebook</li>
<li> Twitter </li>
<li> Youtube </li>
</ul>
</li>
See fidde: http://jsfiddle.net/2j55uthz/1/
The reason is because in your CSS this line:
#nav ul li:hover ul {
display: block
}
Is target the UL element inside of the hovered li
The <ul> containing facebook, youtube, twitter needs to be within the social <li>. It works with that change.
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.