Creating a child in a drop down navigation menu

Hi,

I have this template page http://kroweb.dk/gfdev/templates/gf_index_bare_sidebar.php

In the navigation bar at the top of the page I have a drop down menu at the right side of the munu. It all works nicely, but I would like to be able to add "children" to the content of the drop down.

In the code below - which shows the drop down content - I wold like to make the instance that I have indented a child of the one above it so that when hovering the one above the child appears to the right of it's parent.  

If anybody have ideas to how this could be done, I am all ears :)
    <div class="w3-dropdown-hover">
      <button class="w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" style="color: #cccccc; forn-family: arial; font-size: 14px;">Arkivalier og værktøjer</button>

      <div class="w3-dropdown-content w3-bar-block w3-black">
        
        <a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a>
        
        <a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Kirkebøger</a>
        
        <a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Folketællinger</a>

            
            <a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a>
          

          
        <a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Stednavne</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Skifter Staden</a>
        
        <a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Kancelli m.m.m.</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Alle arkivalier</a>
        
        <a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Lægdsruller</a>
        
        <a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;" target= "_blank">Kirke kalender</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Nyttige links</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Herreds- og Byfogeder</a>                    

        <a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Om Arkivalier</a>

      </div>
    </div>

Open in new window

Peter KromanSenior Proposal SpecialistAsked:
Who is Participating?
 
Julian HansenCommented:
Firstly you need to fix your markup. In your menu you have this (note the <i inside the span>
<span <i class="fa fa-angle-double-right" style="padding-left: 15px;"></span></i>

Open in new window

You want either this
<span class="fa fa-angle-double-right"></span>

Open in new window

Or this
<i class="fa fa-angle-double-right"></i>

Open in new window

My styling below uses the former.

Note the removed padding style.

Secondly take the <span> out of the <a> and place it after like this
<a href="https://genealogiskforum.dk/arkivalier/folketaellinger">Folketællinger</a>
<span class="fa fa-angle-double-right"></span>

Open in new window


Lastly add this to your stylesheet
ul.main-nav li span.fa {
	position: absolute;
	right: 5px;
	top: 50%;
	transform: translateY(-50%);
}

Open in new window

Updated sample
0
 
Chris StanyonCommented:
Hey Peter,

If it's just for visual effect, I would suggest you keep it real simple and just indent the text of the child link (padding-left: xxpx) to give the effect that it's subservient:

Item 1
Item 2
Item 3
   Item 3a
Item 4
Item 5
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Not quite.

I would like these "children" to be default hidden, and only to be shown when hovering their parents :)
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Chris StanyonCommented:
OK. Fair Enough. Haven't really got time at the moment to go into it in detail, but you're going to need to restructure your HTML, probably by setting up all your navigation inside <ul> and <li> elements.

<ul id="navigation">
    <li>Nav 1</li>
    <li>Nav 2</li>
    <li>Nav 3
        <ul>
            <li>Child 3a</li>
            <li>Child 3b</li>
            <li>Child 3c
                <ul>
                    <li>Sub Item 3c x
                </ul>
            </li>
            <li>Child 3d</li>
        </ul>
    </li>
    <li>Nav 4</li>
</ul>

This will give you the hierachy you need, and then it's just a case of styling it using CSS - positioning, display: block/none, :hover etc.
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
OK. Thanks. I'll keep working on that :)
0
 
Julian HansenCommented:
Usual practice for this is to create your navigation as a nested list of items and then use CSS to show and hide the sub-menus.

