I have a menu with dropdown option, I'm trying to align the dropdown menu under the respective item selected from list. So far is aligned to the left, the dropdown ul list is inside the element that should display the dropdown list.
I'm not sure about what I'm doing wrong here, some suggestion?
DEMO
HTML
<div id="menu">
<div id="menu-wrapper">
<img id="home-icon" src="images/home.svg" />
<nav id="menu">
<ul>
<li>SUBSCRIBE</li>
<li>NEWS</li>
<li>MARINA GUIDE</li>
<li class="submenu">PRACTICAL
<ul>
<li>Glossary</li>
<li>Tips</li>
</ul>
</li>
<li>OUT AT SEA</li>
<li>GEAR</li>
<li>FORUM</li>
</ul>
</nav>
<div id="menu-icon-container">
<img id="menu-icon" src="images/menu.svg" />
</div>
<div id="menu-icon-container">
<img id="menu-icon" src="images/search.svg" />
</div>
</div>
CSS
#menu-icon-container {
position: relative;
float: right;
height: 100%;
width: 60px;
background-color: ;
}
#menu-icon-container:hover {
background-color: #bf1b33;
cursor: pointer;
}
#menu-icon {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
cursor: pointer;
}
#menu ul {
list-style:none;
position:relative;
float:left;
margin:0;
padding:0;
margin-left:20px;
}
#menu ul li {
display: inline;
}
#menu ul li a {
color: #00599b;
padding: 0px 15px;
text-decoration: none;
border-radius: 4px 4px 0 0;
font-family: 'Open Sans', sans-serif;
}
#menu ul li a:hover {
border-bottom: 2px solid #bf1b33;
}
#menu ul ul
{
display:none;
position:absolute;
top:100%;
background: fuchsia;
padding:0
}
#menu ul ul li
{
float:none;
width:200px
}
#menu ul ul a
{
line-height:120%;
padding:10px 15px
}
#menu ul li:hover > ul
{
display:block
}
Add position: relative; to #menu ul li { and left:0; to #menu ul ul will make it proper below the selected.
#menu ul li {
display: inline;
position: relative;
}
#menu ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background: fuchsia;
padding:0
}
Fiddle
Related
I am new to HTML/CSS so please don't hurt me :)
How can I center my navigation? I've researched as much as I can...
CSS:
#navigation ul {
font-family:Arial;
list-style-type:none;
margin:0;
padding:0;
width:auto;
height:auto;
text-align:center;
}
#navigation ul li {
display:inline-block;
margin-right:-2px;
position:relative;
}
#navigation ul li a {
display:inline-block;
padding:5px 10px;
background:#ccc;
color:#000;
text-decoration: none;
}
#navigation ul li a:hover {background: #666;}
#navigation ul ul {
position:absolute;
left:0;
width:200px;
transition:all .5s;
max-height: 0;
overflow: hidden;
}
#navigation ul.submenu li {
display:block;
}
#navigation ul.submenu li a {
display:block;
background:#fff;
color: #000;
}
#navigation ul.submenu li a:hover {background: #333;}
#navigation ul li:hover ul {
max-height: 10000px;
}
#navigation li {
font-family:Arial;
font-size:11px;
display:inline;
float:left;
background-color:#FFF;
}
#navigation a {
display:block;
width:60px;
background-color:#FFF;
}
#navigation.center {
display:block;
margin-left:auto;
margin-right:auto;
}
#navigation {
disply:inline-block;
height:50px;
}
HTML:
<div id="navigation">
<ul>
<li>Aperture Science
<ul class="submenu">
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
</ul>
<ul>
<li>Black Mesa
<ul class="submenu">
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
Any help would be great! Thanks!
(Yes, my starter site is on Half Life and Portal)
You can try using below html code and css
HTML:
<div id="navMenu">
<ul>
<li>
Black Mesa
<ul>
<li>GLaDOS</li>
<li>Testing Chambers</li>
<li>The Player (Chell)</li>
</ul>
</li>
<li>
Black Mesa
<ul>
<li>The Combine</li>
<li>The Resistance</li>
<li>The Player (Gordon Freeman)</li>
</ul>
</li>
</ul>
</div>
CSS
#navMenu {
margin: 0;
padding: 0;
text-align: center;
}
#navMenu ul {
margin: 0;
padding: 0;
line-height: 30px;
display: inline-block;
}
#navMenu li {
margin: 0;
padding: 0;
text-align: left;
float: left;
list-style: none;
position: relative;
background-color: #999;
border-radius: 5px;
}
#navMenu ul li a {
text-align: center;
text-decoration: none;
height: 30px;
width: 150px;
display: block;
color: #FFF;
border: 1px solid #FFF;
text-shadow: 1px 1px 1px #000;
}
#navMenu ul ul {
position: absolute;
visibility: hidden;
top: 32px;
}
#navMenu ul li:hover ul {
visibility: visible;
}
#navMenu li:hover {
background-color: #09F;
}
#navMenu ul li:hover ul li a:hover {
background-color: #CCC;
color: #000;
}
#navMenu a:hover {
color: #000;
}
fiddle : http://jsfiddle.net/Khumesh/adx2g1z0/
You need to adjust navigation Div by applying width and setting its margin property using css:
#navigation{
width:50%;
margin:0 auto;
}
Please refer to fiddle for demo
I want to make navigation menu like the picture above with hover on Menu. This is my sample code for the navigation menu.
<div id="menu">
<ul>
<li>Menu1
<ul class="submenu">
<li>Menu1Sub1</li>
<li>Menu1Sub2</li>
<li>Menu1Sub3</li>
<li>Menu1Sub4</li>
</ul>
</li>
<li>Menu2
<ul class="submenu">
<li>Menu2Sub1</li>
<li>Menu2Sub2</li>
<li>Menu2Sub3</li>
</ul>
</li>
...
</ul>
</div>
Submenu position are in a line and I also want Submenu position to be exactly same for each Menu if possible.
How to do this with css?
this is what I tried so far not working as I intended.
#menu {
text-decoration:none;
}
#menu li {
line-height:20px;
float:left;
}
#menu li > ul {
display: none;
}
#menu li:hover > ul {
display: block;
}
#menu li ul li {
line-height:13px;
float:left;
position:relative;
}
Any help would be very appreciated.
try this code:
#menu {
position: relative;
background-color: black;
text-decoration:none;
}
#menu li {
background-color: green;
padding: 10px;
height: 30px;
list-style: none;
line-height:30px;
float:left;
}
#menu li > ul {
display: none;
}
#menu > ul > li {
border: 2px solid white;
}
#menu > ul > li:hover {
border: 2px solid black;
}
#menu li:hover > ul {
display: block;
position: absolute;
top: 54px;
left: 0;
}
#menu li ul li {
float:left;
position:relative;
}
DEMO jsfiddle
I am new to CSS and I need help with the navigation bar. I need to get the sub-topic right under the ABOUT US part but I cannot get it, it appears all the way to the right. Anything would be appreciated.
I can provide the HTML file if you need.
CSS:
container{
position: relative;
height: 70px;
width: 1100px;
}
.masthead{
background: #039be5;
width: 100%;
top: 0;
position: fixed;
color: white;
}
.logo{
position: relative;
float: left;
left: 90px;
font-family: Josefin Slab;
font-size: 21px;
top: 17px;
}
.logo h1 a {color: white; text-decoration: none; }
h1{
margin: 0;
}
a:link {color: white; text-decoration: none; }
a:visited {color: white; text-decoration: none; }
a:hover {color: white; color: black; }
a:active {color: white; text-decoration: none; }
#navcontent{
word-spacing: 4px;
}
li{
position: relative;
left: 155px;
list-style: none;
font-family: Raleway;
float: left;
margin-left: 21px;
padding-top: 15px;
font-size: 20px;
}
.navigation{
float: right;
}
.navigation ul>li ul{
height: 100%;
position: relative;
bottom: 100%;
}
.navigation ul>li ul>li{
bottom: 0px;
display: none;
}
.navigation>ul>li:hover ul>li{
display: block;
}
.navigation>ul>li a:hover {
text-decoration: none;
cursor:pointer;
}
HTML
<div class="masthead">
<div class="container">
<div class="logo">
<h1> MY SITE</h1>
</div>
<div class="navigation">
<ul>
<li>Courses
</li>
<li>Places
</li>
<li>More
<ul>
<li>Share
</li>
<li> Help
</li>
</ul>
</li>
<li id="navcontent">|| Sign In
</li>
<li>Sign Up
</li>
</ul>
</div>
</div>
</div>
Fiddle
To the point,,
CSS
ul{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0 15px;
}
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
ul li:hover
{
background:#f6f6f6
}
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
ul ul li
{
float:none;
width:200px
}
ul ul a
{
line-height:120%;
padding:10px 15px
}
ul ul ul
{
top:0;
left:100%
}
ul li:hover > ul
{
display:block
}
Live result here.
Hope this help
UPDATE
Ok, due to what Jon P ask I will describe this code.
Actually the main keys are :
ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff; /*remove, no effect*/
padding:0 /*remove, no effect*/
}
First, we make the child(<ul>) become hidden with display: none and give it properties position:absolute, top:100%, left:0; to let it under the MORE link
And then what we want? show it when we hover the MORE link. to do so, just do simple by making that child(<ul>) visible. Of course, we use this property :
ul li:hover > ul
{
display:block
}
good day i need help to separate my navigation bar the WELCOME ADMIN should be on the right side here is my code.
HTML
<div id="menu">
<ul>
<li>item1</li>
<li>item1<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li></ul>
</li>
<li>item1</li>
<li>item1<ul>
<li>item1</li>
<li>item1</li>
<li>item1</li></ul>
</li>
<li class="right"><a href="#" >Welcome Admin</a>
<ul>
<li>Subitem One</li>
li>Subitem Two</li>
<li>Subitem Three</li>
</ul>
</li>
</ul>
</nav>
CSS
#menu {
background:#000;
width:100%;
margin-top:0px;
height:40px;
border-radius: 3px;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul {
background: #000
padding: 0px;
border-radius: 5px;
float:left;
list-style: none;
margin-top:-20px;
position: relative;
display: inline-table;
}
}
#menu ul:after {
content: ""; clear: both; display: block;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
color:#fff;
}
#menu ul li:hover a {
background:#fff;
color: #000;
}
#menu ul li a {
display: block; margin-top:20px;
padding:10px 5px;
color: #FFF; text-decoration: none;
}
#menu ul ul {
background: #fff;
padding:0;
position: absolute;
top: 80px;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
#menu ul ul li {
float: none;
position: relative;
}
#menu ul ul li a {
padding: 15px 40px;
color: #fff;
}
#menu ul ul li a:hover {
background: #000;
color:#fff;
}
thankyou for your answers badly need your help for this projects thankyou for those who will answer
You need to specify the width of the ul as 100% otherwise the float:left on it collapses the uls width.
The just float the last li to the right.
JSFiddle Demo
CSS
#menu {
background:#000;
width:100%;
margin-top:0px;
height:40px;
border-radius: 3px;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul {
background: #000;
width:100%;
padding: 0px;
border-radius: 5px;
float:left;
list-style: none;
margin-top:-20px;
position: relative;
display: inline-table;
}
#menu ul:after {
content: ""; clear: both; display: block;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
color:#fff;
}
#menu ul li:hover a {
background:#fff;
color: #000;
}
#menu ul li a {
display: block; margin-top:20px;
padding:10px 5px;
color: #FFF; text-decoration: none;
}
#menu ul ul {
background: #fff;
padding:0;
position: absolute;
top: 80px;
box-shadow: 0px 0px 9px rgba(0,0,0,0.15);
}
#menu ul ul li {
float: none;
position: relative;
}
#menu ul ul li a {
padding: 15px 40px;
color: #fff;
}
#menu ul ul li a:hover {
background: #000;
color:#fff;
}
#menu ul li.right {
float:right;
}
I have corrected your css and updated here.
html
<div id="menu">
<ul>
<li>item1 </li>
<li>item1
<ul>
<li>item1 </li>
<li>item1 </li>
<li>item1 </li>
</ul>
</li>
<li>item1 </li>
<li>item1
<ul>
<li>item1 </li>
<li>item1 </li>
<li>item1 </li>
</ul>
</li>
<li class="last">
Welcome Admin
<ul>
<li>Subitem One</li>
<li>Subitem Two</li>
<li>Subitem Three </li>
</ul>
</li>
</ul>
</div>
css
#menu {
background:#000;
width:100%;
height:40px;
border-radius: 3px;
float:left;
}
#menu ul ul {
display: none;
}
#menu ul li:hover > ul {
display: block;
}
#menu ul {
padding: 0px;
border-radius: 5px;
list-style: none;
margin:0;
position: relative;
display: block;
}
#menu ul:after {
content:"";
clear: both;
display: block;
}
#menu ul li {
float: left;
}
#menu ul li:hover {
color:#fff;
}
#menu ul li:hover a {
background:#fff;
color: #000;
}
#menu ul li a {
display: block;
padding:0 10px;
color: #FFF;
text-decoration: none;
line-height:40px;
}
#menu ul ul {
background: #fff;
padding:0;
position: absolute;
top: 40px;
box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.15);
}
#menu ul ul li {
float: none;
position: relative;
}
#menu ul ul li a {
padding: 15px 40px;
color: #fff;
}
#menu ul ul li a:hover {
background: #000;
color:#fff;
}
#menu ul li.last {
float:right;
}
I'm trying to create an overline effect on hover with css. What I have so far is below. Here's the problem I have, the over line appears directly above the text. I want there to be some space b/w them. Here is my site: http://baycity2014.weebly.com, and here's the effect I'm going for: http://www.hartlevin.com. Any advice?
CSS:
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
}
#nav-wrap .container {
/*background:url(nav-bg-medium.jpg) repeat-x top;*/
/*height:45px;*/
}
#nav-wrap .container ul {
list-style: none;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
/* background:url(nav-saperator-medium.jpg) no-repeat right;*/
padding-right:2px;
}
#nav-wrap .container ul > li:first-child a,
#nav-wrap .container ul > li:first-child a:hover,
#nav-wrap .container ul span:first-child li a,
#nav-wrap .container ul span:first-child li a:hover{
border-radius:5px 0px 0px 5px;
}
#nav-wrap .container ul li a {
float: left;
display: block;
font-family: 'Helvetica', san-serif;
color: #000;
padding: 0px 30px;
border: 0px solid;
outline: 0;
list-style-type: none;
font-size: 16px;
line-height:45px;
/*text-shadow: 0px -1px 0px #333333;*/
}
#nav-wrap .container ul li:hover {
/*background:url(nav-saperator-hover-medium.jpg) no-repeat right;*/
}
#nav-wrap .container ul li a:hover {
/*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
color: #145D85;
text-decoration:overline;
}
HTML:
<div id="left_content_nav">
<ul class='wsite-menu-default'>
<li id='active'><a href='/'>Home</a>
</li>
<li id='pg886612977153583720'><a href='/about.html'>About</a>
<div class='wsite-menu-wrap' style='display:none'>
<ul class='wsite-menu'>
<li id='wsite-nav-226730044254468285'><a href='/blog.html'><span class='wsite-menu-title'>Blog</span></a>
</li>
</ul>
</div>
</li>
<li id='pg336904325932674008'><a href='/practice-areas.html'>Practice Areas</a>
</li>
<li id='pg342722679661255807'><a href='/press.html'>Press</a>
</li>
<li id='pg204649403653981064'><a href='/contact.html'>Contact</a>
</li>
</ul>
</div>
You should use border-top instead of overline, with some padding-top to pad up the spacing between the string and the top overline.
Just note that am using border-top: 4px solid transparent; which is just a transparent border to reserve the space, because if you won't use that, your menu items will shake on :hover as CSS Default Box Model counts the border outside the element instead of inside, which will result in element nudging..
Demo
HTML
<ul>
<li>Hello</li>
<li>World</li>
</ul>
CSS
ul {
margin: 40px;
}
ul li {
display: inline-block;
padding-top: 5px;
margin-right: 10px;
border-top: 4px solid transparent;
}
ul li:hover {
border-top: 4px solid #f00;
}
Controlling the width using :before or :after pseudo, HTML stays as above..
Demo 2
CSS
ul {
margin: 40px;
}
ul li {
display: inline-block;
padding-top: 8px;
margin-right: 10px;
position: relative;
}
ul li:after {
position: absolute;
width: 90%;
content: "";
top: 0;
left: 50%;
margin-left: -45%;
}
ul li:hover:after {
border-top: 4px solid #f00;
}
they use border-top instead of overline. Please change this
#nav-wrap .container ul li a:hover {
/*background:url(nav-bg-hover-medium.jpg) repeat-x top ;*/
color: #145D85;
text-decoration:overline;
}
into this
#nav-wrap .container ul li a {
border-top:2px solid transparent;
}
#nav-wrap .container ul li a:hover {
color: #145D85;
border-top:2px solid #145D85;
}
<ul>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3
<ul>
<li> Sub Item 1 </li>
<li> sub Item 1 </li>
</ul>
</li>
</ul>
CSS
body
{
background:grey;
}
ul li ul
{
display:none;
}
ul
{
list-style-type:none;
}
ul li
{
float:left;
width:130px;
margin:0px;
padding:10px;
background-color:#003366;
text-align:center;
}
ul li a{
color:white;
text-decoration:none;
}
ul li:hover
{
border-top:4px solid white;
margin-top:-4px;
}
ul li:hover ul
{
display:block;
margin-left:-50px;
margin-top:10px;
}
ul li ul li
{
background-color:#ffffff;
height:100%;
padding:10px;
}
ul li ul li a
{
color:#003366;
}
fiddle
Output:
You could place your menu in a <span></span> and set border-top for that span.