So I have made a little website and I have found a problem. I have a two ul tags in a nav where I have put a couple of li tags in and then some ul tags in some of those li tags I have also put an img in one of those li tags in another li. When I then apply some animations the img moves along with the other tabs... Here are some pictures;
When nothing is touched with the mouse. Everything looks fine
When I'm hovering over the lock (the img I was walking about) it is moving to the right and showing a logout button
But when I'm dragging this down the lock img is following down.
Here too
And here is the code of the whole nav bar:
body{
margin-left: 10px;
padding: 10px;
font-family: arial;
background-color: #E9EBEE !important;
}
nav {
margin-top: -10px;
height: 80px;
background-color: #2A3943;
padding: 5px;
box-shadow: 2.5px 2.5px 2.5px #888888;
border-radius: 4px;
z-index: 1;
}
nav h1 {
color: white;
margin-left: 20px;
}
nav ul {
margin-left: 27%;
list-style: none;
margin-top: -55px;
}
nav ul li {
border-radius: 2px;
float: left;
cursor: pointer;
margin-left: 5px;
display: inline;
padding: 21.5px;
background-color: #1AB188;
transition: all .5s ease;
box-shadow: 2.5px 2.5px 2.5px #0d1215;
}
nav ul li:hover {
box-shadow: 5px 5px 5px #0d1215;
}
nav ul li#pleb {
height: 19px;
}
nav ul li#pleb ul {
margin-top: -80px;
opacity: 0;
transition: all .5s ease;
}
nav ul li#pleb:hover ul {
opacity: 1;
margin-top: 30px;
}
nav ul li#pleb:hover {
height: 290px;
}
nav ul li:hover {
background-color: #179E79;
}
nav ul li ul.dropdwn li {
display: none;
margin-top: 20px;
margin-left: -90px;
}
nav ul li:hover ul.dropdwn li {
display: block;
}
nav ul li ul li:hover {
background-color: #2A3943;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul li#fort {
height: 19px;
}
nav ul li#fort:hover {
height: 400px;
}
nav ul li#fort ul {
margin-left: -50px;
margin-top: -300px;
opacity: 0;
transition: all .5s ease;
}
nav ul li#fort:hover ul {
margin-top: 20px;
opacity: 1;
}
nav ul li#fort ul.drpdown li {
display: none;
margin-top: 10px;
}
nav ul li#fort:hover ul.drpdown li {
display: block;
}
nav .login ul {
list-style: none;
margin-top: 0px;
border-color: none;
}
nav .login ul li {
background-color: rgba(38, 181, 150, 0);
box-shadow: none;
margin-top: -80px;
margin-left: 770px;
transition: all .5s ease;
}
nav .login ul li:hover {
transform: translateX(-100px);
}
nav .login ul li img {
width: 40px;
}
nav .login ul li img:hover {
transform: none;
}
nav .login ul li ul li {
display: none;
margin-left: -30px;
margin-top: -60px;
transition: none;
background-color: rgba(119, 221, 110, 0);
}
nav .login ul li ul li#signup {
position: absolute;
margin-left: 20px;
margin-top: -60px;
}
nav .login ul li ul li#logout {
margin-left: -10px;
}
nav .login ul li:hover ul li {
display: block;
transform: none;
}
nav .login ul li ul li button {
border: none;
padding: 5px;
cursor: pointer;
background-color: rgba(164, 19, 34, 0);
color: #fff;
transition: all .5s ease;
}
nav .login ul li ul li button:hover {
background-color: #1AB188;
padding: 10px;
}
nav .login ul li ul li#signup button {
width: 80px;
}
<nav>
<h1>MemeStagram</h1>
<ul>
<li>Home</li>
<li id="pleb">Memes
<ul class="dropdwn">
<li>Most Popular</li><br>
<li>Newest</li><br>
<li>Most Viewed</li>
</ul>
</li>
<li>About Us</li>
<li id="fort">Contact
<ul class="drpdown">
<li>Bebin</li><br>
<li>Balbin</li><br>
<li>Bohan</li><br>
<li>Barcus</li><br>
<li>Bonis</li>
</ul>
</li>
<li>Settings</li>
</ul>
<div class="login">
<ul>
<li><img src="img/unlock.png">
<ul>
<li id="logout">
<button type="submit">Logout</button>
</li>
</ul>
</li>
</ul>
</div>
</nav>
I Would be really thankful for help with this problem. And I have tried to set position: absolute; and position: fixed; but it didn't give me any positive result...
//Kevin
Please find below a complete rewrite of your code as it was all over the place and was not consistent with standards. Please read over the below code and look where you went wrong to learn more about css.
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
* {font-family: arial;}
header {background-color: #2A3943;padding: 10px 40px;box-shadow: 2.5px 2.5px 2.5px #888888;border-radius: 4px;}
header nav h1 {display: inline-block;color: white;}
header nav {display: block;}
header nav ul {list-style: none; padding: 0px;display: block;}
header nav ul li {position:relative;display: inline-block;border-radius: 2px;cursor: pointer;padding: 22px;background-color: #1AB188;box-shadow: 2.5px 2.5px 2.5px #0d1215;margin:0px 5px;text-align: center;}
header nav ul li:hover > ul {visibility: visible;transform: translateY(0%);transition-delay: 0s, 0s, 0.3s;opacity: 1}
header nav ul li > ul {background-color:#1AB188;top:60px;visibility: hidden;position: absolute;width: 100%;transform: translateY(-2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;left:0px;opacity: 0;}
header nav ul li a {text-decoration: none;color: white;display: block;}
header nav ul li a:hover {color: #333;}
header nav ul li:last-child {float: right;margin-right: 0px;padding: 20px 0px; background: none;box-shadow: none;}
header nav ul li:first-child {border-radius: none;padding: 0px;background-color:transparent;box-shadow: none;margin-right: 40px;}
header nav ul li:nth-child(2) {margin-left: 0px;}
header nav ul li:last-child > * {display: inline-block;vertical-align: middle;}
header nav ul li:last-child img {margin-right: 20px;width: 40px;}
header nav ul li:last-child:hover a button {visibility: visible;transform: translateX(0%);transition-delay: 0s, 0s, 0.3s;opacity: 1}
header nav ul li a button {padding: 5px;cursor: pointer;background-color: rgba(164, 19, 34, 0);color: #fff;visibility: hidden;transform: translateX(2em);transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s;opacity: 0;}
header nav ul li > ul li {box-shadow: none;background: none;display: block;border-radius: 0px;margin:0px;padding: 21px !important}
header nav ul li > ul li:last-child {float: none;}
header nav ul li > ul li:first-child {margin: 0px;}
</style>
</head>
<body>
<div class="wrapper">
<header>
<nav>
<ul>
<li><h1>MemeStagram</h1></li>
<li>Home</li>
<li>Memes
<ul>
<li>Most Popular</li><br>
<li>Newest</li>
<li>Most Viewed</li>
</ul>
</li>
<li>About Us</li>
<li>Contact
<ul>
<li>Bebin</li>
<li>Balbin</li>
<li>Bohan</li>
<li>Barcus</li>
<li>Bonis</li>
</ul>
</li>
<li>Settings</li>
<li class="login"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/f/f4/Simpleicons_Interface_unlocked-padlock.svg/1024px-Simpleicons_Interface_unlocked-padlock.svg.png" alt="Login/Logout"><button type="submit">Logout</button></li>
</ul>
</nav>
</header>
</div>
</body>
</html>
As you seem pretty new to css I will explain the of selectors used:
> This selector means "directly inside" so when I put li > ul it means target the UL directly inside an li
* this selector means everything, where I have set everything to have font-famly:arial.
:hover this selector means on hover of the element its attached to, do something
:last-child this selector means the last child of the attached element
:first-child this selector means the first child the attached element
Heres a working codepen: https://codepen.io/anon/pen/MrPBEW
Related
I was trying to apply some style to the active item in an HTML navigation bar, which is same as the a tag for the same.
To experiment this, I have taken the example from http://cssdeck.com/labs/css-hover-effect
Below is my modified code, where I basically created a new class "active" and replicated the same style for a:
HTML code:
<!DOCTYPE html>
<html lang = "en">
<head>
<link href='http://fonts.googleapis.com/css?family=Roboto:500,900,100,300,700,400' rel='stylesheet' type='text/css'>
<link rel = "stylesheet" type = "text/css" href = "CSS.css">
</head>
<body>
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
</body>
CSS code:
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a, nav ul li a.active {
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before,
nav ul li a.active:after,
nav ul li a.active:before {
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a,
nav.stroke ul li a.active,
nav.fill ul li a.active {
position: relative;
}
nav.stroke ul li a:after,
nav.fill ul li a:after,
nav.stroke ul li a.active:after,
nav.fill ul li a.active:after {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after,
nav.stroke ul li a.active:hover:after {
width: 100%;
}
nav.fill ul li a,
nav.fill ul li a.active {
transition: all 2s;
}
nav.fill ul li a:after,
nav.fill ul li a.active:after {
text-align: left;
content: '.';
margin: 0;
opacity: 0;
}
nav.fill ul li a:hover {
color: #fff;
z-index: 1;
}
nav.fill ul li a:hover:after {
z-index: -10;
animation: fill 1s forwards;
-webkit-animation: fill 1s forwards;
-moz-animation: fill 1s forwards;
opacity: 1;
}
Unfortunately, the styles are not getting reflected in the "active" class in the navigation menu.
How to fix the error code?
Points you need to consider:
If you're going to apply the same styles for the anchor tag and the anchor tag with the class active, you don't need to mention the active classes explicitly. It applies it on all regardless of that.
If you want to have some other styles which should be applied specifically for only active class, you need to define that like I have just for demonstration changed the color of active class component to red.
.active{
...
}
Third, you got the spelling of active wrong in your html.
.center {
text-align: center;
}
section {
height: 100vh;
}
/* NAVIGATION */
nav {
width: 80%;
margin: 0 auto;
background: #fff;
padding: 50px 0;
box-shadow: 0px 5px 0px #dedede;
}
nav ul {
list-style: none;
text-align: center;
}
nav ul li {
display: inline-block;
}
nav ul li a{
display: block;
padding: 15px;
text-decoration: none;
color: #aaa;
font-weight: 800;
text-transform: uppercase;
margin: 0 10px;
}
nav ul li a,
nav ul li a:after,
nav ul li a:before{
transition: all .5s;
}
nav ul li a:hover {
color: #555;
}
/* stroke */
nav.stroke ul li a,
nav.fill ul li a{
position: relative;
}
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
<section style="background: #e74c3c; color: #fff;">
<h2>Underline Stroke</h2>
<nav class="stroke">
<ul>
<li>Home</li>
<li>About</li>
<li>Downloads</li>
<li>More</li>
<li>Nice staff</li>
</ul>
</nav>
</section>
Update:
These two CSS styles have been updated to have the hover effect on load on the active by default.
nav.stroke ul li a:not(.active):after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 0%;
content: '.';
color: transparent;
background: #aaa;
height: 1px;
}
nav.stroke ul li a:hover:after{
width: 100%;
}
.active{
color: #555;
}
.active:after{
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
content: '.';
background: #aaa;
height: 1px;
}
It looks like you don't have any different styles to apply to just your active class. All of your styles apply to both a element and the a.active. If you want your a.active elements to be different, apply different styles.
a {
color: #fff;
}
a.active {
color: #34dd42;
}
As the previous answer said having both a and a.active on the css selector is redundant and unnecessary. Simply applying the styles to just the a element will cover both.
I have a nested <ul> within my nav ul. When the <ul> has only one element its padding is fine and the <li> fits nicely. However when I have more than one element in the nested <ul> it extends to the side of the page. I can see nothing to do with padding changes in my :first-child or anything in my css for the nested <ul>.
The nested ul with multiple elements
The nested ul with only one element
Here is the HTML:
<header id="header" class="alt">
<h1><strong>South Somerset Motocross Club</strong></h1>
<nav id="nav">
<ul>
<li>Home</li>
<li><a>Info</a>
<ul>
<li>Club Rules</li>
<li>Pre-Race Bike Check</li>
<li>Job Descriptions</li>
<li>Race Fees</li>
<li>Groups And Ages</li>
</ul>
</li>
<li><a>About Us</a>
<ul>
<li>Our Heritage</li>
<li>Committee</li>
</ul>
</li>
<li><a>News</a></li>
<li>Fixtures</li>
</ul>
</nav>
</header>
Here is the CSS:
#header nav {
height: inherit;
line-height: inherit;
position: absolute;
right: 1.25em;
top: 0;
vertical-align: middle;
}
#header nav ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#header nav ul li {
color: #fff;
display: inline-block;
padding-left: 10px;
padding-right: 10px;
margin-left: 1em;
}
#header nav ul li ul {
display: none;
padding: 0;
margin: 0;
background-color: #eee;
border-radius: 4px;
}
#header nav ul li:hover ul {
display: block;
position: absolute;
}
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
#header nav ul li ul li a {
color: #111;
padding: 0;
margin: 0;
display: block;
}
#header nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li a:hover {
color: rgba(255, 255, 0, 1);
}
#header.alt nav ul li ul li:hover {
background-color: #3477ff;
}
#header nav ul li ul li:hover {
background-color: #3477ff;
}
#header.alt nav ul li ul li a {
color: #000;
padding: 0;
display: block;
}
#header nav ul li a {
-moz-transition: color 0.1s ease-in-out;
-webkit-transition: color 0.1s ease-in-out;
-ms-transition: color 0.1s ease-in-out;
transition: color 0.1s ease-in-out;
color: #000;
display: inline-block;
text-decoration: none;
}
#header nav ul li a:hover {
color: #000;
}
Any ideas on how I can keep the width of the <ul> to the max length of one of the items?
Add display block in
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
display:block;
}
here is the fiddle
Yop!
i checked Your css and the problem was here:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
width: 100%;
color: black;
font-size: 12pt;
}
Which i changed to this:
#header nav ul li ul li {
border-radius: 4px;
margin: 0 0 0 0;
padding-left: 4px;
padding-top: 1px;
padding-right: 4px;
//width: 100%;
display:table;
color: black;
font-size: 12pt;
}
So now it's getting the width of longest item :)
Hope i helped!
I have a vertical list of navigation icons, with a sub-menu (under the News tab). I want this submenu to transition from a width 0 to its full width (150px) when I hover over its parent option on the main navigation menu. Currently, the transition is not happening - it is going straight to the full width with no transition.
I pasted all the relevant code (parts of the css that are important for the transition are at the bottom below the marked point).
HTML:
<div id="nav">
<ul>
<li>Home</li>
<li>News
<ul>
<li>Current</li>
<li>Archive</li>
</ul></li>
<li>History</li>
</ul>
</div>
CSS:
#nav {
height: auto;
width: 150px;
float: left;
}
#nav a {
display: block;
padding: 6px 0px;
text-indent: 5px;
color: #ffffff;
font-size: 12px;
text-decoration: none;
border: 3px solid;
border-color: #9c6741 #663918 #572e11 #96643f;
}
#nav ul {
padding: 0px;
margin-top: 0px;
}
#nav li {
list-style: none;
float: left;
width: 150px; /*150-2 for border*/
background-color: #8f5f3c;
}
#nav ul li:hover {
background-color: #7d5334;
}
#nav ul li:hover a {
border-color: #8f5e39 #663918 #572e11 #8a5b38;
}
#nav ul li ul {
display: none;
position: absolute;
margin-top: -33px;
margin-left: 150px;
padding: 0;
}
#nav ul li:hover ul {
display: block;
}
/*code for transition begins here*/
#nav ul li ul li {
float: none;
overflow: hidden;
width: 0px;
transition: width 1s ease-in;
}
#nav ul li:hover ul li {
width: 148px;
}
You can't call an animation on something that is invisible.
https://jsfiddle.net/scLhp54w/1/
#nav ul li ul {
/*display: none; */
position: absolute;
margin-top: -33px;
margin-left: 150px;
padding: 0;
}
I have a menu and some of my links have dropdown menus. Hovering over the link brings down the dropdown menu, but if I move my cursor onto the actual dropdown menu, the dropdown menu disappears.
Please help!
Here is the CSS and HTML of the actual menu:
CSS:
.menu ul {
color: #3d3d3d;
text-align: right;
float: right;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
}
.menu ul li {
font-family: LemonMilk;
font-size: 24px;
font-weight: bold;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.menu ul li:hover {
color: #0096ff;
}
.menu ul li ul {
padding: 0;
position: absolute;
background-color: rgba(0,0,0, 0.5);
margin-top: 5px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.menu ul li ul li {
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
font-size: 16px;
}
.menu ul li ul li:hover { background-color: rgba(0,0,0, 0.9); }
.menu ul li:hover ul {
color: #0096ff;
display: block;
opacity: 1;
visibility: visible;
text-decoration: none;
}
.menu ul li a {
color: #3d3d3d;
}
.menu ul li a:hover {
color: #0096ff;
}
.menu ul li ul li a {
color: #fff;
}
.menu ul li ul li a:hover {
color: #0096ff;
}
HTML:
<header>
<div class="wrapper">
<div id="clogo"></div>
<span class="menu">
<ul id="dropnav">
<li><a href="/forums/index.php" />Forums</a></li>
<li>Members
<ul>
<li>Member List</li>
<li>Staff List</li>
</ul>
</li>
<li>Donate<br>
<ul>
<li>Buycraft</li>
<li>Buy Credits</li>
<li>CL Plus</li>
</ul>
</li>
</ul>
</span>
</div>
</header>
Consider to use > selector in the CSS, so it only looks one level down the markup structure, no deeper. A demo that made similar to your style - http://jsfiddle.net/55nw4wmy/
.class ul li {
affects all levels of <li> inside.
}
.class > ul > li {
only affects the first level.
}
.class > ul > li > ul > li {
only affects the second level.
}
That way, you don't have to overwrite the rules continually. And for the drop down disappearing problem, see the comments in the demo link above.
The codes you shown work fine on my end, but from your code I suspect .menu ul li ul { margin-top: 5px; } could be the cause of such behavior. Currently it's working only because the first-level li have a bottom padding that is larger than 5px.
If by any chance the li in your homepage header doesn't have a bottom padding, then the top margin in the 2nd level ul will cause a 5px space between the li and the ul sublist inside it. When you move your mouse from the li to the sub list the mouse passes through that 5px space zone which doesn't belong to the list item and :hover loses its effect.
I would suggest changing that to .menu ul li ul { padding-top: 5px; }
hi i am trying to add a drop down item to my horizontal menu bar. i would like the drop down item to be "Parish council minutes" under "parish council information" like these but in my styles:
(http://www2.psd100.com/wp-content/uploads/2013/03/web-dropdown-menu-bar-psd0306.jpg)
i also intend to add a few more drop down menu item in different locations.
many thank in advance.
my css:
my css:
#cssmenu {
background: #f96e5b;
width: 1404px;
margin-right:auto;
margin-left:auto;
padding:0;
}
#cssmenu ul {
list-style: none;
margin: 0%;
padding: 0%;
line-height: 1;
display: block;
zoom: 1;
width:100%
}
#cssmenu ul:after {
content: " ";
display: block;
font-size: 0%;
height: 0%;
clear: both;
visibility: hidden;
}
#cssmenu ul li {
display: inline-block;
padding: 0%;
margin: 0%;
}
#cssmenu.align-right ul li {
float: right;
}
#cssmenu.align-center ul {
text-align: center;
}
#cssmenu ul li a {
color: #ffffff;
text-decoration: none;
display: block;
padding: 15px 25px;
font-family: 'Open Sans', sans-serif;
font-weight: 700;
text-transform: uppercase;
font-size: 14px;
position: relative;
-webkit-transition: color .25s;
-moz-transition: color .25s;
-ms-transition: color .25s;
-o-transition: color .25s;
transition: color .25s;
}
#cssmenu ul li a:hover {
color: #333333;
}
#cssmenu ul li a:hover:before {
width: 100%;
}
#cssmenu ul li a:after {
content: "";
display: block;
position: absolute;
right: -3px;
top: 19px;
height: 6px;
width: 6px;
background: #ffffff;
opacity: .5;
}
#cssmenu ul li a:before {
content: "";
display: block;
position: absolute;
left: 0;
bottom: 0;
height: 3px;
width: 0;
background: #333333;
-webkit-transition: width .25s;
-moz-transition: width .25s;
-ms-transition: width .25s;
-o-transition: width .25s;
transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
display: none;
}
#cssmenu ul li.active a {
color: #333333;
}
#cssmenu ul li.active a:before {
width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
display: block;
}
#cssmenu.align-right li:first-child a:after {
display: none;
}
#media screen and (max-width: 100%) {
#cssmenu ul li {
float: none;
display: block;
}
#cssmenu ul li a {
width: 100%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-bottom: 1px solid #fb998c;
}
#cssmenu ul li.last > a,
#cssmenu ul li:last-child > a {
border: 0;
}
#cssmenu ul li a:after {
display: none;
}
#cssmenu ul li a:before {
display: none;
}
}
#menubar2 {
width:400px;
margin-left:auto;
margin-right:auto;
}
my html:
<div id='cssmenu'>
<ul>
<li class='active'>
<li>Home</li>
<li>Parish Council information</li>
<li>What's on </li>
<li>History</li>
<li>Churches</li>
<li>Newsletter</li>
<li>Village Halls and Social Clubs </li>
<li>Gallery</li>
<div id="menubar2">
<li>Business in Runtons</li>
<li>Contact us</li>
</div>
</ul>
</div>
Put your "flyouts" (lets call it like this cause thats what is is) into your LI's.
Like this:
HTML:
<ul> <!-- this is your horizontal menu bar ul -->
<li>
Some Page
<div class="flyout_container">
<ul>
<li>Some Subpage of Some page
</ul>
</div>
</li>
</ul>
CSS:
ul > li
{
display:block;
position:relative;
height:30px;
}
ul > li .flyout_container
{
position:absolute;
top:30px; /* this is the LI's height*/
left:0;
display:none;
}
ul > li:hover .flyout_container
{
display:block;
}
Normal state you just see the first level and once u hover an LI with a flyout_container in it, it will appear located as you wished on the given screenshot.