Do you means something like this
<!doctype html>
<html>
<head>
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff !important;
	background-color: #000 !important;
}
ul.main-nav {
	width: 50%;
	margin: 0 auto;
}
ul.main-nav ul {
	display: none;
}
ul.main-nav > li {
	position: relative;
	display: inline-block;
}
ul.main-nav a {
	display: inline-block;
	font-family: arial;
	font-weight: normal;
	font-size: 14px;
	color: #cccccc;
	font-weight: lighter;
	margin-left:10px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;
}
ul.main-nav > li > ul {
	position: absolute;
}
ul.main-nav li:hover > ul {
	display: block;
}
ul.main-nav ul ul {
	margin-left: 15px;
	padding-left: 15px;
}
nav {
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: lighter;
	padding-top: 8px;
	border-top: 1px solid #cccccc;
	background-color: #000 !important;
	padding: 10px 0;
}
</style>
</head>
<body>
<nav>
	<ul class="main-nav">
		<li><a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Velkommen</a></li>
		<li><a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Slægtstræ</a></li>
		<li><a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gf magasin</a></li>
		<li><a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gravsten</a></li>
		<li><a>Arkivalier og værktøjer</a>
			<ul>
				<li><a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kirkebøger</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Folketællinger</a>
					<ul>
						<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a></li>
					</ul>
				</li>	
				<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Stednavne</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Skifter Staden</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kancelli m.m.m.</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Herreds- og Byfogeder</a>                    </li><li><a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Om Arkivalier</a></li>
			</ul>
		</li>
	</ul>  
</nav>
</body>
</html>

Open in new window

Working sample here
1
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Julian,

Yes - we are getting closer :)

But I would really like if it was possible to display the "child" beside the parent - something like this:
Sk-rmbillede-2018-01-17-16.43.24.png
This comes from Rapid Waever which is a web-dseign tool that I am trying get more independant of :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
I have made this on the basis of your code. Only thing missing is that the "child" is shown besides the parent in stead of below.
http://kroweb.dk/gfdev/templates/julian.php
0
 
Julian HansenCommented:
Fairly simple change
<!doctype html>
<html>
<head>
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff !important;
	background-color: #000 !important;
}
ul.main-nav {
	width: 50%;
	margin: 0 auto;
}
ul.main-nav ul {
	display: none;
}
ul.main-nav > li {
	position: relative;
	display: inline-block;
}
ul.main-nav a {
	display: inline-block;
	font-family: arial;
	font-weight: normal;
	font-size: 14px;
	color: #cccccc;
	font-weight: lighter;
	margin-left:10px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;
}
ul.main-nav > li > ul {
	position: absolute;
}
ul.main-nav li:hover > ul {
	display: block;
}
ul.main-nav ul li {
	position: relative;
}
ul.main-nav ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}
nav {
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: lighter;
	padding-top: 8px;
	border-top: 1px solid #cccccc;
	background-color: #000 !important;
	padding: 10px 0;
}
</style>
</head>
<body>
<nav>
	<ul class="main-nav">
		<li><a href="https://genealogiskforum.dk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Velkommen</a></li>
		<li><a href="https://genealogiskforum.dk/slaegtstrae" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Slægtstræ</a></li>
		<li><a href="https://genealogiskforum.dk/Gf_Magasin" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gf magasin</a></li>
		<li><a href="https://genealogiskforum.dk/gravsten_pk" class="w3-bar-item w3-button w3-hide-small w3-hover-text-light-grey w3-hover-dark-grey" >Gravsten</a></li>
		<li><a>Arkivalier og værktøjer</a>
			<ul>
				<li><a href="https://genealogiskforum.dk/arkivalier/canvas" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none;">Geografisk indgang</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kirkebøger</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Folketællinger</a>
					<ul>
						<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" style="font-family: arial; font-weight: normal; font-size: 14px; color: #cccccc; font-weight: lighter; margin-left:10px; text-decoration: none; display: block">Folketællinger light</a></li>
					</ul>
				</li>	
				<li><a href="http://genealogiskforum.dk/arkivalier/stednavne" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Stednavne</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Skifter Staden</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kancelli" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Kancelli m.m.m.</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey"  target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Herreds- og Byfogeder</a>                    </li><li><a href="https://genealogiskforum.dk/arkivalier" class="w3-bar-item w3-button w3-hover-text-light-grey w3-hover-dark-grey" >Om Arkivalier</a></li>
			</ul>
		</li>
	</ul>  
</nav>
</body>
</html>

Open in new window

Updated sample here
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
That is super :) It works perfectly with the code below.

Ca I ask you just one more little thing.

When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box. Is that possible?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">	
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff !important;
	background-color: #000 !important;
}
ul.main-nav {
	width: 50%;
	margin: 0 auto;
}
ul.main-nav ul {
	display: none;

}


