Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I need to align my submenu to the left with some margin and remove the border from the right side... but if I remove it, the border in the menu is also removed and I don't want this...
<nav>
<ul class="fancyNav">
<li id="quemsomos" class="menlog"><img src="imgs/Logo.png" width="37" height="45" />
</li>
<li id="quemsomos"><font face="din" size="4">QUEM SOMOS</font>
<!--start of sub menu-->
<ul>
<li>link the zone 1
</li>
<li>link2
</li>
<li>l for example
</li>
</ul>
<!--end of sub menu-->
http://jsfiddle.net/RHCn7/2/
DEMO
#quemsomos ul {
padding: 0;
margin-left: 5px;
}
#quemsomos ul li {
border: none;
}
EDIT(answer to the request in the comment):
DEMO
#quemsomos ul li {
border: none;
width: 100%;
text-align: left;
}
Add padding
ul li ul {
display: block;
border: 0;
position: absolute;
background-color: #D5D5D7;
opacity: 1;
padding: 8px;
}
Check this : http://jsfiddle.net/RHCn7/6/
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have used the < div > tag to create a navigation menu bar but it only displays in a vertical fashion. However, I then changed the < div > tag into a < nav > tag, but still receive the same results in a vertical orientation.
On the ul add display: flex;
nav {
padding: 0;
width: 100%;
background: #262626;
overflow: hidden;
}
li a {
color: white !important;
text-align: center;
padding: 16px;
text-decoration: none;
}
li a:hover {
background-color: gray;
}
li {
list-style: none;
}
ul {
display: flex;
}
<nav>
<ul>
<li>HOME</li>
<li>SERVICES</li>
<li>ABOUT US</li>
<li>CONTACT</li>
<li>NEWS</li>
<li>FAQ</li>
</ul>
</nav>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
How do I make a hover menu bar in CSS? So if I go with my mouse over home, that informatica, hobby and ik will pop up.
<div class="menu">
<ul id="menu-bar">
<nav>
<li>Home</li>
<ul>
<li>Informatica</li>
<li>Hobby</li>
<li>Ik</li>
</ul>
</li>
</nav>
</div>
</div>
You can do this:
CSS
ul {
list-style: none;
margin: 0;
}
ul ul {
display: none;
padding: 0;
margin: 0;
}
ul li {
display: inline-block;
position: relative;
}
ul ul li {
display: block;
}
ul li:hover ul {
display: block;
}
HTML
<div class="menu">
<nav>
<ul id="menu-bar">
<li>Home
<ul>
<li>Informatica</li>
<li>Hobby</li>
<li>Ik</li>
</ul>
</li>
</ul>
</nav>
</div>
DEMO HERE
Simply use this css:
ul>li{
display:none;
}
ul:hover li{
display:block;
}
Here is the JSFiddle demo
try this may help
<div class="menu">
<nav>
<ul id="menu-bar">
<li>Home
<ul>
<li>Informatica</li>
<li>Hobby</li>
<li>Ik</li>
</ul>
</li>
</ul>
</nav>
</div>
and in style
<style>
#menu-bar li ul
{
display:none;
}
#menu-bar li:hover ul
{
display:inline-block;
position:absolute;
}
</style>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I'm trying to create a horizontal list that isn't precisely aligned, exactly like this: http://i.imgur.com/G8xWymZ.png (horizontal and scattered)
Here's what I've got so far:
HTML
<nav>
<ul id="menu">
<li>Random</li>
<li>Stand</li>
<li><a href="#>NAN</a></li>
<li>Tap</li>
<li>Mart</li>
<li>Dom</li>
</ul>
</nav>
CSS
nav {
position: relative;
top: 25px;
left: 290px;
}
nav ul
{
margin: 0;
padding: 0;
list-style-type: none;
underline: none;
}
nav ul li { display: inline; margin: 0px 20px 0px 0px;}
nav ul li a { color: red; font-size: 14px; text-decoration: none;}
As you can see, although the list is horizontal it is not 'unordered'/scattered as in the image. Any suggestions?
You can position the <li>-elements manually with position: relative and the position properties top, right, bottom, left. I have written a little example for you here: https://jsfiddle.net/c5bw1dbe/
I hope this helps!
Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 years ago.
Improve this question
Here is my CodePen: http://codepen.io/ScottBeeson/pen/rxquJ
So basically when you hover over an entity, a menu slides up. I'm trying to create a submenu for each menu item that basically mirrors the menu functionality, but slides down from the bottom of the menu. Here is an image of what it should look like:
And here is my current HTML:
<div class="entity">
<span class="menu"><div>A</div><div>B</div><div>C</div></span>
</div>
I can think of a couple ways to do this with JQuery, but I'm wondering if it's possible to do with CSS. Obviously, populating the menu will be via javascript, but I'm trying to use CSS as much as possible. So to put it in question form: If I put a static div with a class of "submenu" inside my entity, is there any way with CSS/LESS to trigger it when I hover over a div inside the menu?
I don't use LESS, so I can't help you with that.
However, I made you this code, which displays the menu on hover, and the submenu when you hover the menu items. You could set up the structure for a entity like this:
<div class="entity">
<ul>
<li>A
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>B
<ul>
<li>1</li>
<li>2</li>
</ul>
</li>
<li>C</li>
</ul>
</div>
And combine it with this CSS:
.entity {
margin: 5px;
position: relative;
display: inline-block;
width: 260px;
height: 200px;
background-color: lightblue;
}
.entity ul {
display: none;
list-style: none;
margin: 0;
padding: 0;
position: absolute;
width: 100%;
background-color: rgb(0,0,0); /*fallback*/
background-color: rgba(0,0,0,.5);
bottom: 0px;
}
.entity li:hover {
background: black;
color: white;
}
.entity:hover > ul { /* only display direct ul child of .entity */
display: block;
}
.entity li {
display: inline-block;
padding: 10px;
}
.entity li > ul {
background: black;
}
.entity li:hover > ul {
display: block;
left: 0;
bottom: -100%;
}
I hope you can add the smooth effects yourself. Good luck.
Ow, and a DEMO
[EDIT]
Made a (bit sloppy though) animation using transitions, check the updated Fiddle.
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
Questions concerning problems with code you've written must describe the specific problem — and include valid code to reproduce it — in the question itself. See SSCCE.org for guidance.
Closed 9 years ago.
Improve this question
I'm trying to update on of my company's website menu and i've managed to do everything except when the menu's extend their width on mouse hover, level 2 and level 3 lists stack up on top of each other. I understand its because i made the positioning of absolute rather than relative to avoid level 1 menus from moving up and down on hover. Anyone has any suggestion on how i can manage to show submenus and keep the main menu not move around on mouse hove?
here's the my jsfiddle code, http://jsfiddle.net/#&togetherjs=hyRjkxLPGH.
thanks!
There were a number of issues with your Fiddle. First of all, the only element that should be inside a <ul> tag is an <li> tag, not text. Secondly, you were using absolute positioning nearly correctly, but you need to give each li a relative position.
I've included a basic (somewhat stripped down) solution for you below. You can also find this at this fiddle.
You can reinsert your styles pretty easily I'm sure, perhaps use more classes and less CSS selectors (have you ever used SCSS?)
HTML
<ul class="menubar">
<li>menu1
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
<li>menu2
<ul>
<li>submenu1
<ul>
<li>submenu11</li>
<li>submenu12</li>
<li>submenu13</li>
</ul>
</li>
<li>submenu2
<ul>
<li>submenu21</li>
<li>submenu22</li>
<li>submenu23</li>
</ul>
</li>
<li>submenu3
<ul>
<li>submenu31</li>
<li>submenu32</li>
<li>submenu33</li>
</ul>
</li>
</ul>
</li>
</ul>
CSS
.menubar, .menubar ul {
list-style: none;
margin: 0;
padding: 0;
}
.menubar > li {
display: inline-block;
position: relative;
}
.menubar li ul {
display: none;
}
.menubar li:hover > ul {
display: block;
position: absolute;
width: 100px;
}
.menubar li:hover > ul > li {
position: relative;
}
.menubar > li > ul > li ul {
position: absolute;
top: 0;
left: 100px;
}