Sorry, my bad, was really tired of trying to figure out the issue. So lemme rephrase the question - "How do i make drop-down menu appear below specific item of my centered horizontal menu". ( I've changed the code a bit)
HTML
<div class="menu">
<ul id="nav">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4🔽
<ul id="dropdown">
<li>sublink1</li>
<li>sublink2</li>
</ul>
</li>
</ul>
</div>
CSS of centered .menu
#nav {
list-style: none;
margin: 0;
padding: 0;
text-align: center;
height: 30px;
position: relative;
}
#nav li {
display: inline;
}
#nav a {
display: inline-block;
padding: 10px;
margin-top: 40px;
font-family: "oswald", sans-serif;
color: black;
text-decoration: none;
}
#nav a:hover {
background-color: rgba(107, 163, 252, 0.28);
}
just add
ul#dropdown
{
padding: 0px;
}
see jsfiddle here : https://jsfiddle.net/yxLzbkL3/
edit fyi : if the padding is not specified the user-agent styling from your browser will auto indent multiple lists using padding.
Related
I'm a beginner in CSS but I'm currently trying to create a material-design header with "line" under each tab like on this Google site : Our Products | Google
If possible I'd also like the animation when changing tab.
For now my header html is :
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
</nav>
</header>
And my CSS :
header {
display: table;
background:#FFF;
box-shadow: 0 0 8px 0 rgba(0,0,0,.3);
width:100vw;
clear: both;
display: table;
overflow: hidden;
white-space: nowrap;
}
nav {
display: inline-block;
margin-left: 5vw;
vertical-align: middle;
}
nav ul {
display: inline-block;
margin 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 3vw;
}
nav a {
text-decoration: none;
}
nav a:visited {
color: inherit;
}
nav a:hover,:active,:focus {
color: #b82525;
}
How do I position the shape to be under the .current-nav tab ?
If you inspect the example you have linked to, you will see that one way they do this is by adding a border-bottom to the selected element. You can do this like so
.current-nav {
border-bottom:1px solid #4285f4;
}
They have another technique which is to add an element below, but i'll leave that for you to investigate/reverse engineer.
just use nav ul li a.current-nav{ border-bottom: 1px solid red; } and you are done.
Try this:
<header>
[MY LOGO]
<nav>
<ul>
<li>tab 1</li>
<li>tab 2</li>
<li>tab 3</li>
</ul>
<div class="line-selected right" style="display: block; left: 322px; right: 0.078px;"></div>
</nav>
</header>
The left and right values depends on the sizes of your Logo and of your <li>. You have to change the style of the "line-selected right"class for each event.
Im learning html & css and after few tutorials I decided to write webpage from nothing.
But I've got a problem. When I add "display: inline" in CSS .nav, it ignores all .nav css properties, including "display: inline".
Here's code:
HTML
<!DOCTYPE html>
<html>
<head>
<link href="main.css" rel="stylesheet">
<title>Neni okurka, nebudou caciky</title>
</head>
<body>
<div class="nav">
<ul>
<li class="active">Navigation 1</li>
<li>Navigation 2</li>
<li>Navigation 3</li>
<li>Navigation 4</li>
<li>Navigation 5</li>
</ul>
</div>
<div class="nav2">
<ul>
<li class="active">Navi 1</li>
<li>Navi 2</li>
<li>Navi 3</li>
<li>Navi 4</li>
<li>Navi 5</li>
</ul>
</div>
</body>
</html>
CSS
body {
background-image: url("background.png");
width: 1000px;
margin-left: auto;
margin-right: auto;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav {
display: inline;
width: 500px;
background: #fff;
}
If you want background(image) you need to have it in the container as soon you give it width and height because body is the "Base" you can give it margin: 0; padding: 0; to reset it only and you can add background to it but not height and width. Inside containeryou have created you can play with the height and width as you like.
html,
body {
margin: 0;
padding: 0;
background-color: cadetblue;
}
.container {
width: 1050px;
height: 100vh;
margin: 0 auto;
position: relative;
background-size: 100% 100%;
background: url("http://www.myfreetextures.com/wp-content/uploads/2013/07/free-grunge-texture-of-old-vintage-paper-background-image.jpg") no-repeat center;
}
.nav {
width: 1000px;
height: 50px;
margin: 0 auto;
background: beige;
border: 25px solid rgba(0, 0, 0, 0.3);
}
.nav ul {
margin: 0;
padding: 0;
list-style-type: none;
}
.nav ul li {
margin-left: 12px;
}
.nav ul li a {
float: left;
font-size: 16px;
font-weight: lighter;
text-decoration: none;
font-family: sans-serif;
margin: 10px 0px 10px 0px;
padding: 8px 15px 8px 15px;
}
.nav ul li a:hover {
color: #fff;
border-radius: 3px;
background: cadetblue;
}
<div class="container">
<div class="wrapper">
<div class="nav">
<ul>
<li class="active">Navigation 1
</li>
<li>Navigation 2
</li>
<li>Navigation 3
</li>
<li>Navigation 4
</li>
<li>Navigation 5
</li>
</ul>
<ul>
<li class="active">Navi 1
</li>
<li>Navi 2
</li>
<li>Navi 3
</li>
<li>Navi 4
</li>
<li>Navi 5
</li>
</ul>
</div>
</div>
</div>
this code without display:inline; or display :inline-block; which
it works but it's another way to align nabbar in nice way compatible
with all browsers too.
I hope you like it and it helps you, let me know if you have another question.
The right usage is:
.nav li {
display: inline;
}
You should put display: inline-block;
Man try to put .nav ul lit to refer to the li but I will not use that let me tell you now one sec
.nav ul li`display:inline`
in orther to display betther ur nav thing u shuld not use .nav ul li display:inline
i know i say that was for answer ur question but this thing i will tell you will be betther
.nav ul lifloat:left
this will do the items in the li will float left and will do the same as the inline but isbetther to use that rather than the inline
I am trying to create a vertical navigation in my HTML document, but I cannot seem to get the main menu to line up evenly. Here is my HTML for the vertical navigation:
<div id="navbar">
<ul>
<li>Menu 1</li>
<li>Menu 2
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
<li>Drop 3</li>
</ul></li>
<li>Menu 3</li>
<li>Menu 4
<ul>
<li>Drop 1</li>
<li>Drop 2</li>
</ul></li>
<li>Menu 5</li>
</ul>
</div>
And my CSS:
#navbar {
margin-left: -40px;
}
#navbar li{
list-style: none;
position: relative;
width: 209px;
padding: 6px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul{
margin-left: 100px;
margin-top: -28px;
visibility:hidden;
height: 100px;
}
#navbar ul li:hover ul{
visibility:visible;
}
This is my first post ever, so I apologize if I didn't post in the correct format. This code is also from a much larger HTML/CSS file, so I just copy/pasted the only part I'm having an issue with. If I need to post a screenshot of what I'm talking about I can do that.
Thank you in advance!!
demo - http://jsfiddle.net/uab2hr50/2/
if you are looking to align the sub menu below the main menu
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
#navbar ul {
border: 1px solid red;
display: inline-block;
padding: 6px;
}
#navbar li {
list-style: none;
position: relative;
width: 209px;
line-height: 20pt;
cursor: pointer;
}
#navbar ul ul {
display: none;
padding: 0;
border: 0;
}
#navbar ul li:hover ul {
display: block;
}
<div id="navbar">
<ul>
<li>Menu 1
</li>
<li>Menu 2
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
<li>Drop 3
</li>
</ul>
</li>
<li>Menu 3
</li>
<li>Menu 4
<ul>
<li>Drop 1
</li>
<li>Drop 2
</li>
</ul>
</li>
<li>Menu 5
</li>
</ul>
</div>
There are a few problems here preventing the display you expect:
First: the fiddle
CSS CHANGES
#navbar li{
list-style: none;
position: relative;
/*width: 209px;*/
padding: 6px;
line-height: 20pt;
cursor: pointer;
display: block;
}
#navbar li:after {
content: '';
display: table;
clear: both;
}
#navbar ul a {
display: inline-block;
}
#navbar ul ul{
margin-top: 0;
visibility:hidden;
height: 100px;
padding: 0;
display: inline-block;
vertical-align: top;
margin-bottom: -9000px;
}
#navbar ul ul li:first-child {
padding-top: 0;
}
We removed quite a bit of your padding and margin rules here, and stopped setting a width on the li that you went ahead and broke out of anyway in the original code.
Then, we told both the a and ul elements to display as inline-block, told them they were to vertically align at the top and removed the padding-top off the first child of your sub-nav.
Then, we way over-compensate for the height of your lists by setting a margin-bottom of -9000px to pull your subsequent list items up to where they belong.
No absolute positioning needed, which would probably require some JavaScript to position everything reliably for you given different conditions.
Hope that helps.
I'm trying to make the navbar elements appear in a row, side by side, with the dropdown one causing a menu to drop down beneath them.
I know there's the nav element and I know there are a thousand jQuery plugins for this. I just want to understand why this isn't working.
http://codepen.io/anon/pen/hjKLD
<!-- Works all the way down to IE7! -->
<header>
<nav>
link
link
<ul class="drop">
<li>
dropdown
</li>
<li class="menu">
link
link
link
link
</li>
</ul>
link
link
</nav>
</header>
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
Try
ul, li {
display: inline;
}
Update
I found a quick solution, and without using JavaScript! You might need to make some changes to fix the minor issues.
Here's what I'd suggest for your HTML:
<header>
<nav>
<ul>
<li>link 1</li>
<li>link 2</li>
<li class="menu">Dropdown
<ul class="drop">
<li>link 3</li>
<li>link 4</li>
<li>link 5</li>
<li>link 6</li>
</ul>
</li>
<li>link 7</li>
<li>link 8</li>
</ul>
</nav>
</header>
It's cleaner and more semantic.
Now for the CSS:
a, ul, li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
display: inline;
text-decoration: none;
}
a:hover {text-decoration: underline;}
ul {display: inline-block;}
.drop {
display: none;
padding: 5px;
border: 1px solid #000;
background-color: #fff;
}
.menu:hover .drop {
display: block;
position: absolute;
left: 90px;
}
.drop li {display: block;}
No JS required.
Demo via Codepen here.
Need to add display: inline; to the <li> element as well. Otherwise, it's still blocked.
Your list is being displayed as a block element. Which will fill the space horizontaly causing the elements to render vertically.
In order to fix this issue you can chance the display type:
display: inline;
display: inline-block;
Or you can float the element, which will make it no longer fill horizontally and allow the elements to be displayed side by side:
float: left;
See here for more details on css display types http://css-tricks.com/almanac/properties/d/display/
Try this css instead:
a{
vertical-align: top;
}
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
ul{
display: inline-block;
margin: 0px;
padding: 0px;
}
This will make them all end up on the same row, but something does still need to be done about the dropdown menu pushing the items to the right further when it's shown.
I think that's what you searching for:
Try this: http://codepen.io/anon/pen/vaEkt
For consistency of markup I swapped the <ul> list in <nav> element.
HTML
<header>
<nav>
link
link
<nav class="drop">
<span>dropdown</span>
<nav class="menu">
link
link
link
link
</nav>
</nav>
link
link
</nav>
</header>
CSS
li {
list-style-type:none;
margin: 0px;
padding: 0px;
border: 0px;
}
nav,
ul {
display: inline-block;
}
.drop {
position: relative;
}
.drop .menu {
position: absolute;
bootom: 0;
left: 0;
}
I want to design a Horizontal menu and onMouseover I want a vertical submenu to appear.
I surfed a lot and found out some codes ,but when I execute, in almost all the codes I get the Horizontal menu properly but the submenus dont get displayed at all.
i am programming using ActivePerl 5.12 on Windows.
I am using IE7 for display, is that the reason why am not getting the proper result?
Please do help me find the solution. Thank you.
Here's the piece of code which i was trying to execute..
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: "Trebuchet MS", Helvetica, Sans-Serif;
font-size: 14px;
}
a {
text-decoration: none;
color: #838383;
}
a:hover {
color: black;
}
menu {
position: relative;
margin-left: 30px;
}
menu a {
display: block;
width: 140px;
}
menu ul {
list-style-type: none;
padding-top: 5px;
}
menu li {
float: left;
position: relative;
padding: 3px 0;
text-align: center;
}
menu ul.sub-menu {
display: none;
position: absolute;
top: 20px;
left: -10px;
padding: 10px;
z-index: 90;
}
menu ul.sub-menu li {
text-align: left;
}
menu li:hover ul.sub-menu {
display: block;
border: 1px solid #ececec;
}
</style>
HTML Part
<div id="menu">
<ul>
<li>
Home
<ul class="sub-menu">
<li>Pages</li>
<li>Archives</li>
<li>New Posts</li>
<li>Recent Comments</li>
</ul>
</li>
<li>
<a href="#" >About</a>
<ul class="sub-menu">
<li>Get to know us</li>
<li>Find out what we do</li>
</ul>
</li>
<li>
Contact
<ul class="sub-menu">
<li>E-mail Us</li>
<li>Use Our Contact Form</li>
</ul>
</li>
</ul>
</div>
Firstly, if you have a choice, upgrade to IE8. IE7 really has no reason to be in use. :-) That said, IE7 should do what you want... just be aware that it has significant missing functionality, so it might make your life harder.
Secondly, your question says you've found some 'codes' (tutorials?), but you're not getting the results you want; it would help if you told us which tutorials you've used, or at least showed us some of the code that doesn't work, and tell us what problems you've had with it.
I will try to provide an answer, though...
Your question implies that you want to write a menu that is controlled only by CSS.
With that in mind, it doesn't really matter what language you use to generate the HTML, because your HTML should only need to consist of nested <ul> and <li> tags, with a few IDs or classes to tell your CSS where to apply its styles.
From that perspective, the Perl code (or any other language) shouldn't be particularly complex. The CSS may be complex, but that would be separate from your Perl code.
In CSS, the :hover style will allow you to build mouse-over drop-down functionality. No Perl (or Javascript) required. I'd suggest looking at the A List Apart site; it's a good site for CSS tutorials and has some very good examples of CSS-driven menus.
<html xmlns="http://www.w3.org/1999/xhtml">
CSS code
div {
width: 550px;
margin: 0px auto;
}
div ul li a:link, div ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
font-size: 14px;
color: Red;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
div ul li a:hover{
background-color: #030;
}
li ul li a:link, li ul li a:visited {
display: block;
background-color: #98bf21;
font-family: Arial, Helvetica, sans-serif;
font-weight: normal;
font-size: 12px;
color: Blue;
text-align: center;
text-decoration: none;
padding: 4px;
border-bottom: 1px solid #fff;
width: 170px;
}
li ul li a:hover {
background-color: #050;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
div ul li {
float: left;
margin-left: 5px;
}
ul li ul li {
float: none;
margin-left: 0px;
}
li ul {
display: none;
}
li:hover ul{
display: block;
}
HTML
<div>
<ul>
<li>Menu 1</li>
<li>Menu 1
<ul>
<li>Sub 1</li>
<li>Sub 2</li>
<li>Sub 3</li>
</ul>
</li>
<li>Menu 3
<ul>
<li>Sub 4</li>
<li>Sub 5</li>
<li>Sub 6</li>
</ul>
</li>
</ul>
</div>
Making menu is all about css and javascript
I will recommend some jquery plugin coz its clean and easy to use.
see tutorial
http://www.sohtanaka.com/web-design/mega-drop-downs-w-css-jquery/
demo link
http://www.sohtanaka.com/web-design/examples/mega-dropdowns/
You can use online HTML CSS horizontal and vertical menu layout generator to create any HTML menu with up to three submenu levels using CSS only.