ul.main-nav > li {
	position: relative;
	display: inline-block;
}
ul.main-nav a {
	display: inline-block;
	font-family: sans-serif;
	font-weight: lighter;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #e6e6e6;
	margin-left:10px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;

}

ul.main-nav a:hover {
background-color: #4d4d4d;

}	

ul.main-nav > li > ul {
	position: absolute;
}
ul.main-nav li:hover > ul {
	display: block;
}

ul.main-nav ul li {
	position: relative;
}
ul.main-nav ul ul {
	position: absolute;
	top: 0;
	left: 100%;
}

nav {
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: lighter;
	padding-top: 8px;
	border-top: 1px solid #cccccc;
	background-color: #000 !important;
	padding: 10px 0;
}
</style>


</head>
<body>
<nav>
	<ul class="main-nav">
		<li><a href="https://genealogiskforum.dk"  >Velkommen</a></li>
		<li><a href="https://genealogiskforum.dk/slaegtstrae"  >Slægtstræ</a></li>
		<li><a href="https://genealogiskforum.dk/Gf_Magasin"  >Gf magasin</a></li>
		<li><a href="https://genealogiskforum.dk/gravsten_pk"  >Gravsten</a></li>
		<li><a>Arkivalier og værktøjer</a>
			<ul>
				<li><a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" >Kirkebøger</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger</a>
					<ul>
						<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" >Folketællinger light</a></li>
					</ul>
				</li>	
				<li><a href="http://genealogiskforum.dk/arkivalier/stednavne"   target="_blank">Stednavne</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden"  >Skifter Staden</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kancelli"  >Kancelli m.m.m.</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier"   target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php"  target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php"  target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools"  >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder"  >Herreds- og Byfogeder</a>                    </li><li><a href="https://genealogiskforum.dk/arkivalier"  >Om Arkivalier</a></li>
			</ul>
		</li>
	</ul>  
</nav>
</body>
</html>

Open in new window

0
 
Slick812Commented:
greetings   Peter Kroman, , ,  I hope you can find something in my code to be of help to you. I looked at your code work for the
<div class="w3-bar w3-black w3-mobile" > black menu thing, and it looked like it was so full of unnecessary class declarations and a ton of unneeded   style="" in all of the <a> links, So I did my version of this menu, and left out all unneeded class and style. I do not like to use the <ul> and <li> for this kind of menu, I like to use what the w3 uses for it's -
     <div class="w3-dropdown-hover">
and not use the un-needed <li> because now you can just use style to make the <a> most any display type like block, the same as a <li>

works in firefox and chrome -
<style>
.horzMenu {
background: black;
text-align: center;
padding: 2px 0;
}

.horzMenu a{
display: inline-block;
text-decoration: none;
padding: 11px 11px;
font-family: arial; 
font-weight: normal; 
font-size: 14px; 
color: #cccccc; 
font-weight: lighter;
background: black;
}

.horzMenu a:hover {
    background: #666;
}

.horzDropdown {
position: relative;
display: inline-block;
}

.horzDropdown button {
border: 0;
background: black;
display: inline-block;
cursor: s-resize;
padding: 11px 11px;
font-family: arial; 
font-weight: normal; 
font-size: 14px; 
color: #cccccc; 
font-weight: lighter;
}

.horzDrop4down button:hover {
    background: #666;
}

.horzDropdown:hover > button {
	background: #666;
}

.horzDropdown:hover > div {
	display: block;
}

.horzDropdown:hover  a {
	background: #666;
}


.horzDrops {
position: absolute;
top: 100%;
left: 0px;
background: black;
z-index: 2;
display: none;
}

.horzDrops a{
display: block;
}

.horzRight {
position: relative;
}

.horzRight p{
margin: 0;
position: absolute;
left: 100%;
top: 0px;
display: none;
}

.horzRight:hover > p {
display: block;
width:10em;
}


.arowR, .arowD {
border: 6px solid transparent;
margin-top:2px;
margin-left:4px;
text-align:center;
display: inline-block;
}

.arowD {
border-bottom: none;
border-top-color: white;
}

.arowR {
margin-top:6px;
margin-left:7px;
margin-bottom: -2px;
border-right: none;
border-left-color: white;
}

