I have a menu like that and i have arrows if any item has child items,I use css content property to put arrows but i cant allign arrows to the end of the line.
<ul id="menu-bar">
<li><a>homepage</a></li>
<li><a>about us</a></li>
<li><a>services</a>
<ul>
<li><a>service 1</a>
<ul>
<li><a>service 1A</a></li>
<li><a>service 1B</a></li>
</ul>
</li>
</ul>
</li>
</ul>
this is my css
#menu-bar:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#menu-bar li ul li > a:after {
content: '▶';
}
If you are trying to align it to the right try this http://jsfiddle.net/omcuL0vw/
#menu-bar li ul li > a:after {
float:right;
content: '▶';
}
Related
I have a simple menu made in html/css and the problem I encountered is that if I put my mouse pointer over menu item (test2) to expand submenu then other items from menu section (test1) change their positions: https://jsfiddle.net/dsb87pxz/
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
nav > ul > li {
display: inline-block;
}
nav > ul > li > ul {
display: none;
}
nav > ul > li:hover > ul {
display: block;
}
nav > ul > li > ul > li {
display: block;
}
Can you suggest a solution for this problem?
With vertical-align: top
nav>ul>li {
display: inline-block;
vertical-align: top;
}
nav>ul>li>ul {
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
nav>ul>li>ul>li {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
When you hover over a list item in the first level, it affects the list item on the right, because of display: inline-block.
Therefore one can use float: left and display: relative for <li> in the first level and display: absolute for the <ul> inside of the <li>.
Example
ul {
list-style: none;
padding: 0;
}
li {
padding: 2px 5px;
}
nav>ul>li {
float: left;
position: relative;
}
nav>ul>li>ul {
position: absolute;
left: 0;
display: none;
}
nav>ul>li:hover>ul {
display: block;
}
<nav>
<ul>
<li>test1</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
<li>
test2
<ul>
<li>test2.1</li>
<li>test2.2</li>
</ul>
</li>
</ul>
</nav>
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
You could add position:absolute to your hover element like so
nav > ul > li:hover > ul {
display: block;
position: absolute;
}
That's true you just need to add vertical-align as top to your inline-block elements which are li tags here.
display:inline-block by default aligns their block text to the baseline and that's why when user hover in above codes it aligns the text to the baseline i.e. vertical-align:baseline so change that to vertical-align:top.
nav > ul > li{
display: inline-block;
vertical-align:top; /*Just add this as already suggested*/
}
I have a menu bar on a hover it should display a submenu. I am displaying the sub menu but it moving entire main menu to side. I want the submenu out of the main menu, next to the main menu.
my HTML code
<div class="MenuBar">
<ul>
<li><img src="#"><br>text1</li>
<div id="submenu">
this is a test div
</div>
<li><img src="#"><br>text2</li>
<li><img src="#"><br>text3</li>
</ul>
CSS
#submenu {
display: none;
}
.MenuBar ul li a:hover #submenu {
display: block;
position: relative;
top: 20px;
}
I think this is what you are after. I have added classes to the lists, changed your id submenu to class and added submenu items to all lists.
.MenuBar ul li .submenu {
display: none;
}
.MenuBar ul li.men1:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men2:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
.MenuBar ul li.men3:hover .submenu {
display: inline-block;
position: relative;
top: 20px;
}
<div class="MenuBar">
<ul>
<li class="men1">text1
<div class="submenu">
hovered 1st
</div></li>
<li class="men2">text2
<div class="submenu">
hovered 2nd
</div></li>
<li class="men3">text3<div class="submenu">
hovered 3rd
</div></li>
</ul>
Let me know if this was what you were after.
you can use following CSS for this:
if you want to show submenu in bottom of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 100%;
left: 0px;
}
or if you want to show submenu in right of parent menu
.MenuBar ul li {
position: relative;
}
.MenuBar ul li:hover #submenu {
display: block;
position: absolute;
top: 0;
left: 100%;
}
Place the submenu div outside your lists. If you throw that inside a bunch of list item and play with display property, it will affect the list structure. Place that div outside the list item, position the submenu div with css so it always alignment to the respective menu item and them add your hover effect.
Change Html Like this:
<li>
<img src="#"><br>text1
<div id="submenu"><-----------------submenu must be child li
this is a test div
</div>
</li>
And Css Like This :
.MenuBar ul li a:hover + #submenu {<--------------use + selector
display: block;
position: relative;<-----Remove This
top: 20px;<------Remove This
margin-top: 20px;<----------Add This
margin-bottom: 10px;<-------Add This
}
Full Code:
#submenu {
display: none;
}
img {
width: 20px;
}
ul {
list-style: none;
}
.MenuBar ul li a:hover + #submenu {
display: block;
margin-top: 20px;
margin-bottom: 10px;
}
<div class="MenuBar">
<ul>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text1
</a>
<div id="submenu">
this is a test div
</div>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text2
</a>
</li>
<li>
<a href="#">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png"><br>text3
</a>
</li>
</ul>
</div>
I asked previously a question about how to make a dropdown menu by css. Now I've got it to work beautifully. But now I need to make it react to on click. The menu I'm trying to create will have 2 sets of nested list items. I'm using pseudo selecter :focus on the first level list items. But of course I lose the focus part when I'm trying to display the nested list item. Is it possible in some way to keep the first level list item to stay focused while the user goes deeper in the menu?
My html code is like this
<header class="Header">
<!-- Head navigation-->
<div>
<img src="images/cart_logo_webb_design.svg" alt="cart">
<img src="images/search_logo_webb_design.svg" alt="search glass">
</div>
<div> <img src="images/k_logo_webb_design.svg" alt="CompanyLogo"> </div>
<div>
<nav id="MainNavigation">
<img src="images/menu_logo_webb_design.svg" alt="Menu icon">
<ul id="dropDownMenu">
<li>
<a class="Sub_Menu_Link" href="#" title="Woman">Woman
</a>
<li>
<a class="Sub_Menu_Link" href="#" title="Womanplus">+
</a>
<ul>
<li>1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
</ul>
</li>
</li>
<li> <a class="Sub_Menu_Link" href="#" title="Man">Man</a>
<li>
<a class="Sub_Menu_Link" href="#" title="Manplus">+
</a>
<ul>
<li>1 </li>
<li>2 </li>
<li>3 </li>
<li>4 </li>
<li>5 </li>
</ul>
</li>
</li>
<li><a class="Sub_Menu_Link" href="#" title="Sale">Sale</a></li>
</ul>
</nav>
</div>
</header>
header {
position: fixed;
display: block;
background: white;
z-index: 1;
width: 100%;
top: 0;
}
.Header img {
width: 36px;
height: 40px;
}
header div {
float: right;
width: 33.33%;
margin: 0;
}
header div:first-of-type a {
padding: 0%;
}
header div:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
nav {
position: relative;
left: 0;
}
nav > ul {
margin: 0;
padding: 0 0px;;
float: left;
line-height: 40px;
}
nav a {
positon: absolute;
left: 0;
}
nav ul ul {
padding: 20px;
}
nav ul a {
list-style: none;
text-decoration: none;
}
nav ul ul li a {
display: inline-block;
}
nav > ul:after {
content: "";
visibility: hidden;
display: block;
clear: both;
}
.Sub_Menu_Link {
display: inline-block;
padding: 10px 0px;
line-height: 40px;
}
.Sub_Menu_Link:hover {
color: yellow;
}
nav ul {
background: #E9E9E9;
position: relative;
width: 100%;
}
nav ul ul li a:hover {
color: yellow;
}
nav ul ul {
display: none;
}
nav ul a:focus {
background: red;
}
nav ul a:focus ~ ul {
display: block;
}
nav > a:hover {
background-color: red;
}
nav > a:focus {
background-color: green;
}
nav ul {
display: none;
}
nav > a:focus ~ ul {
display: block;
}
It is not possible to do it simply with the :focus selector. In CSS, you cannot select the parent of an element, so as to keep the visibility with focus on a child. As an example:
element:focus -parent { /* this doesn't exist */ }
That simply does not exist as of right now. And you also cannot have focus on multiple elements, which adds on to the issue.
There are two ways that I can think of solving your problem:
Using the JavaScript event onclick instead of a CSS-only approach;
Maintaining the CSS-only approach and using input:checked instead of :focus for your triggers. It's known as The Checkbox Hack.
I don't know how to really explain this in a simple question for the title, but I have an example page to show you what I mean at http://www.yenrac.net/test
I am having problems with dropdown menus, as you can see. Whenever I hover over to the next category in the dropdown 'accordion' it jumps back and screws with desktop cursors if they have their browser in a small window. Another thing is that mobile users cannot just click the box link again to close the dropdown, which is something else I would like to fix. Can someone please take a look at this and help me figure out what I am doing wrong?
Here is my HTML: http://pastebin.com/RkFs97wH
<nav>
<ul id="navigation">
<li><a id="current" href="index.html">Home</a></li>
<li>FAQ</li>
<li><a class="dropdown" href="#">Dropdown</a>
<ul>
<li>
<a class="pullout" href="#">Pullout Tab</a>
<ul>
<li>Tier 3 Tab</li>
</ul>
</li>
<li>
<a class="pullout" href="#">Pullout Tab 2</a>
<ul>
<li>Tier 3 Tab</li>
</ul>
</li>
</ul>
</li>
<li>Servers</li>
<li id="last">Contact Us</li>
</ul>
</nav>
Here is my CSS: http://pastebin.com/ttYh0Qz6
/* Set to very large range just for convenience of testing */
#media screen and (max-width: 10000px) {
#postdatemeta {
visibility: visible;
}
.postdate {
visibility: hidden;
}
nav ul {
list-style-type: none;
margin: 0 auto;;
padding: 0;
width: 98%;
}
nav li a {
display: block;
color: #fff;
padding: 1em 0;
margin: 0.3em auto;;
text-decoration: none;
text-align: center;
background: #000;
}
nav ul ul {
position: absolute;
visibility:hidden;
}
nav ul li:hover > ul {
visibility: visible;
position: relative;
}
nav ul ul li a {
background: #999;
}
.pullout:after {
content: "\000020\0025BE";
}
I appreciate any help and feedback you are able to provide me!
You are adding a margin to the a element, but the parent li item ignores these margins currently, so when you mouse over the margins, it recognizes you as moving the mouse off of the li, so the :hover state goes away resulting in a collapsed menu.
Try add the following:
nav li {
width: 100%;
display: inline-block;
}
This allows the li element to wrap the a element including the margins, so when they are moused over, the :hover state remains.
#media screen and (max-width: 10000px) {
nav ul {
list-style-type: none;
margin: 0 auto;
;
padding: 0;
width: 98%;
}
nav li {
width: 100%;
display: inline-block;
}
nav li a {
display: block;
color: #fff;
padding: 1em 0;
margin: 0.3em auto;
;
text-decoration: none;
text-align: center;
background: #000;
}
nav ul ul {
position: absolute;
visibility: hidden;
}
nav ul li:hover > ul {
visibility: visible;
position: relative;
}
nav ul ul li a {
background: #999;
}
.pullout:after {
content: "\000020\0025BE";
}
}
<nav>
<ul id="navigation">
<li><a id="current" href="index.html">Home</a>
</li>
<li>FAQ
</li>
<li><a class="dropdown" href="#">Dropdown</a>
<ul>
<li>
<a class="pullout" href="#">Pullout Tab</a>
<ul>
<li>Tier 3 Tab
</li>
</ul>
</li>
<li>
<a class="pullout" href="#">Pullout Tab 2</a>
<ul>
<li>Tier 3 Tab
</li>
</ul>
</li>
</ul>
</li>
<li>Servers
</li>
<li id="last">Contact Us
</li>
</ul>
</nav>
I'm trying to make a vertical dropdown menu but doesn't seem to work. It currently doesn't display any text, just a bar going across the top of the page. It is being pushed to be by by 115px for due to requirements. Here's the HTML:
<div id="wrapper">
<h1>Flags </h1>
<nav>
<ul>
<li>Introduction</li>
<li>History</li>
<li>National Flags</li>
<li>International Maritime Signal Flags
<ul>
<li>Maritime Signals: Letters</li>
<li>Maritime Signals: Numbers</li>
</ul>
</li>
</ul>
</nav>
Here is the CSS:
nav {
height:30px;
}
nav ul {
background-color: #5d2c2c;
padding: 0;
list-style: none;
position: relative;
bottom: 115px;
display: block;
}
nav ul:after {
content: ""; clear: both; display: block;
}
nav ul li {
float: right;
bottom: 115px;
position: relative;
}
nav ul li a {
display: block; padding: 5px 5px;
color: #FFF; text-decoration: none;
text-align:right;
}
nav ul ul {
background: #5d2c2c; padding: 0;
position: absolute; top: 100%;
}
nav ul ul li {
float: none;
border-top: 1px solid #000;
border-bottom: 1px solid #575f6a;
position: relative;
}
The CSS needed a little work on
Try this FIDDLE it'll work
This was missing:
nav ul li:nth-child(4) ul { display:none; }
nav ul li:nth-child(4):hover ul { display:block; color:red; }
and bottom was removed from this one
nav ul li {
float: left;
position: relative;
}
I found this link the other day, it's an step by step guide with full examples, check it out: http://www.adam-bray.com/blog/91/Easy+HTML+5+%26+CSS+3+Navigation+Menu/
check this fiddle , a similar implementation
<nav>
<ul>
<li class="header">
People
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
<li class="header">
Animals
<ul class="content">
<li>Sub 1</li>
<li>Sub 2</li>
</ul>
</li>
</ul>
</nav>
nav > ul{}
nav > ul > li{float:left;margin:0 5px;background:#cc3333;}
.header li a{background:#eee;color:#cc3333;}
.header li a:hover{color:#fff;background:#cc3333;}
ul{padding:0;}
li{list-style-type:none;}
a{color:#fff;text-decoration:none;padding:5px;display:block;text-align:center;}
.content{
display:none;
}
.header:hover > .content{display:block;}