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>
Related
I'm a beginner in web developing, when I hover my mouse to the list of my menus the dropdown menu keeps on showing in every menu. What seems to be the problem?
I tried removing the so I can use "ul li ul li" directly in css but it doesn't work and also when I try ".site-header nav ul li:hover .sub-menu-about" there is no output but ".site-header nav ul:hover .sub-menu-about" I've got the same problem even when I use ".site-header ul:hover .sub-menu-about" still the same problem.
Here is my CSS code
.sub-menu-about{
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation ul:hover .sub-menu-about ul{
display: block;
margin: 10px;
}
and this is my html code
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About</li>
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
Once I hover on the about menu, a dropdown list of History, Mission, Vision will be shown. and when I hover on different menus there will be no dropdown menu will be shown
Error No. 1: The submenu should be located inside the <li> tag. Corrected
Error No. 2:
First, you hide the class .sub-menu-about through displays: none, and then you try to show not this class itself, but a list inside it. Corrected
Result
.sub-menu-about {
display: none;
}
.site-header ul:hover .sub-menu-about {
display: block;
margin-top: 15px;
margin-left: -15px;
position: absolute;
}
.main-navigation li:hover .sub-menu-about {
display: block;
margin: 10px;
}
<div class="site-header__menu group">
<nav class="main-navigation">
<ul>
<li>Home</li>
<li>About
<div class="sub-menu-about">
<ul>
<li><a href="#">History</li>
<li><a href="#">Vision</li>
<li><a href="#">Mission</li>
</ul>
</div>
</li>
<li>News</li>
<li>Events</li>
</ul>
</nav>
</div>
This question already has answers here:
How to make a <ul> display in a horizontal row
(9 answers)
Closed 1 year ago.
I am trying to create a menu using html, I have added my link in an unordered list (ul) has shown below. In my css i added a display:inline; to the links so that they would display in a link like a menu but for some reason it doesn't seem to work.
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li a {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
You are targeting the anchors, which are already inline by default. I believe you mean to target the list items:
#menu ul li {
display: inline;
}
JSFiddle
You were very close!
The only thing wrong with your code, is that display: inline; should be on your <li> elements instead of your <a> elements :
#menu a {
text-decoration: none;
}
#menu ul {
list-style: none;
}
#menu ul li {
display: inline;
}
<div id="menu">
<ul>
<li>Home
</li>
<li>About Us
</li>
<li>Special Offers
</li>
<li>Meet Our Staff
</li>
<li>Contact
</li>
</ul>
</div>
(see also this Fiddle)
Try this: ul li { float: left; padding-right:10px; }
https://jsfiddle.net/n4aak3nk/1/
I'm just barely learning how to code. I know there is more than one way to skin a cat, but what is the most efficient way to create a typical menu with lists, search fields, etc.?
I've been able to create all of the elements. I am having a very hard time getting the CSS correct to look the way I want.
Here is what my current project looks like.
This is what I am trying to achieve.
Thanks for the help! Any tips for a beginner would also be appreciated. Thank you!
Here is my HTML
<!DOCTYPE html>
<html lan="en">
<head>
<meta charset ="UTF-8">
<link href = "racemonster.css" rel="stylesheet" type="text/css">
<title>Home</title>
</head>
<body>
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart</li>
<li>Help</li>
<li>Sign In</li>
<li>Sign Up</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>
</div>
Here is the css
.headerLeft{color:#C4D82D;font-family:sans-serif;background-color:#323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight{color:#B1B3B5;font-family:sans-serif;background-color: #323232;width:100%;margin:0;padding:20px;top:0;left:0;}
.headerRight ul {list-style-type: none;}
.headerRight ul li{display: inline;margin-right: 20px}
.headerRight ul li a{text-decoration: none;font-family: sans-serif;color: #898B8E;background-color:#323232;}
.headerRight ul li a:hover{color:#B1B3B5;}
.menu ul {list-style-type: none;width:100%; margin:0; padding-top:40px; padding-bottom:40px; background-color: #C4D82D}
.menu ul li {display:inline;margin-right: 20px;}
.menu ul li a {text-decoration: none;font-family: sans-serif;color:#323232;background-color: #C4D82D;}
.menu ul li a:hover {color:#999B9D;}
Updated Answer
Here is a solution... first check out my code (http://jsfiddle.net/ProgrammerKid/s01yuzm1/)
HTML
<div class="headers">
<div class="headerLeft">
<h1>Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart
</li>
<li>Help
</li>
<li>Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
<div class="header-padding"> </div>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
CSS
.headers {
width: 100%;
position: static;
}
.headerLeft {
width: 50%;
float: left;
box-sizing: border-box;
height: 120px;
}
.headerRight {
width: 50%;
box-sizing: border-box;
float: right;
height: 120px;
}
.header-padding {
height: 120px;
}
What I like to do is group the two headers into one big <div> so that they both share a common parent (disregarding the <body>)... Then I added a CSS float property, and set their width to 50%. This will align them...
The <div class="header-padding">[...]</div> element is to provide the links sections with enough padding... Since we float the two div's (.headerRight, and .headerLeft) the links sections would appear underneath the headers... therefore by placing the header padding element, we are providing the links section with enough space.
Old Answer
There is no "correct" way to make a header
That being said, it would be really helpful to the people answering your question if you included the HTML/CSS/JS code...
For now I will use a very abstract method of conveying my tips to you...
If we said the element with the word "NAME" inside it was a <div id="1"></div> and the element in which your menu items are in would be <div id="2"></div>, and the links were <div id="3"></div>
Then here is what your CSS should look like:
#1 {
width: 40%;
float: left;
}
#2 {
width: 50%;
float: left;
}
the above will align both the elements together
and below we will reduce the padding to around 10px;
#3 {
padding: 10px;
}
and that's all I can help you with for now until you upload your code
I have created css as you required it is very straightforward and easy to understand.
enter link description here
.container {
background-color:#323232;
}
.title {
color:#C4D82D;
margin-left:40px;
}
.headerLeft {
width:50%;
float:left;
height:100px;
display:inline-block;
}
.headerRight {
width:50%;
height:100px;
display:inline-block;
}
.headerRight ul li {
display:inline;
color:#B1B3B5;
}
.headerRight ul li a {
color:#b1b3b5;
}
.headerRight ul li a:hover {
color:#B1B3B5;
}
.menu {
background-color:#C4D82D;
height:50%;
position:relative;
padding-top:20px;
margin:(auto, auto, 0, 0);
}
.menu ul li {
display:inline;
}
.menu ul li a {
color:#323232;
}
.menu ul li a:hover {
color:#999B9D;
}
<body>
<div class="container">
<div class="headerLeft">
<h1 class="title">Name</h1>
</div>
<div class="headerRight">
<ul>
<li>Cart |
</li>
<li>Help |
</li>
<li>Sign In |
</li>
<li>Sign Up |
</li>
</ul>
</div>
<div class="menu">
<ul>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
<li>Link
</li>
</ul>
</div>
</div>
</body>
I'm trying to make a navigation menu for responsive website. I came to a point where I have my main menu fluid but not sure how to get drop-down menu from it .
Here is my html code:
<body>
<div id="nav">
<ul>
<li>Home</li>
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
<li>Clothes</li>
<li>Recipe</li>
<li>Contact</li>
</ul>
</div><!-- ends nav -->
</body>
Here's my CSS:
#nav {
display: table;
table-layout: fixed;
width: 100%;
}
#nav ul {
display: table-row;
margin: 0;
padding: 0;
}
#nav ul li {
list-style: none;
display: table-cell;
text-align: center;
}
#nav ul li a {
display: block;
}
I tried adding these lines of code to my CSS but didn't work as well:
#nav ul li:hover ul {
display: block;
}
Please help me out.
Thanks
The list structure in the question is incorrect
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
Should be
<li>Exercises</li>
<ul>
<li>Yoga</li>
<li>Pilates</li>
<li>Aerobics</li>
</ul>
</li>
The sub <ul> is wrapped in the parent <li> node.
Second, add the code below to make it drop down:
#nav li {position:relative;}
#nav li ul{display:none;position:absolute;left:0;top:100%;}
Then add more CSS code to make it beautiful.
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/