</style>



<div class="horzMenu">
    <a href="https://genealogiskforum.dk" >Velkommen</a>
    <a href="https://genealogiskforum.dk/slaegtstrae">Slægtstræ</a>
    <a href="https://genealogiskforum.dk/Gf_Magasin">Gf magasin</a>
    <a href="https://genealogiskforum.dk/gravsten_pk">Gravsten</a>
    
    <div class="horzDropdown">
      <button>Arkivalier og værktøjer<i class="arowD"></i></button>

      <div class="horzDrops">
        <a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a>
        <a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2">Kirkebøger</a>
		<div class="horzRight">
          <a href="https://genealogiskforum.dk/arkivalier/folketaellinger">Folketællinger<i class="arowR"></i></a>
            <p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Folketællinger light</a></p>
        </div>
        <a href="http://genealogiskforum.dk/arkivalier/stednavne" target= "_blank">Stednavne</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/skifter_staden">Skifter Staden</a>
        
        <a href="https://genealogiskforum.dk/arkivalier/kancelli">Kancelli m.m.m.</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target= "_blank">Alle arkivalier</a>
        <div class="horzRight">
        <a href="http://genealogiskforum.dk/laegdsruller.php" target= "_blank">Lægdsruller<i class="arowR"></i></a>
           <p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Lægdsruller light</a></p>
        </div>
        <a href="http://geltzer.dk/kirkeaaret.php" target= "_blank">Kirke kalender</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/tools">Nyttige links</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder">Herreds- og Byfogeder</a>                    

        <a href="https://genealogiskforum.dk/arkivalier">Om Arkivalier</a>

      </div>
    </div>
  </div>

Open in new window


I placed two children on right hover pop-ups, just to show the use for the -
     <div class="horzRight">
right pop child things

I really did not understand when you asked for -
    "When hovering over the drop down the hover background covers the text area only, and I would like it to cover the total area across the drop down box."

but I changed the hover to make the background of all drop <a> a grey color, but it seems very odd to me, and I may not have under stood you.

 please at least try this code and see if you understand what it's doing in the CSS
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Slick812,

This look's very nice. Just a few things

What I meant by the "hovering over the drop down ... thing, was something like you can see in this example:
http://kroweb.dk/gfdev/templates/julian.php

I want the background of the drop down list to be the same color as the menu background (black), and I want the hover effect in the drop down to be the same as the hover effect color is in the rest of the menu (a shade of grey in this case).

I have tried to add that to your code, but i can't really get it working
0
 
Julian HansenCommented:
@Peter, again a small change.

Add height: 100% to the ul ul and remove the position relative on the ul li

Styles
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff !important;
	background-color: #000 !important;
}
ul.main-nav {
	width: 50%;
	margin: 0 auto;
}
ul.main-nav ul {
	display: none;
}
ul.main-nav > li {
	position: relative;
	display: inline-block;
}
ul.main-nav a {
	display: inline-block;
	font-family: arial;
	font-weight: normal;
	font-size: 14px;
	color: #cccccc;
	font-weight: lighter;
	margin-left:10px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;
}
ul.main-nav > li > ul {
	position: absolute;
}
ul.main-nav li:hover > ul {
	display: block;
}
ul.main-nav ul ul {
	position: absolute;
	top: 0;
	left: 100%;
	height: 100%;
}
nav {
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: lighter;
	padding-top: 8px;
	border-top: 1px solid #cccccc;
	background-color: #000 !important;
	padding: 10px 0;
}
</style>

Open in new window

Updated sample here
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Julian,

I'll look into this a little later to day (I am on my way out right now :) )

I have also sent you a personal EE message :)
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
@Slick812,

I like your setup, and I have worked quite a bit with your CSS. I am a little confused about all the background color statements that does not have any effect. If you can elaborate a little on why that is, I would be glad :)

Besides that there is only one thing I need to get fixed, and I believe I have tried whatever I could think of. But I can't fix it.

Take a look here: http://kroweb.dk/gfdev/templates/slick812.php and navigate down over the drop down list. You will see that the ENTIRE list take hover effect, and I need the hover effect to be limited per line in the drop down list, just as it works with the buttons.

If you can guide me to how we can fix that, I'll surely use your suggestion in my templates.
I paste in the full edited code here below.
<!doctype html>
<html>
<head>
    <meta charset="utf-8">  
<style>
.horzMenu {
background-color: black; /*background-color color to the menu block*/
text-align: center;
padding: 2px 0;
}

.horzMenu a{
display: inline-block;
text-decoration: none;
padding: 10px 16px;
font-family: sans-serif; 
font-weight: lighter; 
font-size: 0.8rem; 
line-height: 1rem;
color: #e6e6e6; 
white-space: nowrap;
background-color: black; /* bbackground-color color to horizontal menu buttons */
}

.horzMenu a:hover {
    background-color: #4d4d4d; /* hover fcolor to horizontal menu buttons */
}

.horzDropdown {
position: relative;
display: inline-block;
background-color: white; /* no color effect */
}

.horzDropdown button {
border: 0;
background-color: black;
display: inline-block;
cursor: s-resize;
padding: 11px 11px;
font-family: arial; 
font-weight: normal; 
font-size: 14px; 
color: #e6e6e6; 
font-weight: lighter;
background-color: black; /*background-color color to the dropdown button */
}

.horzDropdown a:hover {
    background-color: green; /* no color effect */
}

.horzDropdown button:hover {
    background-color: red; /* no color effect */
}

.horzDropdown:hover > button {
  background-color: #4d4d4d; /*hover color to dropdown button*/
}


.horzDropdown:hover > div {
  display: block;
  background-color: green; /* no color effect */
}

.horzDropdown:hover  a {
  background-color: black; /* backgrpund color to dropdown list*/
}


.horzDrops {
position: absolute;
top: 100%;
left: 0px;
background-color: white; /* no color effect */
z-index: 2;
display: none;
}

.horzDrops a {
display: block;
background-color: green; /* no color effect */

}

.horzDrops:hover a{
  background-color: #4d4d4d; /* hover color to the ENITIRE deopdown list */
}

.horzRight {
position: relative;
}

.horzRight p{
margin: 0;
position: absolute;
left: 100%;
top: 0px;
display: none;
}

.horzRight:hover > p {
display: block;
width:10em;
}


.arowR, .arowD {
border: 6px solid transparent;
margin-top:2px;
margin-left:4px;
font-size: 10px;
display: inline-block;
}

.arowD {
border-bottom: none;
border-top-color: white;
}

.arowR {
margin-top:6px;
margin-left:8px;
margin-bottom: -2px;
border-right: none;
border-left-color: white;
}

</style>

</head>
<body>

<div class="horzMenu">
    <a href="https://genealogiskforum.dk" >Velkommen</a>
    <a href="https://genealogiskforum.dk/slaegtstrae">Slægtstræ</a>
    <a href="https://genealogiskforum.dk/Gf_Magasin">Gf magasin</a>
    <a href="https://genealogiskforum.dk/gravsten_pk">Gravsten</a>
    
    <div class="horzDropdown">
      <button>Arkivalier og værktøjer<i class="arowD"></i></button>

      <div class="horzDrops">
        <a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a>
        <a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2">Kirkebøger</a>
    <div class="horzRight">
          <a href="https://genealogiskforum.dk/arkivalier/folketaellinger">Folketællinger<i class="arowR"></i></a>
            <p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Folketællinger light</a></p>
        </div>
        <a href="http://genealogiskforum.dk/arkivalier/stednavne" target= "_blank">Stednavne</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/skifter_staden">Skifter Staden</a>
        
        <a href="https://genealogiskforum.dk/arkivalier/kancelli">Kancelli m.m.m.</a>          
        
        <a href="https://genealogiskforum.dk/arkivalier/allearkivalier" target= "_blank">Alle arkivalier</a>
        <div class="horzRight">
        <a href="http://genealogiskforum.dk/laegdsruller.php" target= "_blank">Lægdsruller<i class="arowR"></i></a>
           <p><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/">Lægdsruller light</a></p>
        </div>
        <a href="http://geltzer.dk/kirkeaaret.php" target= "_blank">Kirke kalender</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/tools">Nyttige links</a>
        
        <a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder">Herreds- og Byfogeder</a>                    

        <a href="https://genealogiskforum.dk/arkivalier">Om Arkivalier</a>

      </div>
    </div>
  </div>

  </body>
</html>

Open in new window

0
 
Julian HansenCommented:
@Peter,

Did you take a look at my latest sample?
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Yep - and I am working with that too. I am getting back about that :)
0
 
Julian HansenCommented:
Just checking if my interpretation of your requirement re the background colour of the sub-sub-menu was correct?
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Tak a look here: http://kroweb.dk/gfdev/templates/julian.php

This is appr, what I need (full code below)

What I would like to add, is that when hovering down over the drop down list, so it should be the whole with of the entry that takes the hover effect, and not just the text part of it.

Second thing is, that it would be very nice if we could add a down arrow to the right of the drop down button in the bottom, and some small right arrows to the right of the text in the drop down list where the sub-sub menu(s) are.

But I have one problem. I have had to "hard code" the positioning of the sub-sub in the code below to get it shown right. But this will be a problem when I need to update the drop down list. Is there a way we can force it to display exactly to the right of its parent?

<!doctype html>
<html>
<head>
    <meta charset="utf-8">	
<style type="text/css">
ul {
	margin: 0;
	padding: 0;
	list-style: none;
	color: #fff !important;
	background-color: #000 !important;
}
ul.main-nav {
	width: 50%;
	margin: 0 auto;
}
ul.main-nav ul {
	display: none;

}


ul.main-nav > li {
	position: relative;
	display: inline-block;
}
ul.main-nav a {
	display: inline-block;
	font-family: sans-serif;
	font-weight: lighter;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #e6e6e6;
	margin-left:10px;
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;

}

ul.main-nav a:hover {
background-color: #4d4d4d;

}	

ul.main-nav > li > ul {
	position: absolute;
}
ul.main-nav li:hover > ul {
	display: block;
}

/*ul.main-nav ul li {
	position: relative;
}*/
ul.main-nav ul ul {
	position: absolute;
	left: 100%;
	height: inherit;
	top: 18%;
	
}

nav {
	font-family: sans-serif;
	font-size: 0.8rem;
	font-weight: lighter;
	padding-top: 8px;
	border-top: 1px solid #cccccc;
	background-color: #000 !important;
	padding: 10px 0;
}
</style>


</head>
<body>
<nav>
	<ul class="main-nav">
		<li><a href="https://genealogiskforum.dk"  >Velkommen</a></li>
		<li><a href="https://genealogiskforum.dk/slaegtstrae"  >Slægtstræ</a></li>
		<li><a href="https://genealogiskforum.dk/Gf_Magasin"  >Gf magasin</a></li>
		<li><a href="https://genealogiskforum.dk/gravsten_pk"  >Gravsten</a></li>
		<li><a>Arkivalier og værktøjer</a>
			<ul>
				<li><a href="https://genealogiskforum.dk/arkivalier/canvas" >Geografisk indgang</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kirkeboeger_2" >Kirkebøger</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger</a>
					<ul>
						<li><a href="https://genealogiskforum.dk/arkivalier/ft/ft_light/" >Folketællinger light</a></li>
					</ul>
				</li>	
				<li><a href="http://genealogiskforum.dk/arkivalier/stednavne"   target="_blank">Stednavne</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/skifter_staden"  >Skifter Staden</a></li>
				<li><a href="https://genealogiskforum.dk/arkivalier/kancelli"  >Kancelli m.m.m.</a>          </li>
				<li><a href="https://genealogiskforum.dk/arkivalier/allearkivalier"   target="_blank">Alle arkivalier</a></li><li><a href="http://genealogiskforum.dk/laegdsruller.php"  target="_blank">Lægdsruller</a></li><li><a href="http://geltzer.dk/kirkeaaret.php"  target="_blank">Kirke kalender</a></li><li><a href="http://genealogiskforum.dk/arkivalier/tools"  >Nyttige links</a></li><li><a href="http://genealogiskforum.dk/arkivalier/herredsbyfogeder"  >Herreds- og Byfogeder</a>                    </li><li><a href="https://genealogiskforum.dk/arkivalier"  >Om Arkivalier</a></li>
			</ul>
		</li>
	</ul>  
</nav>
</body>
</html>

Open in new window

0
 
Julian HansenCommented:
What I would like to add, is that when hovering down over the drop down list, so it should be the whole with of the entry that takes the hover effect, and not just the text part of it.
Does it not do that already?
But I have one problem. I have had to "hard code" the positioning of the sub-sub in the code below to get it shown right. But this will be a problem when I need to update the drop down list. Is there a way we can force it to display exactly to the right of its parent?
That is as a result of mixing my two solutions. The first used the generic method of positioning the flyout - the second implementation I interpreted you wanting to have the entire sub-sub menu to be black and full height of main menu - so I removed the relative positioning.

In your code above change this
/*ul.main-nav ul li {
	position: relative;
}*/
ul.main-nav ul ul {
	position: absolute;
	left: 100%;
	height: inherit;
	top: 18%;
}

Open in new window

To this
ul.main-nav ul li {
	position: relative;
}
ul.main-nav ul ul {
	position: absolute;
	left: 100%;
	height: inherit;
	top: 0;
}

Open in new window


To add down arrows - you can do this in a number of ways to do this. One is to add a background image to the <li> with the image of the down arrow you want. Or you could use a font library like font-awesome as I have in this updated sample
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks Julian,

I will work your changes in at once.

As for the first issue  - No it does not have this now.
This is how it looks now:
Sk-rmbillede-2018-01-18-16.21.44.pngAnd this is what I would like it to look like:
Sk-rmbillede-2018-01-18-16.25.12.png
0
 
Julian HansenCommented:
Ok so you want the highlight to be full width - not the hover area (which is already full width)
What you want to do is remove the margin on the <a> and make it display block (full width). You can do it like this
ul.main-nav a {
	display: inline-block;
	font-family: sans-serif;
	font-weight: lighter;
	font-size: 0.8rem;
	line-height: 1rem;
	color: #e6e6e6;
	/* margin-left: 10px; REMOVE THIS */
	text-decoration: none;
	white-space: nowrap;
	padding: 10px 16px;
	display: block; /* ADD THIS */
}

Open in new window

0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
That is so beautiful :) Everything is working right now.

Just one little thing. I would like to position the fa-angle-double-right as far right as possible. I have tried with float: right, but it seems to push it half a line down. Just giving you the code in question here

<li><a href="https://genealogiskforum.dk/arkivalier/folketaellinger" >Folketællinger <span <i class="fa fa-angle-double-right" style="padding-left: 15px;"></span></i></a>

Open in new window

0
 
Slick812Commented:
OK

in my code I universally set all links to hover color here -

.horzMenu a:hover {
    background-color: #4d4d4d; /* hover fcolor to horizontal menu buttons */
}

this does ALL <a> hover color in drop and child

because I did not understand your comment abot the color I added 2 hover , which you now need to remove --

.horzDropdown:hover > button {
      background: #666;
}

.horzDropdown:hover  a {
      background: #666;
}

Just for your consideration, this code is not for mobil phones as they do not have a hove, mouse over for touch screens, and the mouse over drop menues are not the current mobil method for drops. also in less width screens your right extend child block will go off screen and can not be seen. It is not useful to have a link <a> to open a child as you have here, as on touch screen the link will change page, and the child will not be seen
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
@ Julian,

One more little thing.

I am struggling to add a little more padding between lines in the dropdown list, but I am stuck :)
Can you help?
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks @Slick812,

I will look into it, and get back asap
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
@Julian,

Forget about the spacing between lines in the drop down list. I have wrapped it in it's own class, and can control it nicely through this class.

But I be very happy if have the idea how to position the "fa-angle-double-right" signs as far to the right on the line as possible :)
http://kroweb.dk/gfdev/templates/julian.php
0
 
Peter KromanSenior Proposal SpecialistAuthor Commented:
Thanks to Julian and Slick812,

I have ended up using Julians solution since it fits my needs best. Thank you Julian for assisting me to get this work all the way :)

Also thanks to Slick812 for participating with a very good input.
0
 
Julian HansenCommented:
You are welcome